Alejandro Caballero Daza Juan Camilo Arévalo Arboleda.

Presentación del tema: "Alejandro Caballero Daza Juan Camilo Arévalo Arboleda."— Transcripción de la presentación:

1 Alejandro Caballero Daza Juan Camilo Arévalo Arboleda

2 Atributos globales HTML5 AccesskeyContenteditableSpellcheckContextmenu Alejandro Caballero - Camilo Arévalo | HTML5 y CSS32

3 Accesskey Especifica una tecla de acceso directo para activar / enfocar un elemento. GOOGLE ChromeExplorerFirefoxSafariOpera si Alejandro Caballero - Camilo Arévalo | HTML5 y CSS33

4 Contenteditable Especifica si el contenido de un elemento es editable o no. Este es un párrafo editable ChromeExplorerFirefoxSafariOpera 4.05.53.53.19.6 Alejandro Caballero - Camilo Arévalo | HTML5 y CSS34

5 Contextmenu Especifica el menú contextual de un elemento. El menú contextual aparece cuando un usuario hace clic en el elemento. Este párrafo tiene un menú contextual llamado "menu" ChromeExplorerFirefoxSafariOpera no sino Alejandro Caballero - Camilo Arévalo | HTML5 y CSS35

6 Spellcheck Especifica si el elemento ha de tener su ortografía y gramática marcada o no. Párrafo para editar con revisión ChromeExplorerFirefoxSafariOpera 9.010.02.05.110.5 Alejandro Caballero - Camilo Arévalo | HTML5 y CSS36

7 Eventos de ventana OnafterprintOnbeforeprintOnbeforeonloadOnofflineOnonlineOnforminputOninvalid Alejandro Caballero - Camilo Arévalo | HTML5 y CSS37

8 Onafterprint Ejecuta un JavaScript cuando la página empieza a imprimir, o si el diálogo de impresión se ha cerrado. ChromeExplorerFirefoxSafariOpera NoSi No Alejandro Caballero - Camilo Arévalo | HTML5 y CSS38

9 Onbeforeprint Ejecuta un JavaScript cuando la página esta a punto de imprimir o mostrar un dialogo de impresión. ChromeExplorerFirefoxSafariOpera NoSi No Alejandro Caballero - Camilo Arévalo | HTML5 y CSS39

10 Onbeforeunload Ejecuta un JavaScript cuando la página esta apunto de hacer una descarga. ChromeExplorerFirefoxSafariOpera Si 15.0 Alejandro Caballero - Camilo Arévalo | HTML5 y CSS310

11 Onoffline Ejecuta un JavaScript cuando el navegador inicia a trabajar fuera de línea. ChromeExplorerFirefoxSafariOpera No 3.0No Alejandro Caballero - Camilo Arévalo | HTML5 y CSS311

12 Ononline Ejecuta un JavaScript cuando tu navegador esta trabajando en línea. ChromeExplorerFirefoxSafariOpera No 3.0No Alejandro Caballero - Camilo Arévalo | HTML5 y CSS312

13 Onforminput Ejecuta un JavaScript cuando el usuario escribe en un campo. ChromeExplorerFirefoxSafariOpera Si 13Alejandro Caballero - Camilo Arévalo | HTML5 y CSS3

14 Oninvalid Ejecuta un JavaScript cuando la entrada falla. ChromeExplorerFirefoxSafariOpera Si10,0SiNoSi Alejandro Caballero - Camilo Arévalo | HTML5 y CSS314

15 Html5 appi HTML geolocationHTML drag and dropHTML local storageHTML applicaction cacheHTML youtube videos Alejandro Caballero - Camilo Arévalo | HTML5 y CSS315

16 Geolocation La api de geolocalización en HTML es usada para obtener la posición del usuario. Ejemplo Alejandro Caballero - Camilo Arévalo | HTML5 y CSS316 ChromeExplorerFirefoxSafariOpera 5.09.03.55.016.0

17 Drag and drop En HTML es una característica muy común, funciona agarrando un objeto y arrastrarlo a una ubicación diferente y luego soltarlo. Ejemplo Alejandro Caballero - Camilo Arévalo | HTML5 y CSS317 ChromeExplorerFirefoxSafariOpera 4.09.03.56.012.0

18 Local storage La api de local storage en HTML permite a las aplicaciones web almacenar datos localmente en el navegador del usuario. Ejemplo Alejandro Caballero - Camilo Arévalo | HTML5 y CSS318 ChromeExplorerFirefoxSafariOpera 4.09.03.56.012.0

19 Application cache HTML introduce caché application para poder almacenar una aplicación web en cache y poder acceder sin conexión a internet. Ejemplo Alejandro Caballero - Camilo Arévalo | HTML5 y CSS319 ChromeExplorerFirefoxSafariOpera 4.010.03.54.011.5

20 YouTube videos Una forma fácil de reproducir videos de YouTube en HTML. Ejemplo Alejandro Caballero - Camilo Arévalo | HTML5 y CSS320 ChromeExplorerFirefoxSafariOpera Si si

21 CSS3 Modulosborder-radiusTextWeb FontsTransitionsAnimationsMulti-column Layout Alejandro Caballero - Camilo Arévalo | HTML5 y CSS321

22 Modulos En CSS3, la especificación se dividió en una colección de especificaciones más pequeñas, conocidas como módulos. Alejandro Caballero - Camilo Arévalo | HTML5 y CSS322

23 Border-radius Agrega un borde de n pixels a una división. div { border: 2px solid; border-radius: 25px; } ChromeExplorerFirefoxSafariOpera 5.09.04.05.010.5 Alejandro Caballero - Camilo Arévalo | HTML5 y CSS323

24 Text Color HEXRGBNombre Text-align Text- decoration Text- transform Text- indent Alejandro Caballero - Camilo Arévalo | HTML5 y CSS324 Por medio de CSS3 se puede dar atributos a las etiquetas tipo texto de HTML, tales como:

25 Ejemplo p { color: #00ff00; } h1 { text-align: center; } h1 { text- decoration: overline; } p { text- transform: uppercase; } p { text-indent: 50px; } Alejandro Caballero - Camilo Arévalo | HTML5 y CSS325

26 Text PropiedadExplorerChormeFirefoxSafariOpera text- overflow 6.04.07.03.111.0 word-wrap5.523.03.56.112.1 word-break5.54.015.03.115.0 Alejandro Caballero - Camilo Arévalo | HTML5 y CSS326

27 Ejemplo p { text- overflow: ellipsis; } p { word-wrap: break- word; } p { word-break: break- all; } Alejandro Caballero - Camilo Arévalo | HTML5 y CSS327

28 WEB FONTS En CSS3 existen propiedades de fuente que definen la familia como tipo de fuente, el tamaño y el estilo de un texto. ChromeExplorerFirefoxSafariOpera 4.09.03.53.210.0 Alejandro Caballero - Camilo Arévalo | HTML5 y CSS328

29 Ejemplo Font-family div { Font- family: NameFont; } Font-style div { font- style: italic; } Font-weight div { font- weight: bold; } Alejandro Caballero - Camilo Arévalo | HTML5 y CSS329

30 Transitions Las transiciones permiten cambiar los valores de propiedad durante un periodo cuando el cursor pasa por el área a modificar. div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* Safari */ transition: width 2s; } Alejandro Caballero - Camilo Arévalo | HTML5 y CSS330

31 Animations Permite hacer animaciones en la mayoría de los elementos sin necesidad de utilizar JavaScript o flash. Alejandro Caballero - Camilo Arévalo | HTML5 y CSS331 @keyframes example { from {background-color: red;} to {background-color: yellow;} } div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; transition: width 2s; -webkit-animation-duration: 4s; animation-duration: 4s; }

32 Multi-column layout El diseño de varias columnas extiende el diseño de bloque para permitir la fácil definición de varias columnas de texto. Alejandro Caballero - Camilo Arévalo | HTML5 y CSS332 div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }

33 Bibliobiografia  http://www.w3schools.com/html/  http://michelletorres.mx/atributos-globales-en-html5/  http://cesarhdz.com/articulos/modulos-css#modulos  http://www.w3schools.com/cssref/ Alejandro Caballero - Camilo Arévalo | HTML5 y CSS333

34 Muchas gracias! Alejandro Caballero - Camilo Arévalo | HTML5 y CSS334