introducción al xhtml
TRANSCRIPT
Diseño para la RedIntroducción al XHTML
Lic. en Diseño de Información Visual.Otoño 2009.
Universidad de las Américas Puebla.
Mtro. Omar Sosa Tzechttp://www.tzek-design.com/blog
Primero hagamos un ejercicio en bloc de notas:
<html>
</html>
<html>
<body>
</body></html>
<html><body>
<h1>Hola Mundo</h1></body>
</html>
<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>
<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>
<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>
<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>
<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>
<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:[email protected]”>mi correo</a>. </p>
</body></html>
<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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p>
</body></html>
<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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
<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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
ancla (anchor)
¿Cómo funciona en general un lenguaje de marcado (markup language)?
¿Qué es XML?
<persona><nombre>fulanito</nombre><id>16041</id><carrera>diseño</carrera>
</persona>
¿Qué es un Document Type Definition o DTD?
¿Por qué XHTML y no HTML?
contenido presentación
Tipos de DTD para XHTML:
Estricto (strict)Transicional (transitional)Para marcos (frameset)
documento
¿tiéne marcos?
¿usa marcas de presentación? xhtml 1.0 framset
xhtml 1.0 strict ¿Todas las marcas de presentación están en una hoja de estilo?
xhtml 1.0 transitional xhtml 1.0 strict
síno
no sí
no sí
XHTML con ejemplos. Ann Navarro. Pretince Hall 2001.
<!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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
estricto
<!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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
transicional
<!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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
para marcos
El name space del XML
<!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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
xmlns
¿En qué lenguaje está escrito el html?
¿En inglés o español?
<!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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
xml:lang y lang
¿Cómo está guardado el xhtml como documento?
¿Qué caracteres deben emplearse?
Es decir, ¿cuál es su codificación?
<!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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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=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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
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:[email protected]”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
Occidental - Europeo
contenido presentación
xhtml css
.html .css
.html .css
.html .css
.jpg
.js
.swf
peticiónal servidor
http
tasa detransferencia
.html
.css
.jpg .jpg
RSS: Really Simple Sindication.
Una aplicación de XML.
* 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/