Front End - Maquetación xhtml + css

Front End : Xhtml + Css Tecnologías web Lab. Diseño Gráfico 2009 Zara Hormazábal D.

xhtml y Css?? Que es esto del HTML.lenguaje de estructuración y de contenidos + XML.lenguaje de datos a través de etiquetas semánticas

Por que usar xhtml y css??? Flexible para el diseño Capas y elementos superpuestos Varias versiones en una sola estructura Sitios más livianos, menos código, menos carga

xhtml y Css?? Que es esto del Estructuramos contenido con etiquetas semánticas. Deﬁnimos el signiﬁcado de cada elemento no el aspecto. El aspecto o diseño lo podemos controlar mediante el CSS. XML + HTML = XHTML Principal elemento etiquetas que para diferenciarse del contenido, están encerradas por paréntesis angulares. <etiqueta> esto es una etiqueta </etiqueta>

Etiquetas xhtml, atributo y valores etiqueta atributo <form> <input type=”text” name=”nombre” /> </form> valor <a href=\"http://www.taller.cl\" title=”web taller”> <img alt=”imagen ejemplo” src=\"ejemplo.gif\"/> </a>

Estructura de un xhtml <!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\" xml:lang=\"es\" lang=\"es\"> <head> <meta name=\"Autor\" content=\"taller\" /> <meta name=\"keywords\" content=\"bachillerato,html,dhtml,css,webs,webmaster\" /> <meta name=\"GENERATOR\" content=\"wordpress\" /> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /> <title>Titulo de la pagina</title> </head> <body> <p>Primer documento XHTML, es decir un, Hola mundo</p> </body> </html>

Estructura de un xhtml <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict// Tipo de elementos o etiquetas EN\" que usaremos \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> Acá comienza el doc. xhtml <html xmlns=\"http://www.w3.org/1999/xhtml\" y se dan atributos del idioma. xml:lang=\"es\" lang=\"es\"> <head> Encabezado de las páginas, no es <meta name=\"Autor\" content=\"taller\"> lo mismo que header, acá se da <meta name=\"keywords\" ciertos parametros como el titulo content=\"bachillerato,html,dhtml,css,webs,webmaster\"> del sitio, meta, enlace a los <meta name=\"GENERATOR\" content=\"wordpress\"> estilos css, etc <title>Titulo de la pagina</title> </head> Cuerpo de la página, contiene todo el contenido que será visto. <body> En este encontraremos las <p>Primer documento XHTML, es decir un, Hola mundo</p> etiquetas como <p>, <li>, </body> <h1>... </html>

Elementos (etiquetas) de un xhtml <p>Este es un parrafo</p> Parrafo <br /> es la etiqueta para un salto de linea <b>Esto está en negrita</b> negrita cursiva <i>Esto está en cursiva</i>  <h1>Encabezado con etiqueta h1 </h1>  <h2>Encabezado con etiqueta h2 </h2> <!-- este puede ser el titulo de la sección --!>

Elementos (etiquetas) de un xhtml <strong>marca contenido al que se quiere dar más fuerza </strong> Strong enfasis <em> El elemento em agrega énfasis al contenido </em> <img src=”url-de-la-imagen” alt=”descriptor”> <a href=\"http://www.example.com\" title=\"Apunta hacia example.com\">Enlace absoluto</a> <a href=\"ejemplo02.html\" title=\"Ir al ejemplo numero 2\" rel=\"Prev\">Enlace relativo</a> <a href=\"#ﬁn\" title=\"Ir al ﬁnal de la pagina mediante el ancla\">Enlace hacia ancla</a> <a href=\"mailto:mail@example.com\">Correo de ejemplo</a>

Elementos (etiquetas) de un xhtml <table border=”0” cellpadding=”0” cellspacing=”0”> <tr>  <th colspan=”3”> esto es una cabecera de una tabla </th> </tr> <tr> <td> esto es una celda/columna de una tabla </td> <td> esto es una celda/columna de una tabla </td> <td> esto es una celda/columna de una tabla </td> </tr> </table> Esto es una cabecera th esto es una esto es una esto es una celda/columna celda/columna celda/columna td td td

Elementos (etiquetas) de un xhtml <ul> •elemento li a •elemento li b <li> lista desordenada </li> •elemento li c </ul> <ol> 1.elemento li a 2.elemento li b <li> lista ordenada por número </li> 3.elemento li c </ol> <dl> Término <dt> término </dt > Deﬁnición <dd> deﬁnición </dd > </dl> <form> <label>Nombre:</label> Nombre <input type=\"text\" name=\"nombre\"/> Apellido <label>Apellido:</label> Mensaje <input type=\"text\" name=\"apellido\"/> <label>Mensaje:</label> <textarea name=”mensaje”></textarea> <input type=\"submit\" value=\"enviar\" /> enviar </form>

Reglas de un xhtml 1. Los elementos vacíos deben cerrarse siempre: o Incorrecto: <br> o Correcto: <br /> 2. Los elementos no vacíos también deben cerrarse siempre: o Incorrecto: <p>Primer párrafo<p>Segundo párrafo o Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p> 3. Los elementos anidados deben tener un correcto orden de apertura/cierre o Incorrecto: <em><strong>Texto</em></strong> o Correcto: <em><strong>Texto</strong></em> 4. Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles). o Incorrecto: <td rowspan=3> o Correcto: <td rowspan=\"3\"> o <td rowspan='3'> 5. Los nombres de elementos y atributos deben ir en minúsculas. o Incorrecto: <A HREF=\"http://www.domname.com\">Domname</A> o Correcto: <a href=\"http://www.domname.com\">Domname</a>

Reglas de un xhtml 6. No está permitida la minimización de atributos (se usa el nombre del atributo como valor). o Incorrecto: <textarea readonly>Solo-lectura</textarea> o Correcto: <textarea readonly=\"readonly\">Solo-lectura</textarea> 7. El texto no debe ser insertado directamente en el cuerpo (dentro de la etiqueta \"body\"). o Incorrecto: <body>Texto plano</body> o Correcto: <body><span>Texto plano</span></body> 8. No se deben insertar elementos de bloque dentro de elementos de línea. o Incorrecto: <em><h2>Título</h2></em> o Correcto: <h2><em>Título</em></h2>

Css?? Que es esto del xhtml y CSS.Cascade Style Sheet - Separar contenido de la presentación - Unicos elementos para todo el sitio, pero en contexto - Varias hojas de estilos para un mismo archivo - Permite visualizar en distintos dispositivos, optimar cada uno

Como incluir css en un doc xhtml css interno (no recomendado para grandes sitios) <head> <style type=\"text/css\"> h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> css externo <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"/css/estilos.css\" media=\"screen\" /> </head> media deﬁne el medio donde se verá el sitio: - all (todos) - screen (pantallas de ordenador) - print (impresoras y “vista previa”) - tv (televisores y dispositivos baja resolución) - speech (sintetizadores de voz para discapacitados) - braille (dispositivos táctiles) / embosed (impresoras braille) - projection (proyectores y dispos. para presentaciones)

Selectores CSS regla css declaración h1 { color : #000; } selector propiedad valor Universal * { margin: 0; padding: 0; } Etiqueta p { font-size: 12px; color: #f;} Descendente p span { color: #000;} Clase .especial { margin-top: 20px;} ID #especial { padding: 5px; border: 1px solid #333;} Convinación p, a, span, em { text-decoration: underline; } /* este es un comentario en CSS */

Selectores CSS en css span.estrella { padding: 0.5em; border: 1px solid #98be10; background: #f6feda; } #arena { color: #930; font-weight: bold; } en XHTML <span class=\"estrella\">...</span> <div id=\"arena\">...</div>

Selectores CSS No confundir /* Todos los elementos de tipo \"p\" con atributo class=\"cartel\" */ p.cartel { ... } /* Todos los elementos con atributo class=\"cartel\" que estén dentro de cualquier elemento de tipo \"p\" */ p .cartel { ... } /* Todos los elementos \"p\" de la página y todos los elementos con atributo class=\"cartel\" de la página */ p, .cartel { ... }

Unidades de medidas en CSS Las unidades relativas son: /* em */ h1 { margin: 0.5em } p { font-size: 12px } /* px */ h1 { font-size: 200%; } /* % */ La unidades absolutas son: útiles solamente cuando la propiedades físicas del medio de salida son conocidas. /* inches (pulgadas) 1in = 2.54 cm */ h1 { margin: 0.5in } h2 { line-height: 3cm } /* centímetros */ h3 { word-spacing: 4mm } /* milímetros */ h4 { font-size: 12pt } /* puntos 1pt = 1/72 in*/

Color en CSS Con palabras claves: Las palabras se corresponden con el nombre en inglés de cada color: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

Color en CSS RGB hexadecimal: Utilizando 10 símbolos para los números (0 al 9) y 16 símbolos para representar las letras (de la A a la F) p { color: #4762B0; } #AAA = #AAAAAA #FFF = #FFFFFF #A0F = #AA00FF #369 = #336699 en CSS se usa color más frecuentemente en fuentes, bordes, fondos.

Modelo de Caja Todos los elementos se representen mediante cajas rectangulares. Permite deﬁnir: la altura y anchura de cada caja (height - width) el margen existente entre cajas (margin) el espacio de relleno interior contenido-caja (padding) posicion (position - top - bottom etc) visualización (display) bordes (border) Imágen de http://www.librosweb.es/css/

Modelo de Caja div { width: 300px; padding-left: 50px; padding-right: 50px; margin-left: 30px; margin-right: 30px; border: 10px solid black; } Imágen de http://www.librosweb.es/css/

Modelo de Caja La altura y anchura de cada caja (height - width) Ambos pueden expresarse en pixeles o porcentajes, y si no queremos deﬁnir usamos “auto” o que herede el tamaño del padre usamos “inherit” /* esto en css */ #header { width: 800px; height: 60px;}  <div id=\"header\"> ... </div>

Modelo de Caja Margen y relleno (margin - padding) /* separación entre el borde de la caja y el resto de cajas adyacentes */ .margen { margin: 5px; } .margen-horizontal-centrado { margin: 5px auto; } /* distancia de “relleno” entre el límite interior de la caja y el exterior (borde). */ .relleno { margin: 2px 10px; }

Modelo de Caja Bordes (border) border | border-top | border-right | border-bottom | border-left Ancho border-width --> en px color border-color --> #000 | red estilo border-style --> none | hidden | dotted | dashed | solid | double para no mostrar nada de bordes se usa border: none por ej. en imágenes .caja { border-top: 3px dashed red; border-right: 3px double blue; border-bottom: 2px dotted green; border-left: 1px solid grey; }

Modelo de Caja Margen, relleno, bordes La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura ﬁnal del elemento. /* esto en css */ div { width: 300px; padding-left: 50px; padding-right: 50px; margin-left: 30px; margin-right: 30px; border: 10px solid black; } 30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel

Fondos en CSS Fondo (background) color | imagen | repetir | posición body { background-color: #f; background-image: url(fondo-web.gif); background-repeat: repeat-x; /* repeat x y no-repeat */ background-position: 0 0; /* 0 top left... */ } body { #f url(fondo-web.gif) 0 0 repeat-x; }

Fuentes en CSS Estilos de tipografía y textos font-family : \"Trebuchet MS\", Arial , Tahoma, sans - serif ; font-size: 12px | 10em | 100% font-color: #336699 | red font-weight: bold | normal line-height: 14px | 11em | 120% text-align: right | left | center | justify text-decoration: none | underline | overline | line-through text-transform: none | uppercase | capitalize | lowercase a:link { p.parrafo { h2 { font-size: 11px; font-size: 11px; font-size: 18px; font-color: blue; font-color: #666; font-color: #000; font-weight: normal; font-weight: normal; font-weight: bold; text-decoration: none; line-height: 12px; } } }

Posicionamiento y visualización Tipos de elementos En línea: siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el ﬁnal de la línea a, br, img, input, label, select, span, strong, sub, sup, textarea De bloque: sólo ocupan el espacio necesario para mostrar sus contenidos blockquote, center, div, form, h1, h2, h3, h4, h5, h6, hr, ol, p, table, ul.

Posicionamiento y visualización Tipos de posicionamiento (position) Static: por defecto Relative: permite desplazar una caja respecto de su posición original. se controla con las propiedades top, right, bottom y left. Absolute: establece la posición en la que se muestra la caja de un elemento, respecto a su elemento padre. Fixed: su posición es inamovible dentro de la ventana del navegador

Posicionamiento y visualización Visualización Display: inline | block | none toma la forma del valor --> inline : en linea Visivility: visible | hidden mantiene el espacio ocupado por el elemento, muestra u oculta

Posicionamiento y visualización Visualización Overﬂow: visible | hidden | scroll para controlar la forma en la que se visualizan los contenidos que sobresalen de sus elementos. z-index: valores (1-999) permite controlar la posición tridimensional de las cajas posicionadas #caja1 { z-index: 5; } #caja2 { z-index: 15;} #caja3 { z-index: 25;}

Posicionamiento y visualización Elemento flotante Desplazamiento hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba. float: rigth | float: left clear: both

Referencias Especificación oficial de CSS 2.1: la que incluyen todos los navegadores actuales. Especificación oficial de CSS 3: la que sustituirá dentro de unos años a la actual versión 2.1. Web Developers Handbook: cientos de enlaces con todos los recursos útiles para diseñadores web. Blue Vertigo: otra colección de cientos de enlaces con recursos útiles para diseñadores web. Foros del Web: incluyen foros específicos dedicados a resolver dudas relacionadas con el diseño web con CSS. Ovillo: una de las mejores listas de distribución en castellano. Los foros de SitePoint son una de las mejores referencias en inglés para resolver dudas relacionadas con el diseño web.

Front End - Maquetación xhtml + css

0 comments

Notes on slide 1

2 Favorites