HTML y CSS. Desarrollo de interfaces web Concepto Usabilidad Experiencia de usuario Tecnologías Estándares Licencias.

Presentación del tema: "HTML y CSS. Desarrollo de interfaces web Concepto Usabilidad Experiencia de usuario Tecnologías Estándares Licencias."— Transcripción de la presentación:

1 HTML y CSS

2 Desarrollo de interfaces web Concepto Usabilidad Experiencia de usuario Tecnologías Estándares Licencias

3 HTML y CSS HTML – XHTML y HTML5 CSS2, CSS3 MVC Plantillas Navegadores Web, estándares moz, khtml = FIREFOX / KONQUEROR (Linux) webkit, icap = SAFARI (Mac) filter = IE (Windows) Arte en la Web / Comunicación

4 MVC Vista HTML-CSS-JS Modelo SQL Controlador JS, PHP, ASP

5 HTML Contenido Hola Mundo

6 CSS - elemento, clase, identificador p{ color=#FC0; } div#idName{ } p.className{ }.enlace{ } #header{ }

7 CSS - anidación Elemento > Selector div#header{ } div#header ul.nav{ } div#header ul.nav a{ } div#header ul.nav a:hover{ }

8 Especifidad (según Andy Clark) a elemento x 1 0,0,1 p, a elemento x 2 0,0,2.class1 clase x 1 0,1,0 a.class1 elemento x 1 clase x 1 0,1,1 p a.class1 elemento x 2 clase x 1 0,1,2.class1.class2 clase x 2 0,2,0 p.class1 a.class2 elemento x 2 clase x 2 0,2,2 #id1 id x 1 1,0,0 a#id1 elemento x 1 id x 1 1,0,1.class1 a#id1 clase x 1 elemento x 1, id x 1 1,1,1.class1.class2 #id1 clase x 2 id x 1 1,2,0.class1.class2 clase x 2 2,0,0 claseElementoid

9 Estándares Progressive Enhancement De menos a más Graceful degradation De más a menos

10 Estructura básica de un Template page header main section footer

11 Estructura interna por secciones > header header logo nav

12 Estructura interna por secciones > section main_section content_body content sidebar