Download - Clase Html + CSS
HTML + CSSProgramación Web
HTML: HyperText Markup Language
HTML CSS
JavaScript
HTML JavaScript
Estructura Comportamiento
CSS
Presentación
CSS / JavaScript
HTML HTML HTML HTML
Sintaxis HTML
<etiqueta>contenido
</etiqueta>
Apertura
Cierre
Sintaxis HTML
<etiqueta atributo=“valor”>contenido
</etiqueta>
Atributo
Class vs Id
•Class == muchas veces• Reutilización
• Id == solo una vez• Diferenciación
Estructura básica
<html><head>…</head><body>…</body>
</html>
Block vs inline
block
blockinline inline
Elementos Básicos body
• <p> párrafo• <a> link• <strong> negrita• <em> itálica• <h1> <h2> … <h6> títulos
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
Elementos básicos Head
• <title>• <meta>• <link>• <script>• <style>
HTML 5
• <!DOCTYPE html>• Nuevos tags• Performance e Integración• Conectividad web sockets• Offline y Storage• Device Access
Nuevos Tags (media)
• <audio>• <video>• <canvas>• Graficos 2D y 3D (usado WebGL)
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
<section>
<article><p>
<p>
<aside>
<nav>
<header>
<footer>
<article><p>
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
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
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
Device Access
• Camara API• Touch Events• Geolocalization• Device orientation• Pointer lock API
Demo HTML 5
CSS : Cascading style sheets
Sintaxis CSS
selector {regla1: valor1;regla2: valor2;
}
Que se modifica
Como se modifica
Sintaxis CSS
selector {regla1: valor1;regla2: valor2;
}
Selector
Valor
Propiedad
Sintaxis de selectores
Etiqueta <etiqueta>
.clase class=“clase”
#id id=“id”
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…)
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
Modelo de caja
MarginBorder
Padding
Content
Esquema de posicionamiento
• static (default)• relative• absolute• fixed
Float
• none (default)• left• right• clear
Clearfix
.clearfix:after {content: ”.”;visibility: hidden;display: block;font-size: 0;clear: both;height: 0;
}
CSS 3
• Media Queries• Soporte para• Animations• Transitions• Transformations (2d y 3d)• Gradients
• Web Fonts• Pseudo clases y pseudo elementos
Demo 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/
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.
Demo Bootstrap
Preprocesadores CSS
• Less (http://lesscss.org/)• Sass (http://sass-lang.com/)• Compass (http://compass-style.org/)
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/
