SlideShare a Scribd company logo

XHTMLy CSS 4a Edicion

Taller impartido en la Asociación de Webmasters de Málaga en 2010

1 of 59
Download to read offline
XHTML + CSS

      Raúl Jiménez Ortega -
rjimenez@webmastersmalaga.com
Programa
Entrega de documentación y presentación.
Introducción Histórica
Accesibilidad
XHTML 1.0

1er descanso

Amaya
Ejercicio

2º descanso

CSS
Firebug y validaciones
Presentación

      Asociación de Webmasters de Málaga




           http://www.webmastersmalaga.com
Objetivos del taller

 ● Dar una visión global de cómo se crea una página web
   estática.
 ● Adquirir aptitudes para evaluar la calidad de una web.
 ● Conocer las herramientas de validación de estándares.
 ● Justificar la necesidad de usar estándares de accesibilidad.
 ● Aprender mediante la práctica a crear una página web
   estática básica.
 ● Un repaso a algunas herramientas de depuración.
Qué no vamos a ver en el taller

  Al tener tan poco tiempo hay cosas que no podremos ver:

   ● No estudiaremos en profundidad XHTML ni CSS.

   ● No estudiaremos usabilidad ni posicionamiento.

   ● No aprenderemos a publicar una página web.
Introducción Histórica

More Related Content

What's hot

HTML5 la revolución!
HTML5 la revolución!HTML5 la revolución!
HTML5 la revolución!maspixel
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notasSandra Meza
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Gonzalo C.
 
Taller de Maquetación Web
Taller de Maquetación WebTaller de Maquetación Web
Taller de Maquetación WebBruno Garcia
 
Python en la Web Semántica
Python en la Web SemánticaPython en la Web Semántica
Python en la Web SemánticaSantiago Coffey
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRvalgreens
 
HTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyHTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyFRONTDAYS
 
XUL – Interfaces Gráficas de Usuários (GUI) com Tecnologia XML.
XUL – Interfaces Gráficas de Usuários (GUI) com Tecnologia XML.XUL – Interfaces Gráficas de Usuários (GUI) com Tecnologia XML.
XUL – Interfaces Gráficas de Usuários (GUI) com Tecnologia XML.elliando dias
 
HTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYHTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYJuan Eladio Sánchez Rosas
 

What's hot (19)

Html
HtmlHtml
Html
 
Ria 03-html5-css3
Ria 03-html5-css3Ria 03-html5-css3
Ria 03-html5-css3
 
Maquetación web con html5
Maquetación web con html5Maquetación web con html5
Maquetación web con html5
 
HTML5 la revolución!
HTML5 la revolución!HTML5 la revolución!
HTML5 la revolución!
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
 
Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1
 
Taller de Maquetación Web
Taller de Maquetación WebTaller de Maquetación Web
Taller de Maquetación Web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Espacios de nombres en XML
Espacios de nombres en XMLEspacios de nombres en XML
Espacios de nombres en XML
 
Python en la Web Semántica
Python en la Web SemánticaPython en la Web Semántica
Python en la Web Semántica
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
 
Diseño web
Diseño webDiseño web
Diseño web
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGR
 
HTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyHTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoy
 
XUL – Interfaces Gráficas de Usuários (GUI) com Tecnologia XML.
XUL – Interfaces Gráficas de Usuários (GUI) com Tecnologia XML.XUL – Interfaces Gráficas de Usuários (GUI) com Tecnologia XML.
XUL – Interfaces Gráficas de Usuários (GUI) com Tecnologia XML.
 
HTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYHTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOY
 
HTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas SemanticasHTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas Semanticas
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 

Viewers also liked

Viewers also liked (11)

Qué es CSS y con qué se come?
Qué es CSS y con qué se come?Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Presentación CSS
Presentación CSSPresentación CSS
Presentación CSS
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
Creación y tratamiento de imágenes digitales: ficheros bitmap
Creación y tratamiento de imágenes digitales: ficheros bitmapCreación y tratamiento de imágenes digitales: ficheros bitmap
Creación y tratamiento de imágenes digitales: ficheros bitmap
 
Css Introducción
Css IntroducciónCss Introducción
Css Introducción
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
 
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSQue es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
 
Diapositivas css
Diapositivas cssDiapositivas css
Diapositivas css
 
Elementos de html5 y css3
Elementos de html5 y css3Elementos de html5 y css3
Elementos de html5 y css3
 
Resolución y lineatura
Resolución y lineaturaResolución y lineatura
Resolución y lineatura
 

Similar to XHTMLy CSS 4a Edicion

Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2Tomi Mirra
 
Introducción a xhtml
Introducción a xhtmlIntroducción a xhtml
Introducción a xhtmlDenisse C
 
4 Guia Xhtm Lv2.1
4   Guia Xhtm Lv2.14   Guia Xhtm Lv2.1
4 Guia Xhtm Lv2.1Ergoclicks
 
Introduccion a HTML - XHTML clase 04
Introduccion a HTML - XHTML clase 04Introduccion a HTML - XHTML clase 04
Introduccion a HTML - XHTML clase 04Héctor Estigarribia
 
Barcelona Workshop 2008
Barcelona Workshop 2008Barcelona Workshop 2008
Barcelona Workshop 2008Mitusin
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 24000859
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 24000859
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 24000859
 
UDA-Componentes RUP. Migas
UDA-Componentes RUP. MigasUDA-Componentes RUP. Migas
UDA-Componentes RUP. MigasAnder Martinez
 
Hipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta aHipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta anoelia alarcon
 
Estandarización de paginas web
Estandarización de paginas webEstandarización de paginas web
Estandarización de paginas webLuis Álamo
 
Analisis seo.ppt2
Analisis seo.ppt2Analisis seo.ppt2
Analisis seo.ppt2Maribel_kar
 
Guía básica para pegarle al xhtml (Primera parte)
Guía básica para pegarle al xhtml (Primera parte)Guía básica para pegarle al xhtml (Primera parte)
Guía básica para pegarle al xhtml (Primera parte)Carlos Caicedo
 

Similar to XHTMLy CSS 4a Edicion (20)

XHTML
XHTMLXHTML
XHTML
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Introducción a xhtml
Introducción a xhtmlIntroducción a xhtml
Introducción a xhtml
 
Curso de diseño CSS
Curso de diseño CSSCurso de diseño CSS
Curso de diseño CSS
 
Introducción a la Web Semántica
Introducción a la Web SemánticaIntroducción a la Web Semántica
Introducción a la Web Semántica
 
2_3_Estructura_del_documento.pdf
2_3_Estructura_del_documento.pdf2_3_Estructura_del_documento.pdf
2_3_Estructura_del_documento.pdf
 
4 Guia Xhtm Lv2.1
4   Guia Xhtm Lv2.14   Guia Xhtm Lv2.1
4 Guia Xhtm Lv2.1
 
La Web Semantica
La Web SemanticaLa Web Semantica
La Web Semantica
 
Introduccion a HTML - XHTML clase 04
Introduccion a HTML - XHTML clase 04Introduccion a HTML - XHTML clase 04
Introduccion a HTML - XHTML clase 04
 
Barcelona Workshop 2008
Barcelona Workshop 2008Barcelona Workshop 2008
Barcelona Workshop 2008
 
Analisis seo
Analisis seoAnalisis seo
Analisis seo
 
Apuntes de HTML
Apuntes de HTMLApuntes de HTML
Apuntes de HTML
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
UDA-Componentes RUP. Migas
UDA-Componentes RUP. MigasUDA-Componentes RUP. Migas
UDA-Componentes RUP. Migas
 
Hipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta aHipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta a
 
Estandarización de paginas web
Estandarización de paginas webEstandarización de paginas web
Estandarización de paginas web
 
Analisis seo.ppt2
Analisis seo.ppt2Analisis seo.ppt2
Analisis seo.ppt2
 
Guía básica para pegarle al xhtml (Primera parte)
Guía básica para pegarle al xhtml (Primera parte)Guía básica para pegarle al xhtml (Primera parte)
Guía básica para pegarle al xhtml (Primera parte)
 

More from Raúl Jiménez Ortega

Herramientas para la optimización, un enfoque práctico
Herramientas para la optimización, un enfoque prácticoHerramientas para la optimización, un enfoque práctico
Herramientas para la optimización, un enfoque prácticoRaúl Jiménez Ortega
 
Certificado del curso de Gamification
Certificado del curso de GamificationCertificado del curso de Gamification
Certificado del curso de GamificationRaúl Jiménez Ortega
 
Investigación de mercados - Lavanderías en aeropuertos
Investigación de mercados - Lavanderías en aeropuertosInvestigación de mercados - Lavanderías en aeropuertos
Investigación de mercados - Lavanderías en aeropuertosRaúl Jiménez Ortega
 
Investigación de Mercados - Caso L'Oréal
Investigación de Mercados - Caso L'OréalInvestigación de Mercados - Caso L'Oréal
Investigación de Mercados - Caso L'OréalRaúl Jiménez Ortega
 
Investigación de mercados - Creación de logo
Investigación de mercados - Creación de logoInvestigación de mercados - Creación de logo
Investigación de mercados - Creación de logoRaúl Jiménez Ortega
 
Sencha touch - Proceso básico de desarrollo
Sencha touch - Proceso básico de desarrolloSencha touch - Proceso básico de desarrollo
Sencha touch - Proceso básico de desarrolloRaúl Jiménez Ortega
 
Facilitando el desarrollo web móvil, frameworks nr sevilla
Facilitando el desarrollo web móvil, frameworks   nr sevillaFacilitando el desarrollo web móvil, frameworks   nr sevilla
Facilitando el desarrollo web móvil, frameworks nr sevillaRaúl Jiménez Ortega
 
Leccion 7 podcasting visto desde el lado del productor
Leccion 7   podcasting visto desde el lado del productorLeccion 7   podcasting visto desde el lado del productor
Leccion 7 podcasting visto desde el lado del productorRaúl Jiménez Ortega
 
Leccion 8 como montar nuestro propio servidor profesional de streaming bajo ...
Leccion 8  como montar nuestro propio servidor profesional de streaming bajo ...Leccion 8  como montar nuestro propio servidor profesional de streaming bajo ...
Leccion 8 como montar nuestro propio servidor profesional de streaming bajo ...Raúl Jiménez Ortega
 
Leccion 9 utilizando servicios gratuitos pero privativos para difundir nuest...
Leccion 9  utilizando servicios gratuitos pero privativos para difundir nuest...Leccion 9  utilizando servicios gratuitos pero privativos para difundir nuest...
Leccion 9 utilizando servicios gratuitos pero privativos para difundir nuest...Raúl Jiménez Ortega
 
Leccion 6: Podcasting visto desde el lado del consumidor
Leccion 6: Podcasting visto desde el lado del consumidorLeccion 6: Podcasting visto desde el lado del consumidor
Leccion 6: Podcasting visto desde el lado del consumidorRaúl Jiménez Ortega
 
Como ha influido el software libre en el desarrollo de Internet
Como ha influido el software libre en el desarrollo de InternetComo ha influido el software libre en el desarrollo de Internet
Como ha influido el software libre en el desarrollo de InternetRaúl Jiménez Ortega
 
Leccion 2 - ¿Dónde nos encontramos?, usos del streaming
Leccion 2 - ¿Dónde nos encontramos?, usos del streamingLeccion 2 - ¿Dónde nos encontramos?, usos del streaming
Leccion 2 - ¿Dónde nos encontramos?, usos del streamingRaúl Jiménez Ortega
 
Leccion 5 - Empieza una nueva era de navegadores web
Leccion 5 - Empieza una nueva era de navegadores webLeccion 5 - Empieza una nueva era de navegadores web
Leccion 5 - Empieza una nueva era de navegadores webRaúl Jiménez Ortega
 

More from Raúl Jiménez Ortega (20)

Herramientas para la optimización, un enfoque práctico
Herramientas para la optimización, un enfoque prácticoHerramientas para la optimización, un enfoque práctico
Herramientas para la optimización, un enfoque práctico
 
Introducción a Scrum - OSL y AWGR
Introducción a Scrum - OSL y AWGRIntroducción a Scrum - OSL y AWGR
Introducción a Scrum - OSL y AWGR
 
Certificado del curso de Gamification
Certificado del curso de GamificationCertificado del curso de Gamification
Certificado del curso de Gamification
 
Investigación de mercados - Lavanderías en aeropuertos
Investigación de mercados - Lavanderías en aeropuertosInvestigación de mercados - Lavanderías en aeropuertos
Investigación de mercados - Lavanderías en aeropuertos
 
Investigación de Mercados - Caso L'Oréal
Investigación de Mercados - Caso L'OréalInvestigación de Mercados - Caso L'Oréal
Investigación de Mercados - Caso L'Oréal
 
Pedro el soñador
Pedro el soñadorPedro el soñador
Pedro el soñador
 
Investigación de mercados - Creación de logo
Investigación de mercados - Creación de logoInvestigación de mercados - Creación de logo
Investigación de mercados - Creación de logo
 
Mercados Emergentes
Mercados EmergentesMercados Emergentes
Mercados Emergentes
 
Emprender
EmprenderEmprender
Emprender
 
Experiencia de usuario
Experiencia de usuarioExperiencia de usuario
Experiencia de usuario
 
Sencha touch - Proceso básico de desarrollo
Sencha touch - Proceso básico de desarrolloSencha touch - Proceso básico de desarrollo
Sencha touch - Proceso básico de desarrollo
 
Facilitando el desarrollo web móvil, frameworks nr sevilla
Facilitando el desarrollo web móvil, frameworks   nr sevillaFacilitando el desarrollo web móvil, frameworks   nr sevilla
Facilitando el desarrollo web móvil, frameworks nr sevilla
 
Ponencia sobre creatividad
Ponencia sobre creatividadPonencia sobre creatividad
Ponencia sobre creatividad
 
Leccion 7 podcasting visto desde el lado del productor
Leccion 7   podcasting visto desde el lado del productorLeccion 7   podcasting visto desde el lado del productor
Leccion 7 podcasting visto desde el lado del productor
 
Leccion 8 como montar nuestro propio servidor profesional de streaming bajo ...
Leccion 8  como montar nuestro propio servidor profesional de streaming bajo ...Leccion 8  como montar nuestro propio servidor profesional de streaming bajo ...
Leccion 8 como montar nuestro propio servidor profesional de streaming bajo ...
 
Leccion 9 utilizando servicios gratuitos pero privativos para difundir nuest...
Leccion 9  utilizando servicios gratuitos pero privativos para difundir nuest...Leccion 9  utilizando servicios gratuitos pero privativos para difundir nuest...
Leccion 9 utilizando servicios gratuitos pero privativos para difundir nuest...
 
Leccion 6: Podcasting visto desde el lado del consumidor
Leccion 6: Podcasting visto desde el lado del consumidorLeccion 6: Podcasting visto desde el lado del consumidor
Leccion 6: Podcasting visto desde el lado del consumidor
 
Como ha influido el software libre en el desarrollo de Internet
Como ha influido el software libre en el desarrollo de InternetComo ha influido el software libre en el desarrollo de Internet
Como ha influido el software libre en el desarrollo de Internet
 
Leccion 2 - ¿Dónde nos encontramos?, usos del streaming
Leccion 2 - ¿Dónde nos encontramos?, usos del streamingLeccion 2 - ¿Dónde nos encontramos?, usos del streaming
Leccion 2 - ¿Dónde nos encontramos?, usos del streaming
 
Leccion 5 - Empieza una nueva era de navegadores web
Leccion 5 - Empieza una nueva era de navegadores webLeccion 5 - Empieza una nueva era de navegadores web
Leccion 5 - Empieza una nueva era de navegadores web
 

Recently uploaded

UNIDAD 1 EA 2 TICS VIRTUAL 2 SEMESTRE UQ
UNIDAD 1 EA 2 TICS VIRTUAL 2 SEMESTRE UQUNIDAD 1 EA 2 TICS VIRTUAL 2 SEMESTRE UQ
UNIDAD 1 EA 2 TICS VIRTUAL 2 SEMESTRE UQJAVIERMAURICIOCORREA1
 
PMD 🔰🚸🎴 PROYECTO MULTIGRADO IV DE LA CMU. PLANEACION SEMANA 23 y 24 🔰🚸🎴 DEL...
PMD 🔰🚸🎴  PROYECTO MULTIGRADO IV DE LA CMU. PLANEACION  SEMANA 23 y 24 🔰🚸🎴 DEL...PMD 🔰🚸🎴  PROYECTO MULTIGRADO IV DE LA CMU. PLANEACION  SEMANA 23 y 24 🔰🚸🎴 DEL...
PMD 🔰🚸🎴 PROYECTO MULTIGRADO IV DE LA CMU. PLANEACION SEMANA 23 y 24 🔰🚸🎴 DEL...jaimexooc
 
LOS NÚMEROS Y EL ECLIPSE SEGURO. Cuento literario escrito y diseñado por JAVI...
LOS NÚMEROS Y EL ECLIPSE SEGURO. Cuento literario escrito y diseñado por JAVI...LOS NÚMEROS Y EL ECLIPSE SEGURO. Cuento literario escrito y diseñado por JAVI...
LOS NÚMEROS Y EL ECLIPSE SEGURO. Cuento literario escrito y diseñado por JAVI...JAVIER SOLIS NOYOLA
 
Cambios en los seres vivos , evolución, evidencia.
Cambios en los seres vivos , evolución, evidencia.Cambios en los seres vivos , evolución, evidencia.
Cambios en los seres vivos , evolución, evidencia.CrisEli1
 
OFERTA DE POSTOS ESCOLARES. de ceip docx
OFERTA DE POSTOS ESCOLARES. de ceip docxOFERTA DE POSTOS ESCOLARES. de ceip docx
OFERTA DE POSTOS ESCOLARES. de ceip docxvictorpenha
 
Manejo de Emociones en la Escuela ME2 Ccesa007.pdf
Manejo de Emociones en la Escuela ME2  Ccesa007.pdfManejo de Emociones en la Escuela ME2  Ccesa007.pdf
Manejo de Emociones en la Escuela ME2 Ccesa007.pdfDemetrio Ccesa Rayme
 
OKUDA, arte para niños de educación infantil
OKUDA, arte  para niños de educación infantilOKUDA, arte  para niños de educación infantil
OKUDA, arte para niños de educación infantilM Victoria Azcona
 
la evaluación formativa Diaz Barriga.pdf
la evaluación formativa Diaz Barriga.pdfla evaluación formativa Diaz Barriga.pdf
la evaluación formativa Diaz Barriga.pdfmjvalles74
 
Maikell Victor - Química 2024 - Volume 1
Maikell Victor - Química 2024 - Volume 1Maikell Victor - Química 2024 - Volume 1
Maikell Victor - Química 2024 - Volume 1DevinsideSolutions
 
La ciencia de ganar almas. Vol. 2. Manual de evangelismo | By Pr. Heyssen Cor...
La ciencia de ganar almas. Vol. 2. Manual de evangelismo | By Pr. Heyssen Cor...La ciencia de ganar almas. Vol. 2. Manual de evangelismo | By Pr. Heyssen Cor...
La ciencia de ganar almas. Vol. 2. Manual de evangelismo | By Pr. Heyssen Cor...Heyssen Cordero Maraví
 
marco conceptual lectura pisa 2018_29nov17.pdf
marco conceptual lectura pisa 2018_29nov17.pdfmarco conceptual lectura pisa 2018_29nov17.pdf
marco conceptual lectura pisa 2018_29nov17.pdfedugon08
 
Sopa de letras - vocabulario Cuerpo humano.pdf
Sopa de letras - vocabulario Cuerpo humano.pdfSopa de letras - vocabulario Cuerpo humano.pdf
Sopa de letras - vocabulario Cuerpo humano.pdfEspanhol Online
 
Comunidad de aprendizaje virtuales Presentacion Slide Share.
Comunidad de aprendizaje virtuales Presentacion Slide Share.Comunidad de aprendizaje virtuales Presentacion Slide Share.
Comunidad de aprendizaje virtuales Presentacion Slide Share.NoelyLopez1
 
Diapositivas abarcando el tema del citosol
Diapositivas abarcando el tema del citosolDiapositivas abarcando el tema del citosol
Diapositivas abarcando el tema del citosolchacaguasaydayana284
 
Letra A a - Máximo Aprende.doc .Actividades para niños de primer grado
Letra A a  -  Máximo Aprende.doc  .Actividades para niños de  primer gradoLetra A a  -  Máximo Aprende.doc  .Actividades para niños de  primer grado
Letra A a - Máximo Aprende.doc .Actividades para niños de primer gradoADELINA GALÁN C.
 
PRESENTACION DE CURSO DE ALINEACION EN EL ESTANDAR EC0435
PRESENTACION DE CURSO DE ALINEACION EN EL ESTANDAR EC0435PRESENTACION DE CURSO DE ALINEACION EN EL ESTANDAR EC0435
PRESENTACION DE CURSO DE ALINEACION EN EL ESTANDAR EC0435LICMURO
 

Recently uploaded (20)

UNIDAD 1 EA 2 TICS VIRTUAL 2 SEMESTRE UQ
UNIDAD 1 EA 2 TICS VIRTUAL 2 SEMESTRE UQUNIDAD 1 EA 2 TICS VIRTUAL 2 SEMESTRE UQ
UNIDAD 1 EA 2 TICS VIRTUAL 2 SEMESTRE UQ
 
PMD 🔰🚸🎴 PROYECTO MULTIGRADO IV DE LA CMU. PLANEACION SEMANA 23 y 24 🔰🚸🎴 DEL...
PMD 🔰🚸🎴  PROYECTO MULTIGRADO IV DE LA CMU. PLANEACION  SEMANA 23 y 24 🔰🚸🎴 DEL...PMD 🔰🚸🎴  PROYECTO MULTIGRADO IV DE LA CMU. PLANEACION  SEMANA 23 y 24 🔰🚸🎴 DEL...
PMD 🔰🚸🎴 PROYECTO MULTIGRADO IV DE LA CMU. PLANEACION SEMANA 23 y 24 🔰🚸🎴 DEL...
 
LOS NÚMEROS Y EL ECLIPSE SEGURO. Cuento literario escrito y diseñado por JAVI...
LOS NÚMEROS Y EL ECLIPSE SEGURO. Cuento literario escrito y diseñado por JAVI...LOS NÚMEROS Y EL ECLIPSE SEGURO. Cuento literario escrito y diseñado por JAVI...
LOS NÚMEROS Y EL ECLIPSE SEGURO. Cuento literario escrito y diseñado por JAVI...
 
Cambios en los seres vivos , evolución, evidencia.
Cambios en los seres vivos , evolución, evidencia.Cambios en los seres vivos , evolución, evidencia.
Cambios en los seres vivos , evolución, evidencia.
 
OFERTA DE POSTOS ESCOLARES. de ceip docx
OFERTA DE POSTOS ESCOLARES. de ceip docxOFERTA DE POSTOS ESCOLARES. de ceip docx
OFERTA DE POSTOS ESCOLARES. de ceip docx
 
Bendito el que viene en el nombre del Señor
Bendito el que viene en el nombre del SeñorBendito el que viene en el nombre del Señor
Bendito el que viene en el nombre del Señor
 
Manejo de Emociones en la Escuela ME2 Ccesa007.pdf
Manejo de Emociones en la Escuela ME2  Ccesa007.pdfManejo de Emociones en la Escuela ME2  Ccesa007.pdf
Manejo de Emociones en la Escuela ME2 Ccesa007.pdf
 
OKUDA, arte para niños de educación infantil
OKUDA, arte  para niños de educación infantilOKUDA, arte  para niños de educación infantil
OKUDA, arte para niños de educación infantil
 
la evaluación formativa Diaz Barriga.pdf
la evaluación formativa Diaz Barriga.pdfla evaluación formativa Diaz Barriga.pdf
la evaluación formativa Diaz Barriga.pdf
 
de la informacion al conocimiento 01.pdf
de la informacion al conocimiento 01.pdfde la informacion al conocimiento 01.pdf
de la informacion al conocimiento 01.pdf
 
Maikell Victor - Química 2024 - Volume 1
Maikell Victor - Química 2024 - Volume 1Maikell Victor - Química 2024 - Volume 1
Maikell Victor - Química 2024 - Volume 1
 
La ciencia de ganar almas. Vol. 2. Manual de evangelismo | By Pr. Heyssen Cor...
La ciencia de ganar almas. Vol. 2. Manual de evangelismo | By Pr. Heyssen Cor...La ciencia de ganar almas. Vol. 2. Manual de evangelismo | By Pr. Heyssen Cor...
La ciencia de ganar almas. Vol. 2. Manual de evangelismo | By Pr. Heyssen Cor...
 
marco conceptual lectura pisa 2018_29nov17.pdf
marco conceptual lectura pisa 2018_29nov17.pdfmarco conceptual lectura pisa 2018_29nov17.pdf
marco conceptual lectura pisa 2018_29nov17.pdf
 
DIANTE DE TI, BOA MÃE! _
DIANTE DE TI, BOA MÃE!                  _DIANTE DE TI, BOA MÃE!                  _
DIANTE DE TI, BOA MÃE! _
 
Sopa de letras - vocabulario Cuerpo humano.pdf
Sopa de letras - vocabulario Cuerpo humano.pdfSopa de letras - vocabulario Cuerpo humano.pdf
Sopa de letras - vocabulario Cuerpo humano.pdf
 
Comunidad de aprendizaje virtuales Presentacion Slide Share.
Comunidad de aprendizaje virtuales Presentacion Slide Share.Comunidad de aprendizaje virtuales Presentacion Slide Share.
Comunidad de aprendizaje virtuales Presentacion Slide Share.
 
Diapositivas abarcando el tema del citosol
Diapositivas abarcando el tema del citosolDiapositivas abarcando el tema del citosol
Diapositivas abarcando el tema del citosol
 
Dificultad de la escritura alfabética- Estrategia Pukllaspa yachasun - Curo F...
Dificultad de la escritura alfabética- Estrategia Pukllaspa yachasun - Curo F...Dificultad de la escritura alfabética- Estrategia Pukllaspa yachasun - Curo F...
Dificultad de la escritura alfabética- Estrategia Pukllaspa yachasun - Curo F...
 
Letra A a - Máximo Aprende.doc .Actividades para niños de primer grado
Letra A a  -  Máximo Aprende.doc  .Actividades para niños de  primer gradoLetra A a  -  Máximo Aprende.doc  .Actividades para niños de  primer grado
Letra A a - Máximo Aprende.doc .Actividades para niños de primer grado
 
PRESENTACION DE CURSO DE ALINEACION EN EL ESTANDAR EC0435
PRESENTACION DE CURSO DE ALINEACION EN EL ESTANDAR EC0435PRESENTACION DE CURSO DE ALINEACION EN EL ESTANDAR EC0435
PRESENTACION DE CURSO DE ALINEACION EN EL ESTANDAR EC0435
 

XHTMLy CSS 4a Edicion

  • 1. XHTML + CSS Raúl Jiménez Ortega - rjimenez@webmastersmalaga.com
  • 2. Programa Entrega de documentación y presentación. Introducción Histórica Accesibilidad XHTML 1.0 1er descanso Amaya Ejercicio 2º descanso CSS Firebug y validaciones
  • 3. Presentación Asociación de Webmasters de Málaga http://www.webmastersmalaga.com
  • 4. Objetivos del taller ● Dar una visión global de cómo se crea una página web estática. ● Adquirir aptitudes para evaluar la calidad de una web. ● Conocer las herramientas de validación de estándares. ● Justificar la necesidad de usar estándares de accesibilidad. ● Aprender mediante la práctica a crear una página web estática básica. ● Un repaso a algunas herramientas de depuración.
  • 5. Qué no vamos a ver en el taller Al tener tan poco tiempo hay cosas que no podremos ver: ● No estudiaremos en profundidad XHTML ni CSS. ● No estudiaremos usabilidad ni posicionamiento. ● No aprenderemos a publicar una página web.
  • 7. ¿Qué es XHTML y para qué se usa? eXtensible HiperText Markup Language Lenguaje extensible de marcado de hipertexto Se usa para estructurar los contenidos de los documentos de hipertexto. Hipertexto: texto que se muestra en un computador y que se caracteriza por tener enlaces a otros textos. La popularidad de estos lenguajes (HTML/XHTML/SGML,...)se debe al amplio uso que tiene en Internet.
  • 8. Introdución histórica Standard Generalized Markup Language (1986 ISO normaliza) World Wide Web Consortium (W3C) HTML 3.2 - W3C, 14/01/1997 HTML 4.01 W3C, 24/12/1999 XHTML 1.0 - W3C, 26/01/2000 XML 1.0 - W3C, 26/11/2008 XML 1.1 - W3C, 16/08/2006
  • 9. XHTML ó HTML 4.0 HTML 4.01 XHTML 1.0 <img alt="Portrait Murakami Haruki" <img alt="Portrait Murakami Haruki" src="/images/murakami.jpg"> src="/images/murakami.jpg" /> <p lang="fr"> <p xml:lang="fr"> Je levai la tête pour regarder Je levai la tête pour regarder les étoiles. Leur vue apaisa les étoiles. Leur vue apaisa peu à peu les battements de peu à peu les battements de mon coeur. mon coeur. </p> </p> <p> <p> <cite class="title"> <cite class="title"> Chroniques de l'oiseau à Chroniques de l'oiseau à ressort ressort </cite> </cite> - <cite class="author"> - <cite class="author"> Haruki Murakami Haruki Murakami </cite> </cite> </p> </p>
  • 10. XHTML - HTML 4.0 Hay 3 tipos de documentos (DOCTYPE): Strict: Separa completamente el contenido de la presentación. No permite usar elementos desaprobados. Transitional: Permite el uso de elementos desaprobados. Frameset: Permite usar elementos desaprobados como los marcos (frames e iframes).
  • 11. Accesibilidad ¿Qué es?, ¿por qué? y ¿en que consiste?
  • 12. Accesibilidad - ¿Qué es? No es más que una serie de pautas y recomendaciones que han sido creadas para garantizar el acceso a la información. Estas facilitan la navegación a: ● Personas: con algún tipo de discapacidad: visual, auditiva, cognitiva, ... ● Navegadores: al usar un lenguaje universal. ● Buscadores: al estar bien estructurado facilita la búsqueda de información.
  • 13. Accesibilidad - No es un capricho Las Naciones Unidas en la declaración sobre los Derechos de las Personas con Discapacidad (2006) reconoció que la Accesibilidad es un derecho humano básico. En España por la ley 34/2002 de 11 de Julio de Servicios de la Sociedad de la Información y Comercio Electrónico establece que las Administraciones públicas tienen que adoptar las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada. Leyes vigentes: http://www.sidar.org/recur/direc/legis/espa.php
  • 14. Accesibilidad - Pautas 1. Proporcione alternativas equivalentes para el contenido visual y auditivo. 2. No se base sólo en el color. 3. Identifique el idioma usado. 4. Diseñe con indepencia del dispositivo. 5. Utilice tecnologías y pautas w3c. 6. Proporcione mecanismos claros de navegación. 7. Asegúrese de que los documentos sean claros y simples. 8. Etc.
  • 15. Accesibilidad - Técnicas 1. Evite contenidos que se muevan y/o parpadeen. No actualice o redireccione las páginas sin autorización del usuario. 2. Si incrusta alguna aplicación en la página asegúrese de que también es accesible. 3. Realice soluciones compatibles con navegadores antiguos. 4. Evite utilizar elementes desaconsejados por w3c. Si es imposible crear una página accesible, cree una alternativa que si lo sea. 5. Cree un estilo coherente, simple y claro para todas las páginas de su web. 6. Etc.
  • 16. XHTML 1.0 Conceptos y reglas básicas
  • 17. Conceptos básicos Etiquetas: La etiquetas son palabras reservadas que se encierran entre los símbolos "<" y ">" y que tienen un significado semántico. Ejemplos de etiquetas pueden ser: ● <br/> - salto de linea. ● <p> ... </p>- párrafo. Pero además algunas etiquetas pueden tener atributos, especiales, por ejemplo: <a href="curriculum_vitae.html">Enlace a mi CV</a>
  • 18. Conceptos básicos (II) Las etiquetas pueden aparecer individualmente o en parejas. Por ejemplo para enmarcar un texto dentro de un párrafo usamos: <p>Aquí dentro iría el párrafo.</p> *Estas etiquetas se cierran anteponiendo el símbolo "/" al nombre de la etiqueta. Y por ejemplo así se insertaría una imagen: <img src="mi_foto.jpg" alt="Foto de Raúl comiendo pipas" />
  • 19. Conceptos básicos (III) ● Los elementos de un documento XHTML usan una estructura de árbol. ● No se puede cerrar una etiqueta si la anterior no se ha cerrado. Ejemplo: Incorrecto: <p><strong>Texto en negrita</p></strong> Correcto: <p><strong>Texto en negrita</strong></p>
  • 20. Conceptos básicos (III) ● Los elementos de un documento XHTML usan una estructura de árbol. ● No se puede cerrar una etiqueta si la anterior no se ha cerrado. Ejemplo: Incorrecto: <p><strong>Texto en negrita</p></strong> Correcto: <p><strong>Texto en negrita</strong></p> Correcto y bonito: <p> <strong>Texto en negrita</strong> </p>
  • 21. Reglas básicas La estructura básica de un documento XHTML es la siguiente: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Nuevo</title> <!-- Información relevante para buscadores y navegadores --> </head> <body> <!-- Aquí introduciremos todo el contenido visible en la página --> </body> </html>
  • 22. Juegos de caracteres O también conocidos como "charsets": ISO 8859-1: lenguas originarias de Europa occidental: alemán, aragonés, asturiano, catalán, danés, escocés, español,etc. ISO 8859-2: lenguas de Europa Oriental. UTF-8: Unicode, es el más usado en Internet. Ejemplo de uso: <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  • 23. Reglas básicas Normas de XHTML: ● El nombre de las etiquetas y los atributos deben ir en minúsculas. ● El valor de los atributos deben ir entre comillas. ● Todas las etiquetas tienen que ser cerradas. ● Los atributos tienen que tener siempre valores.
  • 24. Algunas etiquetas Algunas de las etiquetas más comunes: ● h1, h2, h3 (header): Encabezado de orden 1,2,3... ● p (paragraph): parrafo. ● a: hipervínculo/vínculo/link. ● img (image): imagen. ● strong: enérgico. ● ul (unorder list): lista desordenada. ○ li (list item): elemento de lista.
  • 25. Hipervínculos Algunos atributos que nos van a hacer falta: <a href="http://www.webmastergranada.es">Enlace</a> ● href: Este atributo indica la ruta del enlace al que queremos acceder. Las rutas pueden ser absolutas o relativas: ● Absolutas: hay que indicar la URL completa del destino. Ejemplos: http://miweb.com/foto.jpg, ftp://.... ● Relativas: se busca el destino a partir del directorio en el que se encuentra el fichero. Por ejemplos: fichero.html, directorio/foto.jpg, ../estilo.css.
  • 26. Listas desordenadas e Imagen Ejemplo de lista desordenada: Ejemplo de imágen: Código: Código: <ul> <img src="valor" alt="valor" /> <li>Elemento 1</li> <li>Elemento 2</li> ● src: Indica la ruta donde se ... encuentra la imagen. </ul> ● alt: Es un texto alternativo que Se verá así: se usará para describir el lo ● Elemento 1 que aparece en la imagen. ● Elemento 2
  • 27. Amaya - ¿Qué es? Amaya es un cliente Web que actúa como navegador y como editor. Ha sido diseñado por el W3C y el INRIA con el principal objetivo de demostrar nuevas tecnologías Web y ayudar a los usuarios a producir páginas Web válidas. Ventajas frente a otras alternativas: ● Adobe Dreamweaver ● MS Frontpage ● MS Word Y lo mejor de todo: es libre, gratuito y tiene versiones para Windows, Linux y MacOS. Podéis descarlo en: http://www.w3.org/Amaya
  • 28. Ejercicio Crear una página que contenga los siguientes elementos. ● Encabezado 1 ● Encabezado 2 ● Párrafo con un enlace y un texto enérgico. ● Añadir una imagen ● Encabezado 3 ● Una lista desordenada ● Encabezado 3 ● Y otra lista pero esta vez ordenada. ● Añadir un párrafo con el pie de página (autor, año,...)
  • 32. Introducción ● Todas las páginas mostradas tienen el mismo código HTML. ● Por defecto, el navegador mostraría ésto. ● Esa apariencia se puede mejorar mediante 'hojas de estilo'. ● Otros muchos diseños se pueden encontrar en http: //www.csszengarden.com
  • 33. ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar la presentación de los documentos electrónicos definidos por HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para la creación de páginas webs complejas.
  • 34. Ventajas del CSS La separación de los contenidos y su presentación presenta numerosas ventajas: ● Separación de los contenidos y su presentación. ● Mejora la accesibilidad del documento. ● Reduce la complejidad de su mantenimiento. ● Permite visualizar el mismo documento en infinidad de dispositivos diferentes. ● Facilita la reutilización, la personalización y el mantenimiento
  • 35. ¿Cómo funciona CSS? Tenemos dos opciones para insertar CSS en XHTML. 1.- Archivo externo (que se llama "Hoja de Estilo") y enlazarlo desde nuestro documento XHTML. <link rel="stylesheet" type="text/css" href="estilo.css"/> Ventaja: al modificar una hoja de estilos modificamos el aspecto de los todas las páginas que enlacen esa hoja de estilos.
  • 36. ¿Cómo funciona CSS? (II) Podemos inscrutarlo en el mismo archivo XHTML. <style type="text/css"> <!-- body,td,th { font-family: Arial; font-size: 12px; color: #FFE6F5; } --> </style> Se utiliza para webs poco complejas.
  • 37. ¿Dónde se coloca CSS? CSS se coloca entre las etiquetas <head></head> del documento (X)HTML. (la Cabecera <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" rel="hoja_estilos.css"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplo de Incrustación de CSS</title> </head> <body> </body> </html>
  • 38. Importante ● Una de las características más importantes de los estilos definidos con CSS es que se pueden agrupar en diferentes reglas que se aplican al mismo selector. h1 { color:red; } h1 { font-size: 2em; } h1 (font-family: Verdana; } Esto es igual a la siguiente regla CSS: h1 { color: red; font-size: 2em; font-family: Verdana; }
  • 39. Importante Herencia La herencia de los estilos definidos mediante CSS es uno de los conceptos más característicos de este lenguaje de hojas de estilos. Muchas de las propiedades que se aplican a los elementos, son heredadas por los elementos que se encuentran dentro de esos elementos.
  • 40. Ejemplo de Herencia <html> <head> <title> Ejemplo de herencia de estilos </title> <style type="text/css"> body { font-family: Arial; color: black; } h1 { font-family: Verdana; } p { color: red; } </style > </head> <body> <h1>Titular de la pagina</h1> <p>Un párrafo de texto no muy largo</p> </body> </html>
  • 41. Conceptos básicos Regla: cada uno de los estilos que comprenden una hoja de estilos CSS. Cada regla esta compuesta de "selectores", "llave de apertura" ({), "declaraciones" y "llave de cierre" (}). Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. (h1, h2, h3, body, td, img, p,... ) Declaración: la declaración específica los estilos que se aplicarán a los elementos. ( color : black ) Propiedad: permite modificar el aspecto de una característica del elemento. (font-family, color, margin, padding,...) Valor: indica el nuevo valor de la característica modificada en el elemento. (Arial, black, 20px, 0px,...)
  • 43. Comenzando El color de primer plano La propiedad color hace referencia al foreground color, es decir, el color que está por encima del fondo. body { color: #666; } De esta manera nuestro web tendrá las letras de gris oscuro. El fondo Podemos modificar el fondo de un elemento con la propiedad background, que tiene la siguiente sintaxis: background: #fff; De esta manera el color de fondo será de color blanco.
  • 44. Continuamos Fuente Hay varias propiedades que nos permiten jugar con el aspecto del texto. Antes que nada tenemos que considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Es necesario utilizar fuentes "estándar" que tengan la mayoría de ordenadores. font-family: define las tipografías y su orden de preferencia. font-style: da formato a la tipografía (cursiva, oblicua y normal) font-variant: da formato de versalitas al texto. font-weight: grosor de la letra. font-size: tamaño de la letra. Puede ser en pixeles (px) o puntos (pt). font: nos permite definir simultáneamente más de una propiedad de la fuente. El orden de los valores es importante.
  • 45. Continuamos Texto Para la propiedad texto tenemos: text-align: alineación horizontal del texto respecto un elemento. (left, right, center, justify) text-decoration: define decoraciones de la fuente. (none,blink, line-through, overline, underline). text-transform: define mayusculas/minúsculas. (capitalize, uppercase, lowercase, none) line-height: define el interlineado del texto. Se mide en px. body { text-align: left; text-decoration: underline; }
  • 46. El modelo de caja El "box model" es la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las webs y todos los documentos (X)HTML. Todos los elementos que forman un documento HTML se representan mediante cajas rectangulares, cuyas propiedades define CSS y cuya representación visual controla CSS. Hay dos tipos de cajas: ● Block: rompen el flujo de maquetación (un párrafo). ● Inline: siguen el flujo y estan contenidos dentro de elementos de bloque. (un enlace).
  • 47. El modelo de caja (II) Las propiedades más importantes de una caja son: width (ancho), height (alto), padding (relleno), border (borde) y margin (margen).
  • 48. El modelo de caja (III) Los elementos que forman una caja son (más a menos prioridad): Contenido (content): se trata del componente principal del elemento. Relleno (padding): esta formado por el espacio libre (opcional) entre el contenido y el borde que lo encierra (opcionalmente). Borde (border): línea que encierra completamente el contenido y el relleno. Imagen de fondo (background image): imagen que se muestra por debajo del contenido. Color de fondo (background color): color que rellena el espacio por el contenido y su posible relleno. Margen (margin): espacio libre entre la caja y las demas cajas adyacentes.
  • 49. Anchura ( width ) Width (anchura) Establece la anchura de un elemento y no admite valores negativos. El siguiente ejemplo establece el valor de anchura del <div> lateral: #lateral { width: 200px; } <div id="lateral"> ... </div>
  • 50. Altura ( height ) Height (altura) Establece la altura de un elemento y no admite valores negativos. El siguiente ejemplo establece el valor de la altura del <div> de cabecera: #cabecera { height: 60px; } <div id="cabecera"> .... </div>
  • 51. Margen (margin) CSS define 4 propiedades para controlar cada uno de los margenes horizontales y verticales de un elemento. margin-top: margen superior. margin-right: margen derecho. margin-botton: margen inferior. margin-left: margen izquierdo. # cabecera { margin: 10px 5px 10px 5px; }
  • 52. Relleno ( padding ) Al igual que el margin, el padding también dispone de 4 propiedades para controlar los espacios de relleno horizontales y verticales de un elemento. padding-top: relleno superior. padding-right: relleno derecho. padding-botton: relleno inferior. padding-left: relleno izquierdo. Comparte las mismas características que la propiedad Margin.
  • 53. Clases (.clase) ● Esta orientada para seleccionar elementos concretos de la página. ● Lo que se hace es asignar un atributo class especificos a los elementos que se quieren seleccionar y en la hoja de estilos se utiliza el selector de clase. ● El selector esta formado por un signo de punto (.) y el nombre del atributo class que se quiere seleccionar. .especial { color: red; } Este ejemplo de clase define el color de la fuente de color rojo.
  • 54. ID (#identificador) ● La principal diferencia entre este selector y el selector de clase tiene que ver con HTML y no CSS. ● El atributo "id" debe ser único, de forma que 2 elementos diferentes no pueden tener el mismo valor de ir. ● Comparten las mismas características, salvo por el símbolo que utiliza ( almohadilla # ). #especial { color: red; } <p>Primer párrafo</p> <p id="especial"> Segundo párrafo</p> <p>Tercer párrafo</p>
  • 55. Clases vs ID Por tanto, para aplicar un mismo estilo a un sólo elemento utilizamos el selector de "id" y para varias estilos elementos diferentes el selector de "clase". .importante { color:red; } (Clase) #importante { color:red; } (ID)
  • 56. Ejercicio CSS ● Añadir un color de fondo ● Cambiar el tipo de fuente por defecto, de algún elemento (h1,etc) ● Definir un color para los enlaces ● Definir una decoración para :hover de algún enlace La imaginación al poder
  • 57. Herramientas para la depuración Firebug: https://addons.mozilla.org/es-ES/firefox/addon/1843 Web Developer: https://addons.mozilla.org/es-ES/firefox/addon/60 YSlow (Why slow?): https://addons.mozilla.org/es-ES/firefox/addon/5369 TAW3 (Test de Accesibilidad Web) http://www.tawdis.net Otras: MeasureIt, ColorZilla y WebDeveloper
  • 58. Se nos acabó el tiempo... Si os habéis quedado con alguna duda no os preocupéis, podéis preguntarnos cualquier cosa a través del Campus Virtual de la Asociación de Webmasters: http://webmastergranada.es/formacion/ Y también para profundizar más: http://www.w3schools.com/
  • 59. Esto ha sido todo... ¡¡MUCHAS GRACIAS!!