ADOBE DREAMWEAVER CS3 - … · Crear una lista no ordenada, con 5 nombres de cantantes. ......

Manual de Adobe Dreamweaver CS3 3º SECUNDARIA

Autor: Gerardo Javier Calderón Hernández 1

ADOBE DREAMWEAVER CS3

CONCEPTO:

Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS3 permiten agregar rápidamente diseño y

funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript,

etc., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar

con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del

programa.

INGRESANDO A ADOBE DREAMWEAVER CS3:

Clic en el botón Inicio.

Clic en la opción Ejecutar.

Ingresar el nombre ejecutable: “Dreamweaver”.

Clic en el botón Aceptar.

CONOCIENDO LA INTERFAZ DE DREAMWEAVER:



1. Barra de titulo.

2. Botones de Control.

3. Barra de menús.

4. Barra Insertar.

5. Barra de documento.

6. Barra Estándar.

7. Regla o Regleta.

8. Cursor.

9. Área de diseño.

10. Área de paneles.

11. Barra de propiedades.

CREANDO UNA NUEVA PAGINA WEB:

Clic en el menú Archivo.

Clic en la opción Nuevo, aparecerá una ventana.

En la categoría, elegir la opción pagina básica.

En la página básica, elegir HTML.

Clic en el botón Crear.

GUARDANDO UNA PAGINA WEB:


Clic en la opción Guardar como…

En la lista Guardar en, elegir donde se va a almacenar.

Ingresar el nombre a la página Web.

Clic en el botón Guardar.

ABRIENDO UNA PAGINA WEB:


Clic en la opción Abrir.

En la lista Buscar en, buscar la pagina existente.

Seleccionar el objeto.

Clic en el botón Abrir.



VISUALIZANDO TU PAGINA EN EL NAVEGADOR:

Antes de visualizar una pagina, deberán estar guardados los últimos cambios.


Seleccionar la opción Vista previa en el navegador.

Clic en la opción IExplorer 6.0

PRACTICA 01:

CERRANDO LA PAGINA WEB:

Antes de cerrar una pagina, deberán estar guardados los últimos cambios.


Clic en la opción Cerrar.



PREPARANDO LA PAGINA WEB:

Clic en el menú Modificar.

Clic en la opción Propiedades de la Página.

Realizar los cambios, que desee o se pida.


CAMBIANDO EL COLOR DE FONDO DE UNA PAGINA WEB:



Clic en el recuadro Color de fondo, para elegir el color que se desee o se pida.


PRACTICA 02:

INSERTANDO UNA IMAGEN DE FONDO:





Clic en el recuadro Color de fondo, para elegir el color que se desee o se pida.


PRACTICA 03:

CONOCIENDO LA BARRA DE PROPIEDADES:

Esta barra va a variar, según que objeto tiene seleccionado, pero por defecto se muestra las

propiedades de texto. Por ejemplo: alineaciones, listas, tamaño, color y estilo de fuente, etc.

CREANDO LISTA DE DEFINICION:

Clic en el menú Texto.

Seleccionar en la opción Lista.

Clic en la opción Lista de definición.

CREANDO LISTA SIN ORDENAR:



Clic en la opción Lista sin ordenar.



CREANDO LISTA ORDENADA:



Clic en la opción Lista ordenada.

PRACTICA 04:

PRACTICA 05:



PRACTICA 06:

INSERTANDO CARACTERES ESPECIALES:

Clic en el menú Insertar.

Seleccionar la opción HTML.

Seleccionar la opción Caracteres Especiales.

INSERTANDO OTROS CARACTERES ESPECIALES:


Seleccionar la opción HTML.

Seleccionar la opción Caracteres Especiales.

Clic en la opción Otro…



INSERTANDO UNA REGLA HORIZONTAL:


Selecciona la opción HTML.

Clic en la opción Regla Horizontal.

INSERTANDO HIPERVINCULO O ENLACE(EXTERNO):


Clic en la opción Hipervínculo.

Ingresar el texto que se va mostrar en la Web.

Ingresar el vínculo, donde se va a ingresar al hacer clic.

Ingresar el titulo, que se mostrara, cuando se señale.




PRACTICA 07:

Nota: relacionado al titulo, todos los vínculos, tendrán el mensaje: “Clic aquí…”. Y

relacionado al destino, solo se trabajara con “Blank” y “Parent”.

TIPOS DE DESTINOS DE ENLACES O HIPERVINCULOS:

1. Blank: muestra la web en una nueva página.

2. Parent: muestra la web en la misma ventana.

3. Self: muestra la web en la misma ventana.

4. Top: muestra la web en la ventana completa.

INSERTANDO UN HIPERVINCULO INTERNO:

Antes deberá diseñar la página, con el contenido que el usuario desee o se le pida. En dicha

página se mostrara una lista no ordenada y una lista con definición. (Dicha página se muestra

mas adelante).

En la lista de definición, seleccionar el texto o imagen, que desea ingresar el anclaje.


Clic en la opción Anclaje con nombre.

Ingresar el Nombre de anclaje.


Aparecerá el marcador de anclaje y eso significara que esta correcto.



En la lista no ordenada, seleccionar el texto donde desea ingresar el anclaje.

En el campo Vinculo de la barra de propiedades, digitar el símbolo ( # ), más la palabra de

anclaje, por ejemplo: #SHAKIRA.

Nota: El nombre será ingresado como se muestra: AVRIL_LAVIGNE

PAGINAS DE INTERES:

http://www.musica.com

http://www.google.com.pe

http://www.hotmail.com/

http://www.mixmail.com

http://www.yahoo.es

http://www.latinmail.com

PRACTICA 08:

http://www.musica.com/

http://www.google.com.pe/

http://www.hotmail.com/

http://www.mixmail.com/

http://www.latinmail.com/



Crear una lista no ordenada, con 5 nombres de cantantes.

Crear una lista de definición, con sus respectivas biografías.

Ingresar los hipervínculos, que se les pida.

INSERTANDO HIPERVINCULO DE COREO ELECTRONICO:


Clic en la opción Vínculo de Correo Electrónico.

En la ventana que aparece, ingresar el texto a mostrar en la página Web.

Ingresar el correo electrónico.


PRACTICA 09:

INSERTANDO UN HIPERVINCULO A UN ARCHIVO:

Seleccionar el texto, que desea establecer como vinculo.

En el campo Vínculo, hacer clic en el botón Buscar el archivo (situado a la derecha).

Clic en la lista Buscar en, para ubicar y seleccionar el archivo.




PRACTICA 10:

INSERTANDO UNA IMAGEN:

Ubicar el cursor, en donde se va a incrustar la imagen.


Clic en la opción Imagen.

Buscar la imagen y seleccionarla.


Aparecerá una ventana, donde si desea puede ingresar un texto alternativo.




INSERTANDO UN HIPERVINCULO DE CORREO ELECTRONICO DESDE UNA

IMAGEN:

Seleccionar la imagen.

En el campo Vinculo, ingresar el texto: mailto:

Y además el correo electrónico del contacto o empresa.

PRACTICA 11:

FIN 01



Esta practica, se va trabajar con la ya creada PRÁCTICA 08, para darle los cambios

respectivos y claro esta guárdalo con otro nombre.

Insertar una imagen, según su biografía.

Insertar una imagen al lado derecho del nombre del artista (Lista definición).

Insertar un anclaje, que me permite volver al menú.

Insertar una imagen al lado derecho del nombre del artista (Lista definición).

Crear un hipervínculo de archivo.

Insertar una imagen en la parte inferior.

Insertar un hipernviculo de correo en la última imagen.

Guardar con otro nombre.

INSERTANDO UNA TABLA:


Clic en la opción Tabla, aparecerá una ventana.

En dicha ventana, tendrá que elegir cuantas filas y columnas desea.

El ancho de la tabla.

Grosor del borde de la tabla.

Y otros, como por ejemplo: relleno de celda, espaciado entre celdas, encabezado, etc.


COMBINANDO CELDAS:

Seleccionar el rango de filas o columnas.

Clic en el menú modificar.

Seleccionar la opción Tabla.

Clic en la opción Combinar Celdas.

INSERTANDO FILA:

Posicionar el cursor, donde desea insertar la fila.



Clic en la opción Insertar Fila (Se insertara hacia arriba).



INSERTANDO COLUMNA:

Posicionar el cursor, donde desea insertar la columna.



Clic en la opción Insertar Fila (Se insertara hacia la izquierda).

PRACTICA 12:

PRACTICA 13:



CREANDO ALBUM DE FOTOS:

Clic en el menú Comandos.

Clic en la opción Crear álbum de fotos Web…

En el campo Titulo del álbum de fotos, ingresar el nombre a dicho álbum.

En el campo Carpeta origen, clic en el botón Examinar para seleccionar la carpeta de las

imágenes.

En el campo Carpeta destino, clic en el botón Examinar para seleccionar la carpeta donde se

va a almacenar.


Posiblemente cargara el Fireworks, para la detectar las imágenes a importar.

Aparecerá una ventana de advertencia, que significara que tu álbum de fotos, ya esta creado.


Nota: se va a crear 4 objetos, en la carpeta destino:

El archivo de la página web, donde se va a observar el álbum de fotos.

Una carpeta llamada Images, donde va a almacenar las imágenes

Una carpeta llamada pages, donde va a almacenar las paginas webs de cada foto.

Una carpeta llamada thumbnails, donde se va a almacenar las imágenes en tamaño

reducido.

PRACTICA 14 (PARA LA CASA):

Conseguir de cualquier medio 20 fotos (unidad de almacenamiento, hi5, cámara digital,

etc.).

Luego crear en su casa o en un cibercafé, un álbum de fotos, con la aprendido en clase.



1º Página

2º Página

3º Página

INSERTANDO BOTON FLASH:


Seleccionar la opción Media.

Clic en la opción Botón Flash.

En la ventana que aparece, elegir el estilo (diseño) del botón flash.

Ingresar el nombre del botón, en el campo texto del botón.


INSERTAR UN MARCO A LA PAGINA WEB:

En la barra Insertar, hacer clic en la ficha Diseño.

Clic en la flecha hacia abajo del botón Marco.

Elegir el modelo de marco predeterminado, que se desee o se pida.

Se mostrara una ventana, para poder ingresarle el nombre, dicha ventana deberá cancelarla,

para luego ubicar los nombres manualmente.

Al guardar, tendrá que guardar individualmente cada marco, que esta representado por una

pagina Web.



MOSTRANDO BORDES DE MARCO (MODO DISEÑO):

Clic en el menú Ver.

Clic en la opción Ayudas visuales.

Clic en la opción Bordes de Marco.

INGRESANDO NOMBRE A LOS MARCOS:

Clic en el menú Ventana.

Clic en la opción Marco.

En dicho panel, se mostrara una vista previa de

nuestros marcos, deberá hacer clic en un marco.

En la barra de propiedades, cambiar el nombre,

en el campo Nombre de marco.

Presionar la tecla Enter.

Y así sucesivamente con los demás marcos.

Nota: Al primer marco, no se le puede ingresar un

nombre.

GUARDANDO MARCOS O FRAMES:

Crear el marco correspondiente.

Ingresar los nombres correspondientes a cada marco, en el panel de Marco.


Clic en la opción Guardar marco.

Aparecerá la ventana de Guardar como, guardarlo como Frame01.

En la carpeta: FRAME01.

Clic en el menú archivo.

Clic en la opción Guardar todo.

Aparecerá de nuevo la ventana de Guardar como, guardar el primer marco, con Frame02,

luego correlativamente.

CREANDO BOTONES FLASH DENTRO DE UN MARCO O FRAME:

Crear el marco correspondiente.



Posicionarse en el marco, donde estará el botón o botones.



Clic en la opción Botón Flash.

En la ventana que aparece, ingresar el nombre.

Darle el formato que usted desee.

En el campo destino, ya no aparecerá 4 opciones, el caso será que se aumentara los nombres

de los marcos, para que lo usted elija donde se debe visualizar.


INSERTANDO TEXTO FLASH:

Posicionar el cursor, donde se desea ingresar el texto flash.



Clic en la opción Texto flash.

En el campo Texto, ingresar el texto que se va a mostrar.

Ingresar el color inicial y luego el color de sustitución.

Dar los cambios, que usted desee o se le pida.




INSERTANDO UNA IMAGEN DE SUSTITUCION:

Posicionar el cursor, donde se desea ingresar la imagen de sustitución.


Seleccionar la opción Objetos de imagen.

Clic en la opción Imagen de sustitución.

En el campo Nombre de la imagen, por defecto se ingresa ese nombre.

Clic en el botón Examinar, para buscar la Imagen original.


Clic en el botón Examinar, para buscar la Imagen de sustitución.


Si se desea se puede ingresar un texto alternativo y un hipervínculo.


PRACTICA 15:

Crear una pagina web nueva.

Clic en la pestaña Diseño, ubicado en la parte superior.

Clic en la opción Marco.

Clic en la opción Marco izquierdo, aparecerá una ventana.


Establecer los parámetros del borde del marco.



Ahora deberá ingresar un nombre al área del marco.


Clic en la opción Marcos, aparecerá un panel llamado marcos.

Clic en el marco llamado leftframe.

En el nombre del marco, cambiarlo por MENU.

Igual para el marco llamado mainframe.

Cambiarlo por CONTENIDO.


Clic en la opción Guardar Todo, aparecerá una ventana llamada Guardar Como.

Ingresarle el nombre: Pagina01.


Aparecerá de nuevo la ventana, ingresar el nombre a la página: Pagina02.


Aparecerá de nuevo la ventana, ingresar el nombre a la página: Pagina03.

Modificar la forma de las páginas.

En el área de pagina02.

Deberá crear el contenido y guardarlo con un nombre.



Luego guardar de nuevo el área de pagina02, con su mismo contenido, para que pueda

aparecer el contenido.

El contenido del proyecto, será el siguiente:



PRACTICA 16:

FIN 02

¿QUE ES UNA BASE DE DATOS?

Una base de datos o banco de datos (abreviada con la sigla BD) es un conjunto de datos

pertenecientes a un mismo contexto y almacenados sistemáticamente para su posterior uso.

En este sentido, una biblioteca puede considerarse una base de datos compuesta en su mayoría

por documentos y textos impresos en papel e indexados para su consulta.

En la actualidad, y debido al desarrollo tecnológico de campos como la informática y la

electrónica, la mayoría de las bases de datos están en formato digital (electrónico), que ofrece

un amplio rango de soluciones al problema de almacenar datos.

http://es.wikipedia.org/wiki/Inform%C3%A1tica

http://es.wikipedia.org/wiki/Electr%C3%B3nica



¿QUE ES MICROSOFT ACCESS?

Microsoft Access es un programa, utilizado en los sistemas operativos Microsoft Windows,

para la gestión de bases de datos creado y modificado por Microsoft y orientado a ser usado en

entornos personales o en pequeñas organizaciones.

CREANDO UNA BASE DE DATOS EN ACCESS:

Ingresar a Microsoft Access.

Crear una base de datos, para este caso, tendrá que seleccionar el lugar donde se va a guardar

y el nombre de la base de datos.

CREANDO TABLAS EN ACCESS:

Ingresar a Microsoft Access.

Ingresar a su base de datos llamada agenda.

Crear las siguientes tablas: AMIGOS y TELEFONOS.

Clic en la cinta de opciones llamada Crear.

Clic en la opción Tabla.

Clic en Vista Diseño.

Le aparecerá una ventana, para guardar la tabla.

Ingresar el nombre: AMIGOS.

Crear los siguientes campos.

Con sus respetivos tipos de datos.

http://es.wikipedia.org/wiki/Microsoft_Windows

http://es.wikipedia.org/wiki/Base_de_datos



Para guardar los cambios, presionar CTRL + W.

Le aparecerá una ventana, clic en Si, para guardar los cambios.

Igual realizarlo para la tabla: TELEFONOS.

Luego agregar su contenido:

¿QUE ES XAMPP?

Es un servidor independiente de plataforma, software libre, que consiste

principalmente en la base de datos MySQL, el servidor web Apache y los

intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del

acrónimo de X (para cualquiera de los diferentes sistemas operativos), Apache,

MySQL, PHP, Perl.

INGRESANDO A XAMPP:

http://es.wikipedia.org/wiki/Servidor

http://es.wikipedia.org/wiki/Plataforma

http://es.wikipedia.org/wiki/Software_libre

http://es.wikipedia.org/wiki/MySQL

http://es.wikipedia.org/wiki/Servidor_HTTP_Apache

http://es.wikipedia.org/wiki/PHP

http://es.wikipedia.org/wiki/Perl



Ingresar a un navegador web.

Ingresar la dirección web llamada: localhost o 127.0.0.1.

Clic en el vínculo llamado Español.

Se mostrara la siguiente ventana web.

Clic en el vinculo phpMyAdmin.

Se mostrara la siguiente ventana con su panel de control.

Recuerda: para que pueda salir esta ventana o aplicación web, deberá estar instalado el

Xampp 1.7.3 (recomendable) o superior.



CREANDO UNA BASE DE DATOS EN PHPMYADMIN:


En crear una base de datos, ingresar el nombre agenda.

Clic en el botón Crear.

SQL:

CREATE DATABASE agenda;

ELIMINANDO UNA BASE DE DATOS EN PHPMYADMIN:

Abrir la base de datos.

Clic en la pestaña o etiqueta Eliminar, se mostrara una ventana.

Clic en el botón Aceptar, para la eliminación.

SQL:

DROP DATABASE AGENDA;

CREANDO UNA TABLA EN PHPMYADMIN:


Ingresar a la base de datos.

Ingresar el nombre de la tabla.

Ingresar los números de los campos de la tabla.

Clic en el botón Continuar.



Ingresar los campos siguientes.

Clic en el botón Continuar, para generarlo.

Clic en el botón Grabar.

Código SQL:

SQL:

CREATE TABLE AGENDA.ALUMNOS (

Id_alumno decimal not null,

Nombres varchar(30) not null,

Apellidos varchar (30) not null,

Direccion varchar (30) not null,

Telefono varchar (30) not null

) ENGINE = MYISAM;

Establecer el campo Id_alumno, como clave primaria.

Código SQL:

SQL:

ALTER TABLE ALUMNOS ADD PRIMARY KEY (Id_alumno)

También crear la tabla Telefono.

Con lo siguientes campos siguientes:

Código SQL:

SQL:

CREATE TABLE agenda.telefono (

Nombre varchar (30) not null,

TelefonoCasa varchar (7) not null,

Movil varchar (9) not null

) ENGINE = MYISAM;

Nota: el símbolo apostrofe es con el código ASCII. ALT + 39.



ELIMINANDO UNA TABLA EN PHPMYADMIN:


Seleccionar o activar el check de tabla a borrar.

En el campo borrar, clic en objeto: Eliminar.

SQL:

DROP TABLE TELEFONO;

COMO INSERTAR UN REGISTRO EN UNA TABLA EN PHPMYADMIN:


Ingresar a la base de datos.

Ingresar a la tabla.

Clic en el vinculo Insertar.


Se mostrara el código SQL.

SQL:

INSERT INTO AGENDA.ALUMNOS (

Id_alumno,

Nombres,

Apellidos,

Direccion,

Telefono

)

values (



'1', 'Gerardo Javier', 'Montes Cardenas', 'Av. Mexico 557',

'6464987'

)

ELIMINANDO UN REGISTRO DE UNA TABLA EN PHPMYADMIN:


Seleccionar la tabla, que contiene el registro a eliminar.

Seleccionar el registro que se desea eliminar.

Clic en la pestaña o etiqueta Eliminar, se mostrara una ventana.

Clic en el botón Aceptar, para eliminar el registro.

SQL:

DELETE FROM AGENDA.ALUMNOS WHERE CONCAT(alumnos.Id_alumno)='1' AND

alumnos.Nombres = 'Gerardo Javier' AND alumnos.Apellidos = 'Montes Cardenas' AND

alumnos.Direccion = 'Av. Mexico 557' AND alumnos.Telefono = '6464987' LIMIT 1

ELIMINANDO TODOS LOS REGISTROS DE UNA TABLA EN PHPMYADMIN:


Seleccionar la tabla, que contiene el registro a eliminar.

Clic en la pestaña o etiqueta Vaciar, se mostrara una ventana.

Clic en el botón Aceptar, para eliminar todos los registros.

SQL:

TRUNCATE TABLE ALUMNOS;



EDITANDO UN REGISTRO DE UNA TABLA EN PHPMYADMIN:


Seleccionar la tabla, que contiene el registro a editar.

Clic en el objeto: editar.

Se mostrara la siguiente ventana para actualizar los datos.

Modificar los datos del registro.


DONDE SE ALMACENA LAS BASE DE DATOS EN EL XAMPP:

Ingresar a mi PC o Equipo.

Doble clic en la unidad C:\

Doble clic en la carpeta o directorio Xampp.

Doble clic en la carpeta MySql.

Doble clic en la carpeta Data.

Hay se creara un directorio con el mismo nombre de la base de datos.

ACTIVAR/DESACTIVAR EL PANEL BASE DE DATOS:

Ingresar a Adobe Dreamweaver CS3.


Clic en la opción Base de datos, se activa el panel al lado derecho.



CREAR UN SITIO WEB:

Clic en el menú Sitio.

Clic en la opción Administrar Sitios.

Clic en el botón Nuevo.

Clic en la opción Sitio, aparecerá una ventana.

Clic en etiqueta Avanzadas.

En datos locales, ingresar el nombre del sitio: phpapache.

Carpeta Raíz local, seleccionar la siguiente ruta: C:\xampp\htdocs\

En dirección HTTP, dejarlo por defecto: http://localhost/

En datos remotos, en la lista Acceso, elegir la opción: Local/Red.

En carpeta remota, seleccionar la siguiente ruta: C:\xampp\htdocs\dw_db\

Claro esta deberá crear la carpeta DW_DB.

Activar el check Mantener información de sincronización.

Cargar archivos en el servidor automáticamente al guardar.

En servidor de prueba, en modelo de servidor, elegir la opción: PHP MySQL.

En acceso elegir la opción Local/Red.

En la carpeta del servidor, elegir la ruta: C:\xampp\htdocs\dw_db\

En el prefijo de URL, dejarlo por defecto: http://localhost/


Clic en el botón Listo.

Aparecerá el siguiente listado activado.

http://localhost/



Clic en el vinculo tipo de documento.

Elegir la opción PHP.


Se mostrara el siguiente listado:

CREANDO UNA CONEXIÓN DE BASE DE DATOS MYSQL A DREAMWEAVER:

Ingresar al sitio web, ya creado.


Clic en la opción Base de datos.

Clic en el botón +.

Clic en la opción Conexión MySQL, se mostrara una ventana, donde deberá ingresar los

siguientes datos.

Ingresar el nombre de la conexión, puede ser cualquier nombre.

Ingresar el servidor MySQL, en este caso llamado: localhost.



En el nombre de usuario, ingresar la palabra root.

En la contraseña, dejarlo en blanco.

En la base de datos, buscar la base de datos agenda.

Clic en el botón Prueba, te va a comentar que no se ingreso

una contraseña.


Clic de nuevo en el botón Prueba.

Se mostrara un mensaje, que la conexión fue satisfactoria.

Se mostrara la siguiente conexión:

CREANDO UN JUEGO DE REGISTROS EN DREAMWEAVER:

Ingresar al sitio web, ya creado.

Tener la conexión ya creada y establecida.


Seleccionar la opción Objetos de datos.

Clic en la opción Juego de

Registros.

Ingresar los valores que se

muestran a continuación.



Clic en el botón Prueba, para visualizar los datos de la tabla: Alumno.


Se mostrara el juego de registro, con los campos de dicha tabla.


Seleccionar la opción Objetos de datos.

Seleccionar la opción Datos dinámicos.

Clic en la opción Tabla dinámica.

Se mostrara una ventana, para visualizar los registros.



Presionar CTRL + S, para guardar la pagina web en PHP.

Ahora ingresar al navegador web y ingresar la siguiente dirección web.

http://localhost/dw_db/prueba.php

O sino presione la tecla F12, estando en el Adobe Dreamweaver CS3.

Nota: recuerda antes de hacer la creación de la tabla dinámica, guardar tu archivo PHP.


FIN 03

ADOBE DREAMWEAVER CS3 - … · Crear una lista no ordenada, con 5 nombres de cantantes. ......

Documents

Transcript of ADOBE DREAMWEAVER CS3 - … · Crear una lista no ordenada, con 5 nombres de cantantes. ......