Curso de Diseño Web Profesor: Mario Figge

Vamos a construir un sitio  Para construir un sitio necesitamos 3 cosas:  1. Un nombre misitio.com  2. Un lugar Servidor con IP Fija  3. Un contenido Archivos html e imágenes

Algo de Historia  1993: HTML (Primera Version), draft (no estándar). Mosaic 1.0, Lynx  1994: Netscape 1.0  1995: HTML 2.0. Internet Explorer 1 y 2, Mosaic 2, Netscape 1.1  1996: CSS 1 Internet Explorer 3, Mosaic 2.1, Netscape 2 (JavaScript) y 3, Opera 2.1  1997: HTML 3.2 recomendación del W3C. CSS 2. Internet Explorer 4, Mosaic 3, Netscape 4, Opera 3 

Algo de Historia  1998: HTML 4.0, (Strict, Transitional, Frameset) Netscape 4.5, Opera 3.5  1999: HTML 4.01 (Strict, Transitional, Frameset) Internet Explorer 5  2000: XHTML 1.0 (Strict, Transitional, Frameset), Internet Explorer 5.5, Internet Explorer 5 Mac, Netscape 6, Opera 5  2001: XHTML 1.1 Basado en XHTML 1.0 Strict. Internet Explorer 6, Opera 6  2002: Netscape 7, Phoenix 0.1  2003: Opera 7, Firebird 0.7

Algo de Historia  2004: Firefox 1.0  2005: Opera 8 y 8.5  2006: JavaScript 1.7 Opera 9, Opera Mini, Firefox 1.5 y 2, Internet Explorer 7  2007: CSS 2.1  2008: Firefox 3, Internet Explorer 8, Safari 3.1,Chrome 0.2  2009: Firefox 3.6, Opera 10.5, Chrome 3

Algo de Historia  2010: XHTML 2.0, HTML5 working draft, CSS 3 working draft, Opera 10.6, Opera Mobile 10, Opera Mini 5, Chrome 6,7,8,9, Safari 4  2011: Internet Explorer 9, Firefox 4, 5, 6, Chrome 10, 11, 12, 13, 14, Safari 5, 5.1, Opera 11, 11.5  Safari iOS 4.2, 4.3, Firefox Mobile, Android Browser 2.3, 3, 4, Opera Mobile 11, 11.1  2012: Firefox 7, 8, 9, 10, 11, Chrome 15, 16, 17, 18, Opera 11.6  Safari iOS 5, Opera Mobile 12

Múltiples Problemas Diferentes:  Navegadores (20+)  Tamaños de Pantalla y de Ventana (Infinitos)  Sistemas Operativos / Tipografías  Tecnologías Soportadas (Flash, HTML5)  … y no se olviden de los celulares! No podemos controlar estos parámetros

¿Como lo manejamos?  Mejora Progresiva (Progressive Enhancement)  Degradado Elegante (Graceful Degradation)  Navegadores Modernos: Firefox 11, Chrome 18, Internet Explorer 9  Navegadores a tener en cuenta: Internet Explorer 7 y 8

Contenido, Presentación y Comportamiento  Contenido: HTML  Presentación: CSS  Comportamiento: JavaScript  Aplicación: PHP (en el servidor)  Todas estas tecnologías se conjugan en el navegador, de ahí la importancia de software que respete estándares.

Herramientas Necesarias  Adobe Dreamweaver  Construcción y edición del Sitio, Publicación  Adobe Fireworks  Prototipado y Edición de Imágenes  Browsers  Firefox, Chrome, Internet Explorer 9  Internet Explorer 7 y 8  Múltiple IE (  Todos los que queramos agregar

HTML  HTML es el acrónimo inglés de HyperText Markup Language, que se traduce como Lenguaje de Marcas de Hipertexto. Es un lenguaje de marcas diseñado para estructurar textos y presentarlos en forma de hipertexto.  Ejemplo:  Esto es un titulo de primer nivel

Un documento HTML 4.1 Untitled Document El contenido va aquí

Un documento HTML5 Untitled Document El contenido va aquí

Etiquetas (Tags) Esto es un parrafo Esto es un parrafo con palabras resaltadas Lea el Blog Referencia: (para HTML 4.1)

HTML: Elementos Estructurales  Encabezados: h1 … h6  Párrafo: p  Lista con Viñetas: ul, li  Lista Numeradas: ol, li  Lista de Definiciones: dl, dt, dd  Cita: blockquote  Línea Horizontal: hr  Bloques: div Son todos elementos de tipo block

HTML: Elementos de Texto  Salto de renglón: br  Enlaces (Links): a  Destacado: strong  Enfatizado: em  Abreviatura: abbr  Acrónimo: acronym  Caracteres especiales: á …  Bloque inline: span Son todos elementos de tipo inline

HTML: Tablas  La tabla: table  Filas: tr  Celdas: td  Celdas de Encabezado: th  Título general: caption  Otros: thead, tfoot, tbody table es un elemento de tipo block

HTML: Elementos de Imagen y Medios  Imagen: img  Elementos multimedia: embed, object Son elementos de tipo inline

Respetemos las reglas  Obligación de mantener una etiqueta de apertura y una de cierre Incorrecto: Esto es un parrafo. Esto es un parrafo. Correcto: Esto es un parrafo. Esto es un parrafo.

Respetemos las reglas  Las etiquetas deben cerrarse y abrirse en el orden correcto. Incorrecto: Algo de texto. Correcto: Algo de texto.

Respetemos las reglas  Etiquetas en desuso 

HTML5  html5please.us html5please.us  caniuse.com caniuse.com  developer.mozilla.org/es developer.mozilla.org/es  developer.mozilla.org/es/demos developer.mozilla.org/es/demos  

 Fin