Adobe Dreamweaver CS4
Marlon Ceballos Adobe Cer.fied Instructor
CERTIFIED INSTRUCTOR
Design Master CS4
AUTHORIZED
Training Center
Qué es HTML?
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• HTML
AUTHORIZED
Training Center
• HTML – HyperText Markup Languaje
AUTHORIZED
Training Center
• HTML – HyperText Markup Languaje – Desarrollado en los 90’s
AUTHORIZED
Training Center
• HTML – HyperText Markup Languaje – Desarrollado en los 90’s – Basado en SGML
AUTHORIZED
Training Center
• HTML – HyperText Markup Languaje – Desarrollado en los 90’s – Basado en SGML – Gráficos, sonidos,videos: desorden, inconsistencia
AUTHORIZED
Training Center
• HTML – HyperText Markup Languaje – Desarrollado en los 90’s – Basado en SGML – Gráficos, sonidos,videos: desorden, inconsistencia – Necesidad de estandarización
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Qué es XHTML?
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• XHTML
AUTHORIZED
Training Center
• XHTML – eXtensible HyperText Markup Languaje
AUTHORIZED
Training Center
• XHTML – eXtensible HyperText Markup Languaje – Basado en XML
AUTHORIZED
Training Center
• XHTML – eXtensible HyperText Markup Languaje – Basado en XML – Es un HTML con reglas estrictas
AUTHORIZED
Training Center
• XHTML – eXtensible HyperText Markup Languaje – Basado en XML – Es un HTML con reglas estrictas – Tags con significado lógico
AUTHORIZED
Training Center
• XHTML – eXtensible HyperText Markup Languaje – Basado en XML – Es un HTML con reglas estrictas – Tags con significado lógico – Versiones:
AUTHORIZED
Training Center
• XHTML – eXtensible HyperText Markup Languaje – Basado en XML – Es un HTML con reglas estrictas – Tags con significado lógico – Versiones: • Strict
AUTHORIZED
Training Center
• XHTML – eXtensible HyperText Markup Languaje – Basado en XML – Es un HTML con reglas estrictas – Tags con significado lógico – Versiones: • Strict • Transi.onal AUTHORIZED
Training Center
• XHTML – eXtensible HyperText Markup Languaje – Basado en XML – Es un HTML con reglas estrictas – Tags con significado lógico – Versiones: • Strict • Transi.onal • Frameset AUTHORIZED
Training Center
AUTHORIZED
Training Center
Por qué usar XHTML?
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Mo.vos
AUTHORIZED
Training Center
• Mo.vos – HTML con.ene tags no estandarizados
AUTHORIZED
Training Center
• Mo.vos – HTML con.ene tags no estandarizados – XHTML requiere un uso estricto
AUTHORIZED
Training Center
• Mo.vos – HTML con.ene tags no estandarizados – XHTML requiere un uso estricto – Estricto = menos variación entre navegadores (mayor consistencia) y entre diferentes disposi.vos
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Versiones
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• HTML 4.01
AUTHORIZED
Training Center
• HTML 4.01 – Versión de HTML desde 1999
AUTHORIZED
Training Center
• HTML 4.01 – Versión de HTML desde 1999
• XHTML 1.0
AUTHORIZED
Training Center
• HTML 4.01 – Versión de HTML desde 1999
• XHTML 1.0 – Basado en HTML 4.01
AUTHORIZED
Training Center
• HTML 4.01 – Versión de HTML desde 1999
• XHTML 1.0 – Basado en HTML 4.01
• XHTML 1.1
AUTHORIZED
Training Center
• HTML 4.01 – Versión de HTML desde 1999
• XHTML 1.0 – Basado en HTML 4.01
• XHTML 1.1 – Versión muy estricta
AUTHORIZED
Training Center
• HTML 4.01 – Versión de HTML desde 1999
• XHTML 1.0 – Basado en HTML 4.01
• XHTML 1.1 – Versión muy estricta – Requiere que todo la presentación se haga con CSS
AUTHORIZED
Training Center
• HTML 4.01 – Versión de HTML desde 1999
• XHTML 1.0 – Basado en HTML 4.01
• XHTML 1.1 – Versión muy estricta – Requiere que todo la presentación se haga con CSS – No es soportado por todos los navegadores AUTHORIZED
Training Center
AUTHORIZED
Training Center
• XHTML 2.0
AUTHORIZED
Training Center
• XHTML 2.0 – Actualización mayor del HTML sin compa.bilidad con versiones anteriores
AUTHORIZED
Training Center
• XHTML 2.0 – Actualización mayor del HTML sin compa.bilidad con versiones anteriores – Proyecto abandonado en 2006
AUTHORIZED
Training Center
• XHTML 2.0 – Actualización mayor del HTML sin compa.bilidad con versiones anteriores – Proyecto abandonado en 2006
• HTML 5
AUTHORIZED
Training Center
• XHTML 2.0 – Actualización mayor del HTML sin compa.bilidad con versiones anteriores – Proyecto abandonado en 2006
• HTML 5 – Retoma la idea del XHTML 2.0
AUTHORIZED
Training Center
• XHTML 2.0 – Actualización mayor del HTML sin compa.bilidad con versiones anteriores – Proyecto abandonado en 2006
• HTML 5 – Retoma la idea del XHTML 2.0 – Es compa.ble con versiones anteriores
AUTHORIZED
Training Center
• XHTML 2.0 – Actualización mayor del HTML sin compa.bilidad con versiones anteriores – Proyecto abandonado en 2006
• HTML 5 – Retoma la idea del XHTML 2.0 – Es compa.ble con versiones anteriores – Muchas más funcionalidades AUTHORIZED
Training Center
AUTHORIZED
Training Center
Qué version usar?
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• XHTML 1.0 (recomendado actualmente)
AUTHORIZED
Training Center
• XHTML 1.0 (recomendado actualmente) – Si.os web funcionales, compa.bles y estandarizados
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Qué es un si.o web?
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Si.o web
AUTHORIZED
Training Center
• Si.o web – Colección de archivos y carpetas.
AUTHORIZED
Training Center
• Si.o web – Colección de archivos y carpetas. – Los archivos se relacionan mediante hyperlinks.
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Página Index
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• index
AUTHORIZED
Training Center
• index – Página por defecto en cada carpeta de un si.o web (incluyendo el root).
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Estructura de una página web
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Otros términos para tener en cuenta:
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• CSS (Cascade Style Sheets)
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• JavaScript
AUTHORIZED
Training Center
• JavaScript – Lenguaje script para agregar interac.vidad y funcionalidad a las páginas web
AUTHORIZED
Training Center
• JavaScript – Lenguaje script para agregar interac.vidad y funcionalidad a las páginas web – Creado el 1995 por Netscape
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Ajax (Asynchronous JavaScript And XML)
AUTHORIZED
Training Center
• Ajax (Asynchronous JavaScript And XML) – Técnica de desarrollo web para crear aplicaciones interac.vas o RIA (Rich Internet Applica.ons).
AUTHORIZED
Training Center
• Ajax (Asynchronous JavaScript And XML) – Técnica de desarrollo web para crear aplicaciones interac.vas o RIA (Rich Internet Applica.ons). – Con Ajax es posible realizar cambios sobre las páginas sin necesidad de recargarlas.
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Spry
AUTHORIZED
Training Center
• Spry – Libraria JavaScript que permite usar de forma rápida y fácil funcionalidades de Ajax.
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Cómo nombrar archivos para web?
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Recomendaciones:
AUTHORIZED
Training Center
• Recomendaciones: – No usar espacios. Usar guiones o underscores
AUTHORIZED
Training Center
• Recomendaciones: – No usar espacios. Usar guiones o underscores – Usa nombres costos pero descrip.vos
AUTHORIZED
Training Center
• Recomendaciones: – No usar espacios. Usar guiones o underscores – Usa nombres costos pero descrip.vos – No usar caracteres especiales
AUTHORIZED
Training Center
• Recomendaciones: – No usar espacios. Usar guiones o underscores – Usa nombres costos pero descrip.vos – No usar caracteres especiales – Usar caracteres en minúsculas
AUTHORIZED
Training Center
• Recomendaciones: – No usar espacios. Usar guiones o underscores – Usa nombres costos pero descrip.vos – No usar caracteres especiales – Usar caracteres en minúsculas – Usar extensión .htm o .html de manera consistente en todo el si.o web
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Estructura XHTML
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Estructura consistente
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Conceptos básicos CSS
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Es3lo:
AUTHORIZED
Training Center
• Es3lo: – Es una colección de atributos de formato que se pueden aplicar a un elemento de una página web
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Hoja de es3lo (style sheet):
AUTHORIZED
Training Center
• Hoja de es3lo (style sheet): – Es una colección es.los que pueden ser usados en una o varias páginas de un si.o web
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Dónde de ubicar los es3los?
AUTHORIZED
Training Center
• Dónde de ubicar los es3los? – Archivo externo .css (recomendado)
AUTHORIZED
Training Center
• Dónde de ubicar los es3los? – Archivo externo .css (recomendado) – Incrustar el es.lo en la página web
AUTHORIZED
Training Center
• Dónde de ubicar los es3los? – Archivo externo .css (recomendado) – Incrustar el es.lo en la página web • sobre-‐escribe el anterior
AUTHORIZED
Training Center
• Dónde de ubicar los es3los? – Archivo externo .css (recomendado) – Incrustar el es.lo en la página web • sobre-‐escribe el anterior
– Inline (poco recomendado)
AUTHORIZED
Training Center
• Dónde de ubicar los es3los? – Archivo externo .css (recomendado) – Incrustar el es.lo en la página web • sobre-‐escribe el anterior
– Inline (poco recomendado) • sobre-‐escribe los anteriores
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Tipos de selectores
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Element selectors
AUTHORIZED
Training Center
• Element selectors – Permite modificar los elementos basados en un tag (p, H1, ul, etc)
AUTHORIZED
Training Center
• Element selectors – Permite modificar los elementos basados en un tag (p, H1, ul, etc) – Se aplican de forma automá.ca
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Class selectors
AUTHORIZED
Training Center
• Class selectors – Similar a es.los de párrafo o caracter de programas de diseño
AUTHORIZED
Training Center
• Class selectors – Similar a es.los de párrafo o caracter de programas de diseño – Se pueden usar las veces que sean necesarias
AUTHORIZED
Training Center
• Class selectors – Similar a es.los de párrafo o caracter de programas de diseño – Se pueden usar las veces que sean necesarias – Se puede usar cualquier nombre
AUTHORIZED
Training Center
• Class selectors – Similar a es.los de párrafo o caracter de programas de diseño – Se pueden usar las veces que sean necesarias – Se puede usar cualquier nombre – Deben aplicarse de forma manual
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• ID selectors
AUTHORIZED
Training Center
• ID selectors – Se pueden usar una sola vez en una página web
AUTHORIZED
Training Center
• ID selectors – Se pueden usar una sola vez en una página web – Suelen representar áreas de contenido
AUTHORIZED
Training Center
• ID selectors – Se pueden usar una sola vez en una página web – Suelen representar áreas de contenido – Sobre escribe Class selectors si están en conflicto
AUTHORIZED
Training Center
AUTHORIZED
Training Center
• Descended selectors
AUTHORIZED
Training Center
• Descended selectors – Dentro de Dreamweaver son llamados Compound selectors
AUTHORIZED
Training Center
• Descended selectors – Dentro de Dreamweaver son llamados Compound selectors – Son selectors más específicos
AUTHORIZED
Training Center
AUTHORIZED
Training Center
Formularios
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center
AUTHORIZED
Training Center