Arte textil: Tejidos artesanos en la frontera hispano-lusa
Introducción al XHTML
1. Diseño para la Red
Introducción al XHTML
Lic. en Diseño de Información Visual.
Otoño 2009.
Universidad de las Américas Puebla.
Mtro. Omar Sosa Tzec
http://www.tzek-design.com/blog
5. <html>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
</body>
</html>
6. <html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
</body>
</html>
7. <html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
</body>
</html>
8. <html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. </p>
</body>
</html>
9. <html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. </p>
<p><b><i>Saludos</i></b></p>
</body>
</html>
10. <html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
</body>
</html>
11. <html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
</body>
</html>
12. <html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
13. etiqueta (tag/markups)
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
14. una etiqueta par
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
15. una etiqueta sencilla
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
16. el encabezado
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
17. el cuerpo
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
18. encabezados (headings)
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
19. párrafos
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
20. ancla (anchor)
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
21. ¿Cómo funciona en general un lenguaje
de marcado (markup language)?
¿Qué es XML?
26. Tipos de DTD para XHTML:
Estricto (strict)
Transicional (transitional)
Para marcos (frameset)
27. XHTML con ejemplos.
Ann Navarro. documento
Pretince Hall 2001.
¿tiéne marcos?
no sí
¿usa marcas de
xhtml 1.0 framset
presentación?
no sí
xhtml 1.0 strict ¿Todas las marcas de presentación
están en una hoja de estilo?
no sí
xhtml 1.0 transitional xhtml 1.0 strict
28. estricto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
29. transicional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
30. para marcos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
32. xmlns
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
34. xml:lang y lang
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang= "en">
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
35. ¿Cómo está guardado el xhtml como
documento?
¿Qué caracteres deben emplearse?
Es decir, ¿cuál es su codificación?
36. Unicode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
37. Occidental - Europeo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1"/>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
38. Occidental - Europeo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta porque
tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
<p><b><i>Saludos</i></b></p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>
53. * Recolectar feeds de diseño que nos ayuden en la materia y para tener
en general.
http://el50.com/2008/01/11/top-50-blogs-de-diseno-en-espanol/
http://nfgraphics.com/top-100-blogs-de-diseno-en-espanol/
http://alquimistas.evilnolo.com/
http://blog.duopixel.com/
http://www.udla-diseno.com/category/blogs/
http://psd.tutsplus.com/
http://css-tricks.com/
http://net.tutsplus.com/
http://www.disenorama.com/
http://veerle.duoh.com/