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.

Presentación del tema: "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."— Transcripción de la presentación:

1 Curso de Diseño Web Profesor: Mario Figge

2 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

3 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 

4 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

5 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

6 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

7 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

8 ¿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

9 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.

10 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 (http://tredosoft.com/Multiple_IE)http://tredosoft.com/Multiple_IE  Todos los que queramos agregar

11 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

12 Un documento HTML 4.1 Untitled Document El contenido va aquí

13 Un documento HTML5 Untitled Document El contenido va aquí

14 Etiquetas (Tags) Esto es un parrafo Esto es un parrafo con palabras resaltadas Lea el Blog Referencia: http://reference.sitepoint.com/ (para HTML 4.1)http://reference.sitepoint.com/

15 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

16 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

17 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

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

19 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.

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

21 Respetemos las reglas  Etiquetas en desuso 

22 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  www.w3schools.com/html5 www.w3schools.com/html5  www.html5rocks.com/en/ www.html5rocks.com/en/

23  Fin