Upload
nicolas-bello-camilletti
View
221
Download
2
Tags:
Embed Size (px)
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.
Citation preview
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/