Post on 28-Jun-2015
description
Carlos Julio Caicedo C
carloscaicedo.wordpress.com
(pronto carloscaicedo.net)
carloscaicedo.wordpress.com
yo@carloscaicedo.net
¿?
usando css y xhtml?¿Por qué hacer un sitio web
para el diseño visualMás posibilidades
www.kiutnorma.com
www.kiutnorma.com
www.kiutnorma.com
www.kiutnorma.com
www.kiutnorma.com
www.kiutnorma.com
útil, ¿no creen?
:-)
¿Más razones?
www.country-boys.netCapas y elementos superpuestos
www.haus-hoyer.deElementos flotantes e interactivos
www.haus-hoyer.deAjax, CSS y xhtml hacen un bonito trío
www.haus-hoyer.deAjax, CSS y xhtml hacen un bonito trío
www.haus-hoyer.deAjax, CSS y xhtml hacen un bonito trío
…y como si fuera poco…
www.csszengarden.comUn solo documento, varias versiones
www.csszengarden.comUn solo documento, varias versiones
www.csszengarden.comUn solo documento, varias versiones
Pero eso no es todo
Sitios WebMas livianos
Menos códigoMenor tiempo de descarga
Uso eficiente de la memoria temporal
Además…
Proceso eficienteDe desarrollo
Adiós al find+replace
p{
font-size:14px;color:#000000;
}
La estructura separada de la presentación
La estructura separada de la presentación
La estructura separada de la presentación
La estructura separada de la presentación
La estructura separada de la presentación
La estructura separada de la presentación(los ingenieros y los diseñadores no se pisarán las mangueras)
Acordaos
<!-- Sir Tim Berners-Lee @ W3C -->
Permitir que mas personas, sin importar sus limitaciones físicas o funcionales puedan consultar la información que se encuentra en Internet.
Para completar
Hacer las cosas bien
Espero haberlos convencido
:-D
Bueno pues,¿Qué necesito para empezar?
Editor de texto
Editor de texto
Editor de texto
Navegador web
Navegador web
Navegador web
Navegador web
Navegador web
Navegador web
Navegador web
DOM Inspector 1.8.0.7Web Developer 1.0.2Fire Bug 0.4
Comienza la enunciación de elementos visibles
Comienza la enunciación de elementos visibles
Barra de navegación
Comienza la enunciación de elementos visibles
Barra de navegación
El div es un elemento individual, mientras que un class define características comunes
xmlhtml+
Presentación de datos estructurados en un orden jerárquico.
html
Formato abierto.Creación de etiquetas incompatibles.
html
flashhtml vs
flashhtml vs
Colectivo Individual
flashhtml vs
Colectivo Individual
Generadores Generador
flashhtml vs
Colectivo Individual
Generadores Generador
Visores Visor
Desordenhtml=
Datos.
Sintaxis estricta.
Propias etiquetas.Información universal.
xml
xmlhtml+
Presentación de datos a través de etiquetas.
Información disponible para diversos dispositivos.
xhtml
Sintaxis
<table cellspacing=“0”>
<table cellspacing=“0”>
Etiqueta
<table cellspacing=“0”>
Etiqueta
Atributo
<table cellspacing=“0”>
Etiqueta
AtributoValor
Reglas básicas
01Estructura básica
<!DOCTYPE><html>
<head>Información del documento
</head><body>
Contenido presentado
</body></html>
02Defina el tipo de documento
xhtml estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
xhtml de transición
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
xhtml para marcos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03Lo que se abre, se cierra
<p>Párrafo</p>
<br /><input />
<img src=“../igu/imgs/logo.png” />
<meta />
04Jerarquía en los elementos
<p><strong>Párrafo</p></strong>
<p><strong>Párrafo</p></strong>
<p><strong>Párrafo</strong></p>
<p><strong>Párrafo</p></strong>
<p><strong>Párrafo</strong></p>
<span><div>Texto</div></span>
<p><strong>Párrafo</p></strong>
<p><strong>Párrafo</strong></p>
<span><div>Texto</div></span>
<div><span>Texto</span></div>
05Sangrados(Un consejo)
<table><tr>
<th>1</th><th>2</th>
</tr><tr>
<td>Dato01</td><td>Dato02</td>
</tr></table>
Etiquetas importantes
01Contenido
<h1>Título principal</h1><h2>Título secundario</h2>…<h6>Subtítulo</h6><p>Párrafo<br />Continuación del párrafo</p><ul>
<li>Lista desordenada</li></ul><ol>
<li>Lista ordenada</li></ol>
02Importancia
<p>Dentro de una linea se resaltan <strong>las palabras importantes<strong></p>
<p>Así también, se pueden resaltar empleando <em>esta etiqueta</em></h2>
03Tipo
<cite>Ser o no ser</cite>
<code>funtion validar (busqueda)</code>
<abbr>Dir.</abbr>
<acronym>DANE</acronym>
04Formularios
<form><fieldset id=“campos”>
<p><label>Nombre</label><br /><input /></p><p><label>Nombre</label><br /><input /></p>
</fieldset><fieldset id=“acciones”>
<p><button>Enviar</button> o<a>volver</a> al menu anterior</p>
</fieldset></form>
05Tablas
<table><thead>
<tr><th>Col 01</th><th>Col 02</th>
</tr></thead><tbody>
<tr><td>Dato 01</td><td>Dato 02</td>
</tr></tbody><tfoot>
<tr><td>Resultado 01</td><td>Resultado 02</td>
</tr></tfoot>
</table>
06Agrupamiento
<div><h1>Titulo</h1><p>Párrafos</p><table></table><p>Otra linea de texto <span>con untexto diferenciado</span> delresto</p>
</div>
07id - class
<div id=“encabezado”><h1>Titulo</h1>
</div><div id=“contenidos”>
<h2>Noticia 01</h2><p class=“datos”>17 de Julio</p><p>Contenido</p><h2>Noticia 01</h2><p class=“datos”>18 de Julio</p><p>Contenido</p>
</div>