Descargar la presentación
La descarga está en progreso. Por favor, espere
Publicada porDeifilia Aday Modificado hace 9 años
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
Presentaciones similares
© 2024 SlidePlayer.es Inc.
All rights reserved.