HTML + CSSProgramación Web
HTML: HyperText Markup Language
Estructura ComportamientoPresentación
CSS / JavaScriptHTML HTML HTML HTML
Sintaxis HTML<etiqueta>contenido</etiqueta>AperturaCierre
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 inlineblockblockinline 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>  imagen...
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 Acc...
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• <hg...
<section><article><p><p><aside><nav><header><footer><article><p>
Nuevos tags (semánticos)• <time>  fecha/hora• <figure>  contenido autocontenido• <figcaption>  leyenda vinculada al con...
Performance e Integración• Web Workers• Procesos de Javascript en background• XMLHttpRequest level 2• Jit-compiling JavaSc...
Offline y Storage• Application cache• LocalStorage (key-value database)• Web SQL (base de datos sql)• Indexed database (mi...
Device Access• Camara API• Touch Events• Geolocalization• Device orientation• Pointer lock API
Demo HTML 5
CSS : Cascading style sheets
Sintaxis CSSselector {regla1: valor1;regla2: valor2;}Que semodificaComo semodifica
Sintaxis CSSselector {regla1: valor1;regla2: valor2;}SelectorValorPropiedad
Sintaxis de selectoresEtiqueta  <etiqueta>.clase  class=“clase”#id id=“id”
Selectores 2• ul > li  child selector• h3 + p  adjacent selector• input[name=“mobile”]  attribute selector• li:first-ch...
Prioridad de selectoresselector style id class attribute priority* 0 0 0 0 0000p 0 0 0 1 0001div a 0 0 0 2 0002div a.color...
Modelo de cajaMarginBorderPaddingContent
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 clase...
Demo CSS
Frameworks CSS• http://www.getskeleton.com/• http://twitter.github.io/bootstrap/• http://foundation.zurb.com/• http://pure...
Bootstrap• Scaffolding• Grid system: 12 columnas• Layouts• Responsive design• Base css• Tag code, Tablas, forms, botones, ...
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....
Clase Html + CSS
Upcoming SlideShare
Loading in …5
×

Clase Html + CSS

463 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
463
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Semántico: los humanos entienden la estructura del documento y su sentidoNo sirve para diseño y presentación. Para eso es CSSNo tiene comportamiento. Para eso está JavaScriptIn the late 1980s, Tim Berners-Lee was working as a physicist at CERN (the European Organization for Nuclear Research). He devised a way for scientists to share documents over the internet. Prior to his invention, communication via the internet was limited to plain text, using technologies such as email, FTP (File Transfer Protocol), and Usenet-based discussion boards. The invention of HTML made use of a model of content stored on a central server that could be transferred and displayed on a local workstation via a browser. It simplified access to content and enabled the display of &quot;rich&quot; content (such as sophisticated text formatting and the display of images).
  • Con html5 el valor a veces es optativo. Ejemplo existe un atributo required para los inputs de los forms.
  • Todo en html/css son cajashttp://www.impressivewebs.com/difference-block-inline-css/
  • Como float rompe un poco el flow del documento, se requiere de este hack (que van a encontrar en mil versiones diferentes) para arreglar el problema.
  • Clase Html + CSS

    1. 1. HTML + CSSProgramación Web
    2. 2. HTML: HyperText Markup Language
    3. 3. Estructura ComportamientoPresentación
    4. 4. CSS / JavaScriptHTML HTML HTML HTML
    5. 5. Sintaxis HTML<etiqueta>contenido</etiqueta>AperturaCierre
    6. 6. Sintaxis HTML<etiqueta atributo=“valor”>contenido</etiqueta>Atributo
    7. 7. Class vs Id•Class == muchas veces• Reutilización•Id == solo una vez• Diferenciación
    8. 8. Estructura básica<html><head>…</head><body>…</body></html>
    9. 9. Block vs inlineblockblockinline inline
    10. 10. Elementos Básicos body• <p>  párrafo• <a>  link• <strong>  negrita• <em>  itálica• <h1> <h2> … <h6>  títulos
    11. 11. 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
    12. 12. Elementos básicos Head• <title>• <meta>• <link>• <script>• <style>
    13. 13. HTML 5• <!DOCTYPE html>• Nuevos tags• Performance e Integración• Conectividad  web sockets• Offline y Storage• Device Access
    14. 14. Nuevos Tags (media)• <audio>• <video>• <canvas>• Graficos 2D y 3D (usado WebGL)
    15. 15. 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
    16. 16. <section><article><p><p><aside><nav><header><footer><article><p>
    17. 17. 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 marcaimportancia)• <progress>  progress bar
    18. 18. 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
    19. 19. 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
    20. 20. Device Access• Camara API• Touch Events• Geolocalization• Device orientation• Pointer lock API
    21. 21. Demo HTML 5
    22. 22. CSS : Cascading style sheets
    23. 23. Sintaxis CSSselector {regla1: valor1;regla2: valor2;}Que semodificaComo semodifica
    24. 24. Sintaxis CSSselector {regla1: valor1;regla2: valor2;}SelectorValorPropiedad
    25. 25. Sintaxis de selectoresEtiqueta  <etiqueta>.clase  class=“clase”#id id=“id”
    26. 26. 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…)
    27. 27. Prioridad de selectoresselector style id class attribute priority* 0 0 0 0 0000p 0 0 0 1 0001div a 0 0 0 2 0002div a.color 0 0 1 2 0012div .color .text 0 0 2 1 0021div .color p #news 0 1 1 2 0112style=“” 1 0 0 0 1000
    28. 28. Modelo de cajaMarginBorderPaddingContent
    29. 29. Esquema de posicionamiento• static (default)• relative• absolute• fixed
    30. 30. Float• none (default)• left• right• clear
    31. 31. Clearfix.clearfix:after {content: ”.”;visibility: hidden;display: block;font-size: 0;clear: both;height: 0;}
    32. 32. CSS 3• Media Queries• Soporte para• Animations• Transitions• Transformations (2d y 3d)• Gradients• Web Fonts• Pseudo clases y pseudo elementos
    33. 33. Demo CSS
    34. 34. Frameworks CSS• http://www.getskeleton.com/• http://twitter.github.io/bootstrap/• http://foundation.zurb.com/• http://purecss.io/• http://960.gs/• http://unsemantic.com/
    35. 35. 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, progressbar, paginación, etc.
    36. 36. Demo Bootstrap
    37. 37. Preprocesadores CSS• Less (http://lesscss.org/)• Sass (http://sass-lang.com/)• Compass (http://compass-style.org/)
    38. 38. 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/

    ×