Taller de Dreamweaver 8

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.


• 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.


• 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.


– ¿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.


• 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

Menú

Pag 1 Pag 2 Pag 3

Pag 1a Pag 1b Pag 2a Pag 3a

Pag 3b

De vuelta a inicio

Inicio(portada)

Menú

Pagina1

pagina1a

pagina1b

Pagina2

pagina2a

Pagina3

Pagina4

Programa común Página básica

¡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ú


Menú utilitario( este menú es cambiante)


Documento que tiene activo


Editor de texto HTML


“Layout” de pantalla y funcionescomunes del editor


Otras funciones prácticas deleditor de HTML

¡Ahora Si! ¡Dreamweaver!

• Interfase

Editor visual : “Preview” de cómose ve la página.


Propiedades del elemento activoaquí puede ver que cambiossencillos se le pueden hacer alelemento que tiene activo en elmomento.


“Tabs” de Funciones adicionales ycontroles de algunos elementosun tanto mas complejos.


Nota: Algunos elementos de lainterfase no se ven hasta que elobjeto sea seleccionado o seactiven los mismos según seanecesario para el usuario.

Nota: Al colocar el cursor sobrealgunos de los elementos le aparecerá una notita informativade que es el elemento que estaseleccionando. Esto puede sermuy útil y ayuda a explorar la interfase sin necesidad de muchaexplicación.

Insert TableInsert Table


Los elementos de edición de textoson estandarizados para dar unsentido de familiaridad sobretodoen elementos de edición de textoque tienen un “look” similaral de Word.


Dreamweaver automáticamentegenera el código necesario alcrear un documento nuevo.el que no tiene experiencia enHTML puede de manera “sencilla”hacer su pagina en el editor visualy el programa le generará el códigobásico necesario.

Le recomiendo que si no sabe lo que esno lo borre. El lenguaje HTML es bienpreciso y estructurado un error puede causar elementos extraños y situacionesaún mas extrañas.


El darle “right-click” al espacio vacío dentro del editor visual leaparecerá un menú de opcionesesto le será especialmente útilmientras usted trabaja.

Si escoge propiedades verá las propiedades de su pagina y podráeditarlas.


Aquí puede manejar la apariencia y detalles de su pagina. Desde elcolor de fondo, el título, el espacio del margen, el color deltexto y otras muchas opciones.También puede poner una imagen de fondo a su página


Estos son los “tools” comunes que permiten al usuario crear mediante unos clics elementosen la pagina de web utilizandoDreamweaver. Note que están divididos por clasificaciones.

Common (elementos mas comunes)Imagetablelayerhorizontal line

Character (caracteres especiales)Line breakSpace

Forms (formas)fieldcheckboxbuttonlist box

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)


• 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.


• 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 HTML.


• ¿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.


– 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.


• 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.


• 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.

Taller de Dreamweaver 8

Documents

Transcript of Taller de Dreamweaver 8