Clase Html + CSS
•Als PPTX, PDF herunterladen•
2 gefällt mir•601 views
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.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Clase Html + CSS
Ähnlich wie Clase Html + CSS (20)
Mehr von Nicolás Bello Camilletti
Mehr von Nicolás Bello Camilletti (17)
Kürzlich hochgeladen
Kürzlich hochgeladen (15)
Clase Html + CSS
- 1. HTML + CSS Programación Web
- 2. HTML: HyperText Markup Language
- 5. CSS / JavaScript HTML HTML HTML HTML
- 8. Class vs Id •Class == muchas veces • Reutilización •Id == solo una vez • Diferenciación
- 10. Block vs inline block block inline inline
- 11. Elementos Básicos body • <p> párrafo • <a> link • <strong> negrita • <em> itálica • <h1> <h2> … <h6> títulos
- 12. 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
- 13. Elementos básicos Head • <title> • <meta> • <link> • <script> • <style>
- 14. HTML 5 • <!DOCTYPE html> • Nuevos tags • Performance e Integración • Conectividad web sockets • Offline y Storage • Device Access
- 15. Nuevos Tags (media) • <audio> • <video> • <canvas> • Graficos 2D y 3D (usado WebGL)
- 16. 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
- 18. 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
- 19. 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
- 20. 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
- 21. Device Access • Camara API • Touch Events • Geolocalization • Device orientation • Pointer lock API
- 22. Demo HTML 5
- 23. CSS : Cascading style sheets
- 24. Sintaxis CSS selector { regla1: valor1; regla2: valor2; } Que se modifica Como se modifica
- 25. Sintaxis CSS selector { regla1: valor1; regla2: valor2; } Selector Valor Propiedad
- 26. Sintaxis de selectores Etiqueta <etiqueta> .clase class=“clase” #id id=“id”
- 27. 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…)
- 28. Prioridad de selectores selector 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
- 30. Esquema de posicionamiento • static (default) • relative • absolute • fixed
- 31. Float • none (default) • left • right • clear
- 32. Clearfix .clearfix:after { content: ”.”; visibility: hidden; display: block; font-size: 0; clear: both; height: 0; }
- 33. CSS 3 • Media Queries • Soporte para • Animations • Transitions • Transformations (2d y 3d) • Gradients • Web Fonts • Pseudo clases y pseudo elementos
- 34. Demo CSS
- 35. Frameworks CSS • http://www.getskeleton.com/ • http://twitter.github.io/bootstrap/ • http://foundation.zurb.com/ • http://purecss.io/ • http://960.gs/ • http://unsemantic.com/
- 36. 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.
- 37. Demo Bootstrap
- 38. Preprocesadores CSS • Less (http://lesscss.org/) • Sass (http://sass-lang.com/) • Compass (http://compass-style.org/)
- 39. 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/
Hinweis der Redaktion
- 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 "rich" 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.