Dreamweaver 8 Taller Mofonguero Por: Juan C. Peña Martínez
Bienvenida • Bienvenidos al primer Taller de Dreamweaver 8 a darse por este servidor (Juan C. Peña) • Espero que les sea de provecho y que aprendamos mucho juntos.
¿Qué es mofonguero? • Mofonguero = Derivado de el proceso culinario de crear Mofongo. Aplica a la persona que tiene el poder y potestad de aplastar plátanos en el pilón. Implica una posición de poder o superioridad. – Antónimo = Mofongueado receptor de presión aplastante. Posición de derrota o incapacidad de poder hacer algo.
Listado de materiales • Disco USB portátil o disco para salvaguardar su información. • Tema de la página. • Texto del contenido de la página. • Imágenes para la misma.
Contenido • • • • • • •
¿Que es Dreamweaver? ¿Que es HTML? ¿Para que sirve? ¿Que es WYSIWYG? ¿Cómo comienzo? Ejemplo de Flujograma Interfase (Básica) de Dreamweaver – – – –
Editor de texto (HTML- intro. básico) Editor visual (¿cómo lo hago por aquí?) Links, botones, texto interactivo y otras chulerías Frames y su función en la página
¿Que es Dreamweaver? • En esencia Dreamweaver es un editor gráfico de HTML que permite al usuario ver y editar páginas de Web de tipo WYSIWYG. • Fue creado por la compañía Macromedia, los creadores de productos como Flash, Director y otros. Recientemente Adobe, los creadores de Photoshop adquirieron Macromedia.
¿Qué es HTML? • HTML son las siglas para HyperText Markup Language. • En computación, hipertexto es un paradigma en la interfaz del usuario cuyo fin es el de presentar documentos que puedan, según la definición de Ted Nelson, "bifurcarse o ejecutarse cuando sea solicitado" (branch or perform on request).
¿Qué es HTML? • • • •
Suena increíblemente aburrido, ¿no? La pregunta clave es… ¿De que me sirve toda esa información? El HTML es el lenguaje utilizado para hacer lo que todos conocemos como páginas de Internet. (Entre otras cosas)
¿Para qué sirve? • Dreamweaver nos permite generar HTML de manera “Fácil” y eficiente. • Crear páginas de Web. • Editar texto, imágenes, layout en páginas de Internet. • Cuando menciono Internet me refiero a solo una de sus capacidades el programa tiene otras aplicaciones posibles.
¿Qué es WYSIWYG? • WYSIWYG son siglas que representan “What you see is what you get” • Esto aplicado a el editor como Dreamweaver significa que el trabajo que se haga en el programa se verá en el “browser” como se ve en el editor.
¿Cómo comienzo? • Instalar Dreamweaver. • Instalar Photoshop Elements. (o un faxímil razonable) • Tener una idea de que quiero hacer. – Tema de la página – Contenido textual – Contenido visual (imágenes) – Contenido avanzado (video, sonido, flash) – Mapa de navegación o flujo-grama
¿Cómo comienzo? (preguntas) • Tema de la página = – ¿De que quiero que trate mi página? – ¿Cuál va a ser el tema principal? – ¿Qué vertientes tiene y si las quiero incluir?
• Contenido textual = – ¿Qué quiero decir en mi página? – ¿Cómo quiero decirlo? – Tener el contenido ya escrito y corregido de ser posible ANTES de colocarlo en la página.
¿Cómo comienzo? (preguntas) • Contenido visual (imágenes)= – Imágenes que serán estéticas y complementan el contenido. – ¿Qué formato de imagen debo utilizar? • Gif – Formato de compresión de imágenes. – Utiliza 256 colores o menos y puede hacer transparencia. – Este formato es muy utilizado en diseño de páginas por sus capacidades. (transparencia, animación sencilla)
• Jpg – Formato de compresión de imágenes – Utiliza miles de colores – Tiende a crear deformaciones leves pero es el mejor para fotos en el Web.
• Existen otros pero estos ya mencionados son los comunes.
¿Cómo comienzo? (preguntas) • Contenido avanzado (sonido, video, flash)= – ¿Cuál de los formatos de sonido debo utilizar? • Los formatos común mente utilizados son – WAV, MIDI, MPG, MP3… – Wav se utiliza para sonidos sencillos ya que de ser muy elaborado tiende a ocupar mucho espacio. – Midi se utilizaba para composiciones musicales que tienen la posibilidad de ser editadas e importada en equipos de música como pianos electrónicos y otros. – Estos formatos han sido casi sustituidos por el MPG y MP3 ya que estos permiten mayor calidad de sonido sin ocupar mucho espacio.
¿Cómo comienzo? (preguntas) – ¿Qué formato de video debo utiizar? • ¡¡FLASH!! – ¿Por qué tanto enfasis en Flash? » Flash (SWF= Shock-Wave Flash) es un formato creado por macromedia que se ha vuelto el estándar de los diseños interactivos en Web. » Este formato permite hacer animaciones, incluir texto, video, sonido, música, imágenes y demás sin ocupar el espacio que usualmente estos elementos ocuparían por separado. » HAY páginas completamente hechas en flash o con muchos elementos de flash.(modalidad utilizada comúnmente estos días)(No, no tengo acciones con macromedia.)
• Otros formatos como Quicktime(Mov), Windows Video (WMV o AVI) son utilizados también y recientemente MPG, MPG4, DivX y otros se han unido a la interminable lista de fromatos.
¿Cómo comienzo? (preguntas) • Mapa de navegación o flujograma= – ¿Con que se come eso? – ¿Para que me sirve? • Un mapa de navegación nos sirve de referencia para la creación de la página, nos permite planificar de antemano como el usuario se mueve a través de nuestra pagina.
– ¿Por qué hacer uno? • El hacer uno nos permite planificar nuestro trabajo y organizar el proceso de generar los elementos y las paginas. • Nos permite llevar un record de cómo se debe ver la pagina y que sección se conecta con que antes de comenzar, lo cual nos permite no perdernos si estamos siguiendo el mapa.
Ejemplos de Flujograma Inicio
Inicio
(portada)
Menú Pag 1
Pag 2
Menú Pagina1
Pag 3
pagina1a Pag 1a Pag 1b
Pag 2a
Pag 3a
pagina1b
Pag 3b
Pagina2 pagina2a
De vuelta a inicio
Pagina3 Programa común
Página básica Pagina4
¡Ahora Si! ¡Dreamweaver! • Bienvenidos al maravilloso mundo de Dreamweaver 8 • Luego de haberlo instalado (demo) hace varios “slides” atrás debería correr el programa. • Una ves corra el programa y este abra comenzaremos nuestra presentación formal de la interfase para que se familiarice. • Al correr el programa por primera ves el mismo le preguntará que rol usted tendrá… para efectos de esta presentación escoja “Designer”.
Dreamweaver: Interfase Barra de menĂş
Dreamweaver: Interfase MenĂş utilitario( este menĂş es cambiante)
Dreamweaver: Interfase Documento que tiene activo
Dreamweaver: Interfase Editor de texto HTML
Dreamweaver: Interfase “Layout� de pantalla y funciones comunes del editor
Dreamweaver: Interfase Otras funciones prรกcticas del editor de HTML
¡Ahora Si! ¡Dreamweaver! • Interfase
Editor visual : “Preview” de cómo se ve la página.
Dreamweaver: Interfase
Propiedades del elemento activo aquĂ puede ver que cambios sencillos se le pueden hacer al elemento que tiene activo en el momento.
Dreamweaver: Interfase “Tabs� de Funciones adicionales y controles de algunos elementos un tanto mas complejos.
Dreamweaver: Interfase
Insert Table
Nota: Algunos elementos de la interfase no se ven hasta que el objeto sea seleccionado o se activen los mismos según sea necesario para el usuario. Nota: Al colocar el cursor sobre algunos de los elementos le aparecerá una notita informativa de que es el elemento que esta seleccionando. Esto puede ser muy útil y ayuda a explorar la interfase sin necesidad de mucha explicación.
Dreamweaver: Interfase
Los elementos de edición de texto son estandarizados para dar un sentido de familiaridad sobretodo en elementos de edición de texto que tienen un “look” similar al de Word.
Dreamweaver: Interfase Dreamweaver automáticamente genera el código necesario al crear un documento nuevo. el que no tiene experiencia en HTML puede de manera “sencilla” hacer su pagina en el editor visual y el programa le generará el código básico necesario.
Le recomiendo que si no sabe lo que es no lo borre. El lenguaje HTML es bien preciso y estructurado un error puede causar elementos extraños y situaciones aún mas extrañas.
Dreamweaver: Interfase El darle “right-click” al espacio vacío dentro del editor visual le aparecerá un menú de opciones esto le será especialmente útil mientras usted trabaja.
Si escoge propiedades verá las propiedades de su pagina y podrá editarlas.
Dreamweaver: Interfase Aquí puede manejar la apariencia y detalles de su pagina. Desde el color de fondo, el título, el espacio del margen, el color del texto y otras muchas opciones. También puede poner una imagen de fondo a su página
Dreamweaver: Interfase Common (elementos mas comunes) Image table layer horizontal line Character (caracteres especiales) Line break Space Forms (formas) field checkbox button list box
Estos son los “tools” comunes que permiten al usuario crear mediante unos clics elementos en la pagina de web utilizando Dreamweaver. Note que están divididos por clasificaciones.
Dreamweaver: ¡Creemos algo! • Cree un documento nuevo (o utilice el que le genera Dreamweaver al comenzar) • Tenga claro como va a organizar su pagina. • En un USB o en algún disco haga los siguientes Folders. • Página (por favor póngale un titulo corto) – Imágenes – Flash (opcional) – Sonidos (Midi, Wav, MP3 … esto también es opcional)
Dreamweaver: ¡Creemos algo! • Salve el primer documento que hizo en dreamweaver como – index.html o index.htm ¿Por qué? – los browsers de Internet identifican index.html como la pagina inicial de cualquier pagina de web de manera que cuando uno escribe www.ragevortex.com por ejemplo, el browser va a esa dirección y busca primero ese documento.
Dreamweaver: ¡Creemos algo! • Este documento es el que estaremos trabajando como portada o pagina de inicio. • Coloque en el editor visual una tabla y con los elementos de propiedades centralícela. • Dentro de esta tabla estaremos trabajando su portada. Las tablas permiten más control sobre el texto que tiene y las imágenes. Es uno de los elementos más versátiles y utilizados de
Dreamweaver: ¡Creemos algo! • ¿Cómo hacer un link? – Para hacer un link debe tener un documento a donde apunta ese link. – Creemos otro documento en blanco por ahora y llámelo pagina1.html o .htm si prefieren… en mi caso mi índice es siempre .html y mis paginas interiores son htm. Probablemente sean manías mías. – Ok, ahora asumiendo que ese documento lo tenga salvado podemos continuar con el link.
Dreamweaver: ¡Creemos algo! – Los links meramente hacen lo que la palabra infiere… crean un vínculo entre el botón o texto que se esta utilizando como link y el documento o sección del documento a la que se refiere. – ¡SI! Se pueden hacer Links para secciones dentro de un mismo documento… esto es particularmente útil en documentos extremadamente largos.
Dreamweaver: ¡Creemos algo! • Añadir una imagen. • Añadir texto… se supone que tengan texto que añadir. • Modificar propiedades del texto y de la página según su preferencia. • Recuerde que los buenos contrastes permiten mejor legibilidad.
Dreamweaver: ¡Creemos algo! • Creación de un botón regular. – Un botón regular no es mas nada que una imagen que parezca o se utilice como botón y tenga un link a algún lado.
• Creación de un botón con rollover. – Un rollover button es lo mismo pero con otra imagen de igual tamaño y apariencia pero con colores diferentes para dar impresión de que el mismo es presionado o encendido.
Dreamweaver: Guías a seguir. • Guías a seguir cuando cree una pagina. – Trate de mantener el control y el orden • • • • •
Cada cosa en su lugar. Cada lugar especificado. Cada documento limpio de código innecesario. Revisión de links para que no se rompan. El tema de la pagina o sección debe ser específico y no desviarse. • Colores contrastantes pero llamativos y placenteros. Es difícil leer si me cegó con colores exagerados.
Otros términos… • Frames (encuadres) – Utilizado comúnmente este sistema permite cargar varias páginas a la vez en una sola pantaya para dar la impresión de ser una página compleja.
• Iframes (frames inclusivos) – Código especial que permite cargar una página dentro de una tabla. Este en especial es uno de los métodos avanzados más útiles.
• Layers (capas) – Permiten hacer efectos, animaciones, cubrir objetos con otros y otras funciones interesantes. Son un tanto inestables e imprecisas.
Dreamweaver: ¿huh? • Preguntas, dudas, sugerencias e incoherencias.
โ ข Gracias por su atenciรณn.