Curso de Diseño Web Profesor: Mario Figge. Vamos a construir un sitio Para construir un sitio...
-
Upload
deifilia-aday -
Category
Documents
-
view
112 -
download
0
Transcript of Curso de Diseño Web Profesor: Mario Figge. Vamos a construir un sitio Para construir un sitio...
![Page 1: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/1.jpg)
Curso de Diseño Web
Profesor: Mario Figge
![Page 2: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/2.jpg)
Vamos a construir un sitio Para construir un sitio necesitamos 3
cosas:
1. Un nombremisitio.com
2. Un lugarServidor con IP Fija
3. Un contenidoArchivos html e imágenes
![Page 3: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/3.jpg)
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 1Internet 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
![Page 4: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/5.jpg)
Algo de Historia
2004: Firefox 1.0
2005: Opera 8 y 8.5
2006: JavaScript 1.7Opera 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
![Page 6: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/6.jpg)
Algo de Historia
![Page 7: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/7.jpg)
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
![Page 8: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/8.jpg)
¿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
![Page 9: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/9.jpg)
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.
![Page 10: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/10.jpg)
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)
Todos los que queramos agregar
![Page 11: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/11.jpg)
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: <h1>Esto es un titulo de primer
nivel</h1>
![Page 12: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/12.jpg)
Un documento HTML 4.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title>
</head><body>
El contenido va aquí </body>
</html>
![Page 13: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/13.jpg)
Un documento HTML5
<!DOCTYPE HTML>
<html><head>
<meta charset=utf-8"> <title>Untitled Document</title>
</head><body>
El contenido va aquí </body>
</html>
![Page 14: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/14.jpg)
Etiquetas (Tags)
<p>Esto es un parrafo</p>
<p>Esto es un parrafo con <strong>palabras resaltadas</strong></p>
<a href="http://subdesarrollando.com.ar/">Lea el Blog</a>
<img src=“archivo.jpg”>
Referencia: http://reference.sitepoint.com/ (para HTML 4.1)
![Page 15: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/17.jpg)
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
![Page 18: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/18.jpg)
HTML: Elementos de Imagen y Medios
Imagen: img Elementos multimedia: embed,
object
Son elementos de tipo inline
![Page 19: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/19.jpg)
Respetemos las reglas
Obligación de mantener una etiqueta de apertura y una de cierre
Incorrecto:
<p>Esto es un parrafo.<p>Esto es un parrafo.
Correcto:
<p>Esto es un parrafo.</p><p>Esto es un parrafo.</p>
![Page 20: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/20.jpg)
Respetemos las reglas
Las etiquetas deben cerrarse y abrirse en el orden correcto.
Incorrecto:
<em><strong>Algo de texto.</em></strong>
Correcto:
<em><strong>Algo de texto.</strong></em>
![Page 21: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/21.jpg)
Respetemos las reglas
Etiquetas en desuso <font> <b> <i> <center>
![Page 22: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/22.jpg)
HTML5
html5please.us caniuse.com
developer.mozilla.org/es developer.mozilla.org/es/demos www.w3schools.com/html5 www.html5rocks.com/en/
![Page 23: 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.](https://reader035.fdocumento.com/reader035/viewer/2022062621/551cf448550346497a8b5573/html5/thumbnails/23.jpg)
Fin