clase html + css

39
HTML + CSS Programación Web

Upload: nicolas-bello-camilletti

Post on 13-Jun-2015

231 views

Category:

Technology


2 download

DESCRIPTION

Clase dictada el 13/06/2013 en Seminario de Ingeniería en Informática, cátedra de Pablo Cosso. La idea fue crear una clase introductoria dado que en general los alumnos no tienen estos conceptos básicos.

TRANSCRIPT

Page 1: Clase Html + CSS

HTML + CSSProgramación Web

Page 2: Clase Html + CSS

HTML: HyperText Markup Language

Page 3: Clase Html + CSS

HTML CSS

JavaScript

Page 4: Clase Html + CSS

HTML JavaScript

Estructura Comportamiento

CSS

Presentación

Page 5: Clase Html + CSS

CSS / JavaScript

HTML HTML HTML HTML

Page 6: Clase Html + CSS

Sintaxis HTML

<etiqueta>contenido

</etiqueta>

Apertura

Cierre

Page 7: Clase Html + CSS

Sintaxis HTML

<etiqueta atributo=“valor”>contenido

</etiqueta>

Atributo

Page 8: Clase Html + CSS

Class vs Id

•Class == muchas veces• Reutilización

• Id == solo una vez• Diferenciación

Page 9: Clase Html + CSS

Estructura básica

<html><head>…</head><body>…</body>

</html>

Page 10: Clase Html + CSS

Block vs inline

block

blockinline inline

Page 11: Clase Html + CSS

Elementos Básicos body

• <p> párrafo• <a> link• <strong> negrita• <em> itálica• <h1> <h2> … <h6> títulos

Page 12: Clase Html + CSS

Elementos Básicos body

• <div> agrupación de elementos (block)• <span> agrupación de elementos (inline)• <img> imagenes• <input>, <form> elementos para formularios• <table>, <tr>, <th>, <td> Elementos para la creación de tablas• <ul>, <ol>, <li> Elementos para creación de listas

Page 13: Clase Html + CSS

Elementos básicos Head

• <title>• <meta>• <link>• <script>• <style>

Page 14: Clase Html + CSS

HTML 5

• <!DOCTYPE html>• Nuevos tags• Performance e Integración• Conectividad web sockets• Offline y Storage• Device Access

Page 15: Clase Html + CSS

Nuevos Tags (media)

• <audio>• <video>• <canvas>• Graficos 2D y 3D (usado WebGL)

Page 16: Clase Html + CSS

Nuevos tags (estructurales)

• <header> encabezado• <aside> info complementaria / sidebar• <footer> pie de página• <hgroup> grupo de encabezados• <nav> menú de navegación• <article> unidad de información• <section> grupo de unidades de información

Page 17: Clase Html + CSS

<section>

<article><p>

<p>

<aside>

<nav>

<header>

<footer>

<article><p>

Page 18: Clase Html + CSS

Nuevos tags (semánticos)

• <time> fecha/hora• <figure> contenido autocontenido• <figcaption> leyenda vinculada al contenido de figure• <mark> marca relevancia (resaltado, diferente a strong, que marca

importancia)• <progress> progress bar

Page 19: Clase Html + CSS

Performance e Integración

• Web Workers• Procesos de Javascript en background

• XMLHttpRequest level 2• Jit-compiling JavaScript engines• History API• Permite modificar el historial. Ideal para Web Apps

• Drag and drop

Page 20: Clase Html + CSS

Offline y Storage

• Application cache• LocalStorage (key-value database)• Web SQL (base de datos sql)• Indexed database (mix entre localstorage y web sql)• File Access (Api para leer contenido de archivos desde JavaScript)• Online/offline events

Page 21: Clase Html + CSS

Device Access

• Camara API• Touch Events• Geolocalization• Device orientation• Pointer lock API

Page 22: Clase Html + CSS

Demo HTML 5

Page 23: Clase Html + CSS

CSS : Cascading style sheets

Page 24: Clase Html + CSS

Sintaxis CSS

selector {regla1: valor1;regla2: valor2;

}

Que se modifica

Como se modifica

Page 25: Clase Html + CSS

Sintaxis CSS

selector {regla1: valor1;regla2: valor2;

}

Selector

Valor

Propiedad

Page 26: Clase Html + CSS

Sintaxis de selectores

Etiqueta <etiqueta>

.clase class=“clase”

#id id=“id”

Page 27: Clase Html + CSS

Selectores 2

• ul > li child selector• h3 + p adjacent selector• input[name=“mobile”] attribute selector• li:first-child first child selector• li:nth-child(2n+1) selector de impares• Selectores pseudo dinámicos (:hover, :focus, :active…)

Page 28: Clase Html + CSS

Prioridad de selectoresselector style id class attribute priority

* 0 0 0 0 0000

p 0 0 0 1 0001

div a 0 0 0 2 0002

div a.color 0 0 1 2 0012

div .color .text 0 0 2 1 0021

div .color p #news 0 1 1 2 0112

style=“” 1 0 0 0 1000

Page 29: Clase Html + CSS

Modelo de caja

MarginBorder

Padding

Content

Page 30: Clase Html + CSS

Esquema de posicionamiento

• static (default)• relative• absolute• fixed

Page 31: Clase Html + CSS

Float

• none (default)• left• right• clear

Page 32: Clase Html + CSS

Clearfix

.clearfix:after {content: ”.”;visibility: hidden;display: block;font-size: 0;clear: both;height: 0;

}

Page 33: Clase Html + CSS

CSS 3

• Media Queries• Soporte para• Animations• Transitions• Transformations (2d y 3d)• Gradients

• Web Fonts• Pseudo clases y pseudo elementos

Page 34: Clase Html + CSS

Demo CSS

Page 35: Clase Html + CSS

Frameworks CSS

• http://www.getskeleton.com/• http://twitter.github.io/bootstrap/• http://foundation.zurb.com/• http://purecss.io/• http://960.gs/• http://unsemantic.com/

Page 36: Clase Html + CSS

Bootstrap

• Scaffolding• Grid system: 12 columnas• Layouts• Responsive design

• Base css• Tag code, Tablas, forms, botones, imágenes e iconos

• Componentes• Grupos de botones, tabs, nav bar, dropdowns, alerts, progress bar,

paginación, etc.

Page 37: Clase Html + CSS

Demo Bootstrap

Page 38: Clase Html + CSS

Preprocesadores CSS

• Less (http://lesscss.org/)• Sass (http://sass-lang.com/)• Compass (http://compass-style.org/)

Page 39: Clase Html + CSS

Recursos

• https://developer.mozilla.org/en-US/docs/Web/HTML• https://developer.mozilla.org/en-US/docs/Web/CSS• http://www.w3.org/• http://validator.w3.org/• http://www.codecademy.com/tracks/web• http://www.w3schools.com/