Este documento proporciona una introducción a HTML5 y CSS3. Explica algunas de las nuevas características de HTML5 como los nuevos elementos semánticos como <header>, <footer>, <nav>, <article>, etc. También cubre las nuevas características de formularios en HTML5 como placeholder, autofocus, nuevos tipos de entrada como email, url, número de teléfono, etc. Además, introduce las nuevas APIs de HTML5 como Canvas, Audio, Video, almacenamiento web y drag and drop.
Elemento que se puede arrastrar
•
Dropzone: Zona donde se puede soltar el elemento arrastrado
•
Dragstart: Evento que se dispara cuando se inicia el arrastre
•
Drag: Evento que se dispara mientras se arrastra
•
Dragend: Evento que se dispara cuando termina el arrastre
•
Dragenter: Evento que se dispara cuando el elemento entra en la zona de soltado
•
Dragover: Evento que se dispara cuando el elemento está sobre la zona de soltado
•
Drop
Este documento introduce el elemento HTML <canvas> y proporciona varios ejemplos de su uso para dibujar gráficos. Explica que <canvas> se puede usar para dibujar gráficos, realizar animaciones y composición de imágenes usando scripts como JavaScript. Incluye ejemplos de cómo dibujar formas simples como rectángulos, triángulos y arcos, así como ejemplos más complejos que usan degradados y formas espirales. Concluye que <canvas> permite dibujar fácil y rápidamente una variedad de figuras
El documento describe los formatos de archivo más comunes para imágenes en la web, GIF y JPG, y cómo optimizarlos para reducir su tamaño. Explica que el formato GIF es mejor para dibujos mientras que JPG es mejor para fotografías. También cubre cómo insertar imágenes en HTML usando la etiqueta <img> y sus atributos como "src", "width", "height" y "align".
- O documento é uma edição do Diário Oficial do Município de Ilheus, Bahia, contendo informações sobre contratos, ordens de serviço, nomeações, convocações e extratos de diversas entidades municipais.
1) John Heintz, a former assistant superintendent and chief legal officer, advocates bringing private sector management techniques to public education leadership through degrees like an MBA.
2) Increasingly, leaders of innovative public and private schools seek training outside traditional education programs, instead obtaining degrees like an MBA focused on outcomes and business strategies.
3) An MBA teaches valuable skills like effective talent management that can improve student achievement when applied to schools, in contrast to traditional education degrees that emphasize political concerns over outcomes.
Booster 2017 - from accessibility n00b to pro in 1.5 hrsVegard Haugstvedt
You have (probably?) heard about accessibility ("universell utforming" in Norwegian), but do you know what it is? How to use it and how to design, develop and test for it? No? Then this is the workshop for you! And even if you are experienced and know what a11y stands for, you might pick up a trick or two.
Venture Credit Union held its annual general meeting on March 23, 2017. The main business of the meeting was to:
1. Accept reports from the Board of Directors, Supervisory Committee, and Credit Committee for the year 2016.
2. Elect members to the Board of Directors, Supervisory Committee, and Credit Committee.
3. Present the auditor's report and financial statements for 2016 and approve the 2017 budget.
4. Approve any recommendations from the Board of Directors and pass any resolutions.
Elemento que se puede arrastrar
•
Dropzone: Zona donde se puede soltar el elemento arrastrado
•
Dragstart: Evento que se dispara cuando se inicia el arrastre
•
Drag: Evento que se dispara mientras se arrastra
•
Dragend: Evento que se dispara cuando termina el arrastre
•
Dragenter: Evento que se dispara cuando el elemento entra en la zona de soltado
•
Dragover: Evento que se dispara cuando el elemento está sobre la zona de soltado
•
Drop
Este documento introduce el elemento HTML <canvas> y proporciona varios ejemplos de su uso para dibujar gráficos. Explica que <canvas> se puede usar para dibujar gráficos, realizar animaciones y composición de imágenes usando scripts como JavaScript. Incluye ejemplos de cómo dibujar formas simples como rectángulos, triángulos y arcos, así como ejemplos más complejos que usan degradados y formas espirales. Concluye que <canvas> permite dibujar fácil y rápidamente una variedad de figuras
El documento describe los formatos de archivo más comunes para imágenes en la web, GIF y JPG, y cómo optimizarlos para reducir su tamaño. Explica que el formato GIF es mejor para dibujos mientras que JPG es mejor para fotografías. También cubre cómo insertar imágenes en HTML usando la etiqueta <img> y sus atributos como "src", "width", "height" y "align".
- O documento é uma edição do Diário Oficial do Município de Ilheus, Bahia, contendo informações sobre contratos, ordens de serviço, nomeações, convocações e extratos de diversas entidades municipais.
1) John Heintz, a former assistant superintendent and chief legal officer, advocates bringing private sector management techniques to public education leadership through degrees like an MBA.
2) Increasingly, leaders of innovative public and private schools seek training outside traditional education programs, instead obtaining degrees like an MBA focused on outcomes and business strategies.
3) An MBA teaches valuable skills like effective talent management that can improve student achievement when applied to schools, in contrast to traditional education degrees that emphasize political concerns over outcomes.
Booster 2017 - from accessibility n00b to pro in 1.5 hrsVegard Haugstvedt
You have (probably?) heard about accessibility ("universell utforming" in Norwegian), but do you know what it is? How to use it and how to design, develop and test for it? No? Then this is the workshop for you! And even if you are experienced and know what a11y stands for, you might pick up a trick or two.
Venture Credit Union held its annual general meeting on March 23, 2017. The main business of the meeting was to:
1. Accept reports from the Board of Directors, Supervisory Committee, and Credit Committee for the year 2016.
2. Elect members to the Board of Directors, Supervisory Committee, and Credit Committee.
3. Present the auditor's report and financial statements for 2016 and approve the 2017 budget.
4. Approve any recommendations from the Board of Directors and pass any resolutions.
Este documento introduce los conceptos de programación orientada a objetos (POO) y el patrón de arquitectura de software MVC (Modelo Vista Controlador) en PHP. Explica elementos básicos de la POO como clases, objetos, métodos y propiedades. Luego introduce el patrón MVC describiendo las funciones del modelo, la vista y el controlador. Incluye ejemplos de código en PHP para ilustrar los conceptos.
This document provides information about purchasing a 3Com Switch 4007 Documentation Kit (3C16803) from Launch 3 Telecom. It describes how to purchase the product, payment and shipping options, warranty information, and additional services offered by Launch 3 Telecom such as repairs, maintenance contracts, and equipment de-installation.
Estudo 01 o que podemos dizer sobre o reinoEmiliano Cunha
1) O conceito do Reino de Deus tem suas raízes no Antigo Testamento e era central no ministério de Jesus e seus ensinamentos.
2) Historicamente, o Reino foi interpretado de diferentes formas, como um domínio terreno, um domínio futuro ou um domínio interior.
3) No Antigo Testamento, o conceito do Reino evoluiu de um reino nacionalista davídico para um reino celestial apocalíptico que traria fim ao mal.
EL CENTRO DEL MAL EN EL MUNDO: EL ESTADO EN LA SOMBRA BRITÁNICORamón Copa
El centro del mal en el mundo: el Estado en la sombra británico
16.03.2017 - Reino Unido - Harun Yahya
El mal siempre ha sido controlado desde un centro único a lo largo de la historia. Quienes propagan las guerras y las masacres son parte de una cadena de mando y siguen los planes que se originan desde un centro. Las grandes guerras del siglo XX, la colonización, las masacres, la división de Oriente Medio y África y las crisis económicas tienen un único foco. Además, el mal es como un pulpo con muchos tentáculos y nuestros ojos tienden a mirar en primer lugar el tentáculo más activo. Pero es un cerebro el que dirige los tentáculos y hace que se muevan con perfecta coordinación. Por otra parte, el mal es una estructura jerárquica piramidal. No importa cuan tan amplia sea su base ni la cantidad de estamentos con que cuente: en la cúspide existe un punto con autoridad absoluta sobre lo que está por debajo.
Es imposible conseguir resultados positivos en la lucha contra el mal atendiendo, simplemente, los tentáculos del pulpo o los otros estamentos. Debemos dar lugar a una lucha intelectual contra la cúspide, la cual controla, administra y ordena el sistema y toma la decisión final. Lo central de ese combate debe ser dejar en claro el papel de la cúspide de la pirámide del mal. Porque esta solo es eficaz cuando confunde a los demás y se mantiene oculta, aprovechándose de todas las ventajas infames del secretismo.
Al hablarse sobre el liderazgo del mal en el mundo de hoy, se mencionan muchos nombres: los estados en la sombra de los Estados Unidos e Israel; los organismos como las Naciones Unidas, la OTAN o la Unión Europea; las organizaciones como la CIA, el MOSSAD o Gladio (red clandestina secreta anticomunista que operó en Europa bajo la dirección de la OTAN y la CIA estadounidense durante la Guerra Fría); las sociedades secretas como los Iluminati, la masonería, la asociación Skull & Bones, los Rosacruces, los templarios; los que controlan la economía mundial como barones financieros en Wall Street; los fideicomisos y corporaciones multinacionales de los hidrocarburos. Pero todos ellos son los engranajes de dicho sistema. Son los tentáculos del pulpo, los estamentos o niveles más bajos de la pirámide.
Es el estado en la sombra británico el que ha estado en la cúspide de esa pirámide jerárquica durante siglos, estado que también ha sido el polo del colonialismo y la esclavitud. China, India, Indonesia y Malasia permanecieron bajo el yugo británico durante siglos. Asimismo, fue ese estado el que introdujo el opio en China, disciplinó a la India por medio de la hambruna y aterrorizó a la mayoría del sudeste asiático con la East India Company (Compañía Británica de las Indias Orientales). Actualmente no se recuerda el genocidio perpetrado en la India en aquella época por Gran Bretaña, donde hace 150 años puso al borde de la inanición a 330 millones de personas y causó la muerte de más de un millón de hindúes.
Definiremos la violencia como un acto intencional, dirigido a dominar, controlar, agredir o lastimar a otra persona.
Implica siempre un abuso del poder mediante el empleo de la fuerza, ya sea física, psicológica, económica o política y, por ende, supone la dominación de unos y la subordinación de otros.
ACL anterior crucitae ligament anamtomy and physical therapy Mahmoud Bagago
This document discusses the anatomy and mechanics of the knee joint, with a focus on the anterior cruciate ligament (ACL). It describes the signs and symptoms of an ACL injury, including a popping sound, knee instability, swelling and pain. Clinical exams like the Lachman and pivot shift tests can help diagnose an ACL tear, which is also visible on MRI. ACL injuries may be accompanied by damage to other structures like the meniscus or MCL ligament. Management options include physical therapy initially or ACL reconstruction surgery.
Este documento presenta un tutorial extenso sobre programación batch, comenzando con una definición de los archivos batch y cómo se crean. Luego explica comandos básicos como ECHO, CD, PAUSE y EXIT, así como conceptos como redireccionamiento, variables, condiciones IF y etiquetas. Finalmente, cubre temas más avanzados como bombas lógicas, contraseñas y el uso de variables predefinidas. El objetivo general es proporcionar a los lectores una introducción completa a la programación batch para que puedan empezar a crear sus
The document lists several topics including Wellcome, Stephanie, THE DAYS OF Rainbow, Little Motherland, Making projects, and Master-classes. It appears to be a list of activities or topics but provides no other context or details about the items listed.
This is a summary of my past client brand work through my digital creative agency and private social network, SQUA.RE. My skills range from digital marketing (SEO expert), creative strategy, quality content creation, managing web development and creating unique customer engagements and experiences.
The document describes Secrets Akumal Riviera Maya, an all-inclusive adult-only resort located in Akumal, Mexico along the Riviera Maya. It provides details about the resort's amenities including 434 suites, 11 pools, a spa, multiple restaurants and bars, activities like snorkeling and golf, and an example room rate quote. Akumal is known for its turtle population and proximity to beaches, ruins, and the airport.
Una red de computadoras conecta equipos informáticos para compartir información y recursos a través de dispositivos físicos. Las redes permiten compartir impresoras, archivos, lectores de CD/DVD y acceso a Internet entre múltiples computadoras para asegurar la disponibilidad de la información, aumentar la velocidad de transmisión de datos y reducir costos.
O documento discute a importância da educação financeira para jovens, abordando tópicos como gestão de orçamento, controle de gastos, eliminação de dívidas. A palestra "E quando eu me formar?" tem como objetivo fazer os jovens refletirem sobre seus planos de carreira e finanças pessoais após a formatura.
Degustaite Piëmontese wijnen bij Wijngilde Donsa. Schuimwijn, parelende wijn, vermouth, witte en rode wijn. Een kort, maar mooi overzicht van het potentieel van deze schitterende regio. Naast een geweldig wijngebied is Piëmonte culinair puur verwennerij, en geografisch adembenemend.
Este documento resume las principales características de CSS3 como pseudo-elementos, pseudo-clases, bordes redondeados, sombras, fondos múltiples, gradientes de color, opacidad, transformaciones, transiciones y animaciones. También cubre la capacidad de CSS3 para agregar sombreado de texto, columnas, fuentes personalizadas y medios condicionales. El objetivo es dar a conocer las nuevas funcionalidades de CSS3 para lograr estilos más simples y ahorrar tiempo de desarrollo.
HTML Tour - Programación de Videojuegos HTML5Plain Concepts
En la charla veremos características comunes de los juegos y su aplicación práctica en canvas HTML5. Analizaremos varios tipos de juegos, tanto 2D como 3D y estudiaremos las diferentes maneras implementarlos mientras comentamos las partes clave de su estructura. Para finalizar echaremos un vistazo al framework desarrollado por PlainConcepts para la creación de diferentes tipos de juegos 2D y 3D en HTML5.
El documento describe varios elementos y técnicas de HTML5 para interactuar con controles de interfaz de usuario, incluyendo:
1) El modelo de objetos de documento (DOM) que proporciona un API para acceder y modificar elementos de una página web.
2) Los elementos <video> y <audio> para reproducir video y audio de forma nativa en HTML5.
3) El elemento <canvas> que permite dibujar gráficos mediante JavaScript.
4) El lenguaje de gráficos vectoriales SVG para dibujar formas, texto, y aplicar transformaciones
Este documento introduce los conceptos de programación orientada a objetos (POO) y el patrón de arquitectura de software MVC (Modelo Vista Controlador) en PHP. Explica elementos básicos de la POO como clases, objetos, métodos y propiedades. Luego introduce el patrón MVC describiendo las funciones del modelo, la vista y el controlador. Incluye ejemplos de código en PHP para ilustrar los conceptos.
This document provides information about purchasing a 3Com Switch 4007 Documentation Kit (3C16803) from Launch 3 Telecom. It describes how to purchase the product, payment and shipping options, warranty information, and additional services offered by Launch 3 Telecom such as repairs, maintenance contracts, and equipment de-installation.
Estudo 01 o que podemos dizer sobre o reinoEmiliano Cunha
1) O conceito do Reino de Deus tem suas raízes no Antigo Testamento e era central no ministério de Jesus e seus ensinamentos.
2) Historicamente, o Reino foi interpretado de diferentes formas, como um domínio terreno, um domínio futuro ou um domínio interior.
3) No Antigo Testamento, o conceito do Reino evoluiu de um reino nacionalista davídico para um reino celestial apocalíptico que traria fim ao mal.
EL CENTRO DEL MAL EN EL MUNDO: EL ESTADO EN LA SOMBRA BRITÁNICORamón Copa
El centro del mal en el mundo: el Estado en la sombra británico
16.03.2017 - Reino Unido - Harun Yahya
El mal siempre ha sido controlado desde un centro único a lo largo de la historia. Quienes propagan las guerras y las masacres son parte de una cadena de mando y siguen los planes que se originan desde un centro. Las grandes guerras del siglo XX, la colonización, las masacres, la división de Oriente Medio y África y las crisis económicas tienen un único foco. Además, el mal es como un pulpo con muchos tentáculos y nuestros ojos tienden a mirar en primer lugar el tentáculo más activo. Pero es un cerebro el que dirige los tentáculos y hace que se muevan con perfecta coordinación. Por otra parte, el mal es una estructura jerárquica piramidal. No importa cuan tan amplia sea su base ni la cantidad de estamentos con que cuente: en la cúspide existe un punto con autoridad absoluta sobre lo que está por debajo.
Es imposible conseguir resultados positivos en la lucha contra el mal atendiendo, simplemente, los tentáculos del pulpo o los otros estamentos. Debemos dar lugar a una lucha intelectual contra la cúspide, la cual controla, administra y ordena el sistema y toma la decisión final. Lo central de ese combate debe ser dejar en claro el papel de la cúspide de la pirámide del mal. Porque esta solo es eficaz cuando confunde a los demás y se mantiene oculta, aprovechándose de todas las ventajas infames del secretismo.
Al hablarse sobre el liderazgo del mal en el mundo de hoy, se mencionan muchos nombres: los estados en la sombra de los Estados Unidos e Israel; los organismos como las Naciones Unidas, la OTAN o la Unión Europea; las organizaciones como la CIA, el MOSSAD o Gladio (red clandestina secreta anticomunista que operó en Europa bajo la dirección de la OTAN y la CIA estadounidense durante la Guerra Fría); las sociedades secretas como los Iluminati, la masonería, la asociación Skull & Bones, los Rosacruces, los templarios; los que controlan la economía mundial como barones financieros en Wall Street; los fideicomisos y corporaciones multinacionales de los hidrocarburos. Pero todos ellos son los engranajes de dicho sistema. Son los tentáculos del pulpo, los estamentos o niveles más bajos de la pirámide.
Es el estado en la sombra británico el que ha estado en la cúspide de esa pirámide jerárquica durante siglos, estado que también ha sido el polo del colonialismo y la esclavitud. China, India, Indonesia y Malasia permanecieron bajo el yugo británico durante siglos. Asimismo, fue ese estado el que introdujo el opio en China, disciplinó a la India por medio de la hambruna y aterrorizó a la mayoría del sudeste asiático con la East India Company (Compañía Británica de las Indias Orientales). Actualmente no se recuerda el genocidio perpetrado en la India en aquella época por Gran Bretaña, donde hace 150 años puso al borde de la inanición a 330 millones de personas y causó la muerte de más de un millón de hindúes.
Definiremos la violencia como un acto intencional, dirigido a dominar, controlar, agredir o lastimar a otra persona.
Implica siempre un abuso del poder mediante el empleo de la fuerza, ya sea física, psicológica, económica o política y, por ende, supone la dominación de unos y la subordinación de otros.
ACL anterior crucitae ligament anamtomy and physical therapy Mahmoud Bagago
This document discusses the anatomy and mechanics of the knee joint, with a focus on the anterior cruciate ligament (ACL). It describes the signs and symptoms of an ACL injury, including a popping sound, knee instability, swelling and pain. Clinical exams like the Lachman and pivot shift tests can help diagnose an ACL tear, which is also visible on MRI. ACL injuries may be accompanied by damage to other structures like the meniscus or MCL ligament. Management options include physical therapy initially or ACL reconstruction surgery.
Este documento presenta un tutorial extenso sobre programación batch, comenzando con una definición de los archivos batch y cómo se crean. Luego explica comandos básicos como ECHO, CD, PAUSE y EXIT, así como conceptos como redireccionamiento, variables, condiciones IF y etiquetas. Finalmente, cubre temas más avanzados como bombas lógicas, contraseñas y el uso de variables predefinidas. El objetivo general es proporcionar a los lectores una introducción completa a la programación batch para que puedan empezar a crear sus
The document lists several topics including Wellcome, Stephanie, THE DAYS OF Rainbow, Little Motherland, Making projects, and Master-classes. It appears to be a list of activities or topics but provides no other context or details about the items listed.
This is a summary of my past client brand work through my digital creative agency and private social network, SQUA.RE. My skills range from digital marketing (SEO expert), creative strategy, quality content creation, managing web development and creating unique customer engagements and experiences.
The document describes Secrets Akumal Riviera Maya, an all-inclusive adult-only resort located in Akumal, Mexico along the Riviera Maya. It provides details about the resort's amenities including 434 suites, 11 pools, a spa, multiple restaurants and bars, activities like snorkeling and golf, and an example room rate quote. Akumal is known for its turtle population and proximity to beaches, ruins, and the airport.
Una red de computadoras conecta equipos informáticos para compartir información y recursos a través de dispositivos físicos. Las redes permiten compartir impresoras, archivos, lectores de CD/DVD y acceso a Internet entre múltiples computadoras para asegurar la disponibilidad de la información, aumentar la velocidad de transmisión de datos y reducir costos.
O documento discute a importância da educação financeira para jovens, abordando tópicos como gestão de orçamento, controle de gastos, eliminação de dívidas. A palestra "E quando eu me formar?" tem como objetivo fazer os jovens refletirem sobre seus planos de carreira e finanças pessoais após a formatura.
Degustaite Piëmontese wijnen bij Wijngilde Donsa. Schuimwijn, parelende wijn, vermouth, witte en rode wijn. Een kort, maar mooi overzicht van het potentieel van deze schitterende regio. Naast een geweldig wijngebied is Piëmonte culinair puur verwennerij, en geografisch adembenemend.
Este documento resume las principales características de CSS3 como pseudo-elementos, pseudo-clases, bordes redondeados, sombras, fondos múltiples, gradientes de color, opacidad, transformaciones, transiciones y animaciones. También cubre la capacidad de CSS3 para agregar sombreado de texto, columnas, fuentes personalizadas y medios condicionales. El objetivo es dar a conocer las nuevas funcionalidades de CSS3 para lograr estilos más simples y ahorrar tiempo de desarrollo.
HTML Tour - Programación de Videojuegos HTML5Plain Concepts
En la charla veremos características comunes de los juegos y su aplicación práctica en canvas HTML5. Analizaremos varios tipos de juegos, tanto 2D como 3D y estudiaremos las diferentes maneras implementarlos mientras comentamos las partes clave de su estructura. Para finalizar echaremos un vistazo al framework desarrollado por PlainConcepts para la creación de diferentes tipos de juegos 2D y 3D en HTML5.
El documento describe varios elementos y técnicas de HTML5 para interactuar con controles de interfaz de usuario, incluyendo:
1) El modelo de objetos de documento (DOM) que proporciona un API para acceder y modificar elementos de una página web.
2) Los elementos <video> y <audio> para reproducir video y audio de forma nativa en HTML5.
3) El elemento <canvas> que permite dibujar gráficos mediante JavaScript.
4) El lenguaje de gráficos vectoriales SVG para dibujar formas, texto, y aplicar transformaciones
Este documento presenta ejemplos de uso de hojas de estilo CSS y JavaScript para la validación de formularios web. Se explican conceptos básicos como la creación de hojas de estilo CSS, la sintaxis de JavaScript y su uso para capturar eventos del usuario como clics de botones. Se proveen cuatro ejemplos con código que muestran aplicaciones como cambiar el color de fondo de una página usando JavaScript.
Este documento presenta un curso de HTML5. Incluye información sobre el instructor Carlos Azaustre, un temario con 10 temas que cubren etiquetas HTML5, CSS3, responsive design, JavaScript, jQuery y más. También incluye el horario del curso distribuido en 4 días con sesiones por la mañana y tarde, y descripciones breves de los temas principales a cubrir.
Canvas (o lienzo traducido al español) es un elemento HTML incorporado en HTML5 que permite la generación de gráficos dinámicamente por medio del scripting. Entre otras cosas, permite la renderización interpretada dinámica de gráficos 2D y mapas de bits, así como animaciones con estos gráficos. Se trata de un modelo de procedimiento de bajo nivel, que actualiza un mapa de bits y no tiene una gráfica de escena integrada.
Este documento describe los conceptos básicos de JavaScript, incluyendo: (1) su función de extender las capacidades del HTML y ser interpretado por el navegador, (2) ejemplos de mostrar datos y mensajes, y (3) el uso de variables, condicionales, bucles y funciones. También cubre temas como eventos de teclado, gráficos de canvas, y la interacción con elementos multimedia.
Este documento describe el formato SVG (Scalable Vector Graphics), un lenguaje de gráficos vectoriales bidimensionales basado en XML. SVG permite crear imágenes vectoriales interactivas para la web que son escalables, pequeñas en tamaño de archivo y buscables. El documento explica cómo crear y usar archivos SVG en páginas HTML, así como herramientas para editar gráficos vectoriales como Inkscape. Finalmente, proporciona ejemplos de uso de SVG en 3D.
Este documento resume conceptos clave de CSS como CSS3, diseño web responsive, SASS, LESS y CSS orientado a objetos. Brevemente describe las características principales de CSS3 como bordes, transformaciones, fondos múltiples y gradientes. También cubre selectores avanzados de CSS3, animaciones, transiciones y media queries. Finalmente, introduce conceptos como diseño web responsive, preprocesadores como SASS y LESS, y el enfoque de CSS orientado a objetos.
Este documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 incluye nuevos elementos semánticos como <header>, <nav>, <article>, <section> y <footer>. También presenta nuevos elementos multimedia como <video> y <audio>. CSS3 incluye nuevas posibilidades para decoración como fondos múltiples, RGBa, text-shadow, box-shadow y transformaciones. El documento recomienda usar prefijos de proveedor y polyfills para mejorar la compatibilidad, y proporciona recursos adicionales para aprender más sobre estas
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIAManuel Razzari
Presentado por Camilo Kawerín y Manuel Razzari el 28/11/2012 en http://ux2012.com.ar La Jornada Anual de Experiencia de Usuario en Argentina, organizado por IxDA Buenos Aires.
Este documento presenta las nuevas características de CSS3, incluyendo bordes redondeados, fondos con imágenes, opacidad, sombras de texto, recorte de texto, fuentes web, transiciones, diseño multicolumna y más. Explica los prefijos de los navegadores necesarios para probar estas características y proporciona ejemplos interactivos para ilustrar su uso.
Este documento introduce los frameworks CSS. Explica que son herramientas que abstraen tareas repetitivas de desarrollo CSS para aumentar la productividad. Explora ventajas como código más consistente y mantenible, e inconvenientes como curva de aprendizaje. Luego resume algunos frameworks populares como 1KB Grid, 960 Grid System, Blueprint y Bootstrap, destacando sus características como uso de retículas y facilidad de uso.
Este documento presenta una introducción a los frameworks CSS. Explica brevemente qué son los frameworks CSS y sus ventajas e inconvenientes. Luego, ofrece una panorámica de varios frameworks populares como 1Kb CSS Grid, 960 Grid System, Blueprint, Foundation y Bootstrap, describiendo sus características principales. Finalmente, discute algunos factores a considerar a la hora de elegir un framework para un proyecto en particular.
Este documento presenta una introducción al taller práctico básico de HTML y CSS. Explica conceptos clave como la declaración de tipo de documento, las etiquetas <head> y <body>, e introduce los principios básicos de CSS como separar la estructura del documento de su presentación y el uso de hojas de estilo externas. A continuación, guía al lector a través de ejemplos prácticos de cómo aplicar estilos CSS a un documento HTML para darle formato y diseño.
El documento presenta información sobre HTML5, incluyendo sus características principales como etiquetas semánticas, multimedia, CSS3 y animaciones. También discute conceptos como diseño web responsivo y el uso de JavaScript para crear experiencias interactivas en 3D.
El documento describe los conceptos básicos de CSS como selectores, declaraciones, propiedades, valores y el modelo de caja. Explica propiedades como margen, borde y relleno y conceptos como herencia, orden de declaración y especificidad. También cubre buenas prácticas de CSS como organización, comentarios y preprocesadores.
Este documento presenta una serie de ejercicios de programación en C resueltos. Los ejercicios cubren temas como estructuras de control, funciones, vectores, matrices, entrada y salida, y algoritmos numéricos. Cada ejercicio viene acompañado de su solución comentada. El documento está organizado en ocho prácticas con múltiples ejercicios cada una, cubriendo conceptos y técnicas de programación cada vez más avanzados.
El documento describe los tipos de ataques SQL Injection y cómo explotar vulnerabilidades ciegas de SQL Injection para extraer información de bases de datos. Explica métodos para descargar archivos de forma remota de bases de datos vulnerables, así como herramientas y técnicas para automatizar ataques ciegos de SQL Injection. También proporciona consejos para identificar objetivos clave y evadir sistemas de detección de intrusos durante ataques de SQL Injection.
This document provides an introduction and overview of batch file programming in Microsoft Windows. It discusses what batch files are, how they are created using text editors, and how they differ from interactive and batch modes. It also provides examples of basic batch file commands like ECHO and PAUSE. The document lists and describes many common internal and external commands that can be used in batch files to perform tasks and calls applications. It aims to help novice to advanced programmers understand batch file programming.
El documento describe los pasos para configurar PostgreSQL en un entorno de desarrollo local, incluyendo la creación de un usuario con privilegios de superusuario, la creación de bases de datos y tablas, y la inserción de datos. Explica cómo crear un usuario con los mismos privilegios que el usuario del sistema, permitiendo ejecutar comandos PostgreSQL sin necesidad de especificar credenciales. Además, describe cómo crear bases de datos y tablas, y poblar las tablas con datos de ejemplo.
Este documento presenta preguntas y respuestas sobre diferentes tipos de actuadores, con un enfoque en los actuadores eléctricos. Explica que los actuadores son dispositivos que permiten ejecutar acciones, y clasifica los actuadores según la energía que utilizan, incluyendo neumáticos, hidráulicos y eléctricos. Luego describe varios tipos de actuadores eléctricos como relés, motores de corriente continua, servomotores y motores paso a paso, explicando sus características y aplicaciones.
Este documento describe las primitivas básicas de dibujo en 3D en OpenGL, incluyendo puntos, líneas, triángulos, cuadriláteros y polígonos generales. Explica cómo dibujar estas primitivas, ajustar sus propiedades como el tamaño y grosor, y cómo crear mallas para rellenar superficies. También cubre temas como la visualización de caras frontales y posteriores, modos de dibujo y reglas para los polígonos.
El documento describe el método de bisección para encontrar raíces de una función. Este método involucra repetidamente dividir el intervalo que contiene la raíz a la mitad basado en si la función es positiva o negativa a mitad del intervalo, hasta que la aproximación a la raíz cambia menos de un porcentaje especificado. Se provee un ejemplo completo de aplicar este método para encontrar la raíz de la función x4 + 3x3 - 2 hasta un error porcentual del 1%.
SNAP es una herramienta CASE para desarrollar aplicaciones en sistemas AS/400 de IBM. Proporciona un entorno integral de trabajo siguiendo estándares SAA de IBM. Implementa el esquema entidad-relación y genera automáticamente la base de datos y programas nativos de AS/400. Incluye utilitarios para definir estándares, documentar, regenerar sistemas, y controlar el acceso al repositorio central con cinco niveles de seguridad.
Este documento presenta una introducción al lenguaje de programación PHP. Explica cómo funciona un servidor web al recibir una solicitud de una página, ya sea estática o dinámica. Luego resume la historia de PHP, comenzando como un conjunto de scripts Perl llamado PHP/FI creado en 1995 para controlar accesos en línea. También cubre cómo dar dinamismo a páginas web tanto en el lado del cliente como en el del servidor, e introduce conceptos como instalación de Apache y PHP.
Este documento presenta las principales modificaciones y características del lenguaje C++. Comienza describiendo modificaciones menores realizadas respecto a C, como el cambio en la extensión de los archivos (.cpp), la introducción de comentarios con doble barra, y simplificaciones en la declaración de variables enumeradas y estructuradas. Luego explica modificaciones mayores relacionadas con la programación orientada a objetos en C++, incluyendo clases, herencia, polimorfismo, y temas avanzados como plantillas y manejo de excepc
Este documento presenta una guía de aprendizaje de Python. Python es un potente lenguaje de programación de código abierto que es fácil de aprender e incluye estructuras de datos avanzadas y programación orientada a objetos. La guía introduce los conceptos y características básicas de Python como cálculos, control de flujo, funciones, estructuras de datos, módulos, E/S y más, preparando al lector para aprender y utilizar la biblioteca estándar de Python.
El documento proporciona una guía sobre el uso de comandos Batch. Explica conceptos como variables, bucles, comandos IF y FTP. Se dividen los temas en 10 partes que cubren desde los primeros comandos y sintaxis hasta funciones avanzadas como el uso de registros y redireccionamiento. El objetivo es enseñar a los lectores a crear scripts Batch para automatizar tareas.
Este documento presenta una introducción al lenguaje de programación PHP. PHP se usa principalmente para crear páginas web dinámicas mediante la interpretación del lado del servidor. El documento describe la sintaxis básica de PHP, incluidos tipos de datos, variables, constantes, expresiones, estructuras de control y funciones. También cubre temas como arrays, bibliotecas de funciones y la diferencia entre páginas web estáticas y dinámicas.
This document provides instructions for configuring a network with three switches (S1, S2, S3) and three host PCs using various VLANs and Spanning Tree Protocol (STP). The tasks include preparing the network topology, clearing switch configurations, configuring host PCs, enabling VLANs through VTP, configuring trunk links and native VLANs, and verifying STP operation.
Los corchetes [ ] y guiones largos (--) se utilizan principalmente para incorporar información adicional o aclaratoria de forma similar a los paréntesis. Los corchetes también se usan para indicar cuando parte de un texto ha sido omitido o cuando palabras de un verso no caben en la línea anterior. El guión largo puede usarse para encerrar incisos o interrupciones en un discurso.
El documento describe diferentes tipos de sensores de presión, clasificándolos en mecánicos, neumáticos, electromecánicos y electrónicos. Entre los sensores mecánicos se encuentran los tubos de Burdón, elementos en espiral, diafragmas y fuelles. Los sensores electromecánicos convierten la señal mecánica en eléctrica usando resistencias, imanes o efectos piezoeléctricos. Finalmente, los sensores electrónicos de vacío incluyen térmicos, de ionización y de
Los actuadores son dispositivos mecánicos que proporcionan fuerza para mover otro dispositivo. Existen tres tipos principales de actuadores dependiendo de la fuente de fuerza: neumáticos (presión de aire), hidráulicos (presión hidráulica) y eléctricos (motor eléctrico). Los actuadores rotatorios generan fuerza rotatoria y pueden ser neumáticos, hidráulicos o eléctricos. El dimensionamiento de un actuador requiere determinar el torque necesario y elegir un modelo a
El documento describe diferentes métodos de diferenciación numérica por 3 y 5 puntos para aproximar la derivada de una función. Presenta las fórmulas para aproximar la derivada usando puntos hacia la derecha, izquierda y en el medio para 3 puntos, y una fórmula para 5 puntos. Luego aplica los métodos a una función exponencial para comparar los errores obtenidos.
Este documento presenta los principios fundamentales del método de agricultura biointensiva para establecer un huerto familiar. Describe la importancia de un suelo vivo con vida abundante, materia orgánica, minerales, plantas y aire/agua. Explica los pasos para comenzar un huerto, incluyendo elegir el lugar, verificar la calidad del suelo y seguir principios como la doble excavación, uso de composta y siembra cercana para cultivar de forma intensiva en poco espacio y mejorar el suelo.
Los puentes son estructuras esenciales en la infraestructura de transporte, permitiendo la conexión entre diferentes
puntos geográficos y facilitando el flujo de bienes y personas.
La energía radiante es una forma de energía que
se transmite en forma de ondas
electromagnéticas esta energía se propaga a
través del vacío y de ciertos medios materiales y
es fundamental en una variedad naturales y
tecnológicos
Equipo 4. Mezclado de Polímeros quimica de polimeros.pptxangiepalacios6170
Presentacion de mezclado de polimeros, de la materia de Quimica de Polímeros ultima unidad. Se describe la definición y los tipos de mezclado asi como los aditivos usados para mejorar las propiedades de las mezclas de polimeros
1. Introduccion a las excavaciones subterraneas (1).pdfraulnilton2018
Cuando las excavaciones subterráneas son desarrolladas de manera artesanal, se conceptúa a la excavación como el “ que es una labor efectuada con la mínima sección posible de excavación, para permitir el tránsito del hombre o de
cémilas para realizar la extracción del material desde el
frontón hasta la superficie
Cuando las excavaciones se ejecutan controlando la sección de excavación, de manera que se disturbe lo menos posible la
roca circundante considerando la vida útil que se debe dar a la roca, es cuando aparece el
concepto de “ que abarca,
globalmente, al proceso de excavación, control de la periferia, sostenimiento, revestimiento y consolidación de la excavación
4. HTML5 y CSS3
HTML5
Para usar HTML5 se utiliza el doctype.
<!DOCTYPE HTML>
Es compatible con versiones antiguas de navegadores.
5. HTML5 y CSS3
HTML5
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Hello world!</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="code.js"></script>
</head>
<body>
<hgroup>
<h1>Hola HTML5!</h1>
<h2>Esta es mi primera web</h2>
</hgroup>
</body>
</html>
6. HTML5 y CSS3
HTML5
En HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
En HTML5
<metacharset="utf-8">
En HTML4
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
En HTML5
<link rel="stylesheet" href="style.css"/>
En HTML4
<script src="code.js" type="text/javascript"></script>
En HTML5
<script src="code.js"> </script>
7. HTML5 y CSS3
HTML5
En HTML4 sólo existía un elemento contenedor sin significado
semántico <div>.
En HTML5 existen Div, Section y Article que además de cumplir con una
comportamiento similar a div aportan semántica.
<div>
Es el contenedor genérico, es un elemento a nivel de bloque sin sentido adicional
semántico.
<section>
Es un "documento genérico o sección de aplicación"
Normalmente, tiene un header y suele tener un footer .
<article>
Es una parte independiente del documento. También suele llevar un título y un
footer.
8. HTML5 y CSS3
HTML5
<aside>
Se usa para definir la sidebar.
<footer>
La parte más baja, donde tenemos toda la información
<header>
La cabecera de la web.
<nav>
Se usa para definir el menú o la navegación de la página.
12. HTML5 y CSS3
HTML5
Nuevas Características
• Audio & Video
• Canvas
• Almacenamiento local
• WebSockets
• Semántica
• Compatibilidad hacia atrás
• Eficacia en el renderizado
13. HTML5 y CSS3
HTML5
Audio
La etiqueta <audio> define sonido o cualquier tipo de
streaming de audio.
Atributos:
• autoplay
• controls
• loop
• preload
• src
14. HTML5 y CSS3
HTML5
La etiqueta <command> define un botón de comando o un radiobutton o un
checkbox.
Atributos:
• checked
• disabled
• icon
• label
• radiogroup
• type
<command onclick="alert('Hello World')">Haz click aquí</command>
15. HTML5 y CSS3
HTML5
La etiqueta <mark> se usa para destacar una palabra o una parte del texto.
La etiqueta <hgroup> se usa para agrupar titulares (h1,h2)
<hgroup>
<h1>Bienvenidos a mi web</h1>
<h2>La web de HTML5</h2>
</hgroup>
La etiqueta <progress> se usa para visualizar el progreso de una tarea
que se esté realizando
<progress>
<span id="objprogress">25</span>%
</progress>
16. HTML5 y CSS3
HTML5
La etiqueta <source> se usa para definir la fuente de un archivo de audio o
video.
<audio controls="controls">
<source src="cancion.ogg" type="audio/ogg" />
<source src="cancion.mp3" type="audio/mpeg" />
</audio>
La etiqueta <summary> contiene el encabezado para el elemento
details, que se usa para dar detalles sobre un documento o parte de un
documento.
<details>
<summary>Copyright por mi persona.</summary>
<p>Lorem ipsum dolor sit amet....</p>
</details>
18. HTML5 y CSS3
HTML5
Placeholder
Un placeholder es un texto que se muestra para ayudar al
usuario y darle información.
En cuanto se hace click en el input, desaparece:
19. HTML5 y CSS3
HTML5
Autofocus
<input name="q" autofocus>
El autofocus no funciona en todos los navegadores, así que si quiere usar y
tener máxima compatibilidad, se puede usar JavaScript.
<input id="i" autofocus>
<script>
function auto(){
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("i").focus();
}
}
window.onload = auto;
</script>
20. HTML5 y CSS3
HTML5
Tipos de Texto
Información que se puede utilizar para desplegar y/o validar el tipo de texto
ingresado.
<input type="email">
<input type=“url">
<input type=“tel">
<input name="xx" type="range" min="0“ max="10“ step="6“ value="4">
21. HTML5 y CSS3
HTML5
Tipos de input para elegir fechas
type=...
• "date"
• "month"
• "week"
• "time"
• "datetime"
• "datetime-local"
• "datetime" picker
23. HTML5 y CSS3
HTML5
Un lienzo permite dibujar en el documento HTML y actualizar dinámicamente estos
dibujos, por medio de JavaScript.
También puede disparar acciones a partir de los eventos generados por el usuario.
Permite un funcionamiento similar al plugin de Flash, en lo que respecta a renderización
de contenidos dinámicos.
<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>
24. HTML5
Para utilizar el canvas se debe referenciar primero el elemento canvas y adquirir
su contexto.
var canvas = document.getElementById('entorno_canvas');
var context = canvas.getContext('2d');
Una vez adquirido, se puede empezar a dibujar en la superficie
del canvas usando la API.
HTML5 y CSS3
25. HTML5 y CSS3
HTML5
var canvas = document.getElementById('micanvas');
//Accedo al contexto de '2d' de este canvas, necesario para
dibujar
var contexto = canvas.getContext('2d');
//Dibujo en el contexto del canvas
contexto.fillRect(50, 0, 10, 150);
26. HTML5 y CSS3
HTML5
beginPath
Le dice al contexto del canvas que se va a empezar a dibujarse un camino, no tiene
ningún parámetro.
Una vez invocada la función se puede empezar a dibujar el camino añadiendo segmentos
para completarlo con las diferentes funciones.
moveTo
Sirve para definir el punto donde se comienza a dibujar el segmento.
No dibuja nada, recibe como parámetro los puntos x e y donde ha de moverse el puntero
para dibujo.
27. HTML5 y CSS3
HTML5
lineTo
Dibuja una línea recta desde la posición actual hasta el punto (x,y) que se
indique como parámetro. La posición actual del camino se establece indicado
previamente con un moveTo(), o donde se haya terminado el trazo
anteriormente dibujado.
fill
Este método del contexto del canvas sirve para rellenar de color el área
circunscrita por un camino.
Para rellenar de color un path, el path tiene que estar cerrado, por lo que, si
no lo está, automáticamente se cerrará con una línea recta hasta el primer
punto del camino, es decir, donde se comenzó a dibujar.
28. HTML5 y CSS3
HTML5
closePath
Sirve para cerrar un path, volviendo a su punto inicial de dibujo,
no recibe ningún parámetro.
fillText
Permite dibujar texto en el canvas:
contexto.font = "bold 12px sans-serif";
contexto.fillText("Hola", 5, 5);
stroke
Es similar al método fill pero traza solo la silueta y no la rellena.
30. HTML5 y CSS3
HTML5
Imágenes
Para dibujar una imagen, se usa la función drawImage(), con distintos parámetros
según lo que se quiera hacer:
• drawImage(img, x, y): dibuja la imagen img en (x, y)
• drawImage(img, x, y, sw, sh): dibuja la imagen img en (x, y) después de
establecer las dimensiones sw x sh.
31. HTML5 y CSS3
HTML5
Imágenes
Se pueden cargar de dos maneras:
• Usando una imagen cargada previamente con una etiqueta <img> en el
documento:
<img id=“imagen" src="img/img.png" alt="" width="177" height="113">
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = document.getElementById("imagen");
context.drawImage(img, 0, 0);
};
</script>
• Cargando la imagen completamente desde javascript:
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "img/imagen.png"; //Necesita especificarse donde está la imagen
context.drawImage(img, 0, 0);
32. HTML5 y CSS3
HTML5
Gradientes
Son transiciones suaves entre dos colores:
• createLinearGradient(x0, y0, x1, y1): pinta a lo largo de una
dirección indiada por la línea que va desde el punto (x0, y0) hasta
(x1, y1).
• createRadialGradient(x0, y0, r0, x1, y1, r1): pinta a lo largo de un
cono, con círculo inicial está en (x0, y0) con radio r0, y con círculo
final en (x1, y1) con radio r1.
Se debe crear un objeto Gradient:
var my_gradient = contexto.createLinearGradient(0, 0, 300, 0);
33. HTML5 y CSS3
HTML5
Gradientes
Se deben añadir colores de parada en las posiciones del gradiente. Las
posiciones van de 0 a 1.
my_gradient.addColorStop(0, "black");
my_gradient.addColorStrop(1, "white");
Para dibujar algo con gradiente, se asigna el objeto gradient a la propiedad
fillStyle, y se dibuja algo con las técnicas vistas
Contexto.fillStyle = my_gradient;
contexto.fillRect(0, 0, 50, 50);
36. TDIVJ2D – Tecnólogo Informático
Audio
<audio id="buttonactive">
<source src="media/button_active.mp3" />
<source src="media/button_active.ogg" />
</audio>
<script>
document.getElementById("buttonactive").play();
</script>
The play function plays the audio from the elapsed time, which is stored in the
currentTimeproperty. The default value of currentTime is zero. The following
code plays the audio from 3.5 seconds:
<script>
document.getElementById("buttonactive").currentTime = 3.5;
document.getElementById("buttonactive").play();
</script>
<script>
document.getElementById("buttonactive").pause();
</script>
<script>
document.getElementById("buttonactive").volume = 0.3;
</script>
HTML5 y CSS3
37. HTML5 y CSS3
HTML5
Incluye la etiqueta <video>, <audio/>
• Sin restricciones para cualquier codec de audio/video.
• No hay ninguna combinación de un solo codec/contenedor que funcione en todos los
navegadores.
Por problemas de soporte de navegadores, dentro de una etiqueta video/audio se
pueden agregar múltiples src para distintos formatos y codecs
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
39. HTML5 y CSS3
HTML5
Sesión:
Período de tiempo continuo durante el cuál se comunica un navegador
con una aplicación web. Durante este tiempo es posible compartir
información entre el navegador y la aplicación.
Variable de sesión:
Estructura de datos común a un navegador y a una aplicación web
donde se guarda información sobre la sesión. Esta estructura es nueva
para cada ventana del navegador.
Cookie:
Es el mecanismo clásico que se ha utilizado hasta ahora para guardar,
acceder y modificar información existente en una sesión, dentro de un
archivo en el cliente.
40. HTML5 y CSS3
HTML5
Web Storge
HTML5 introduce dos mecanismos para almacenar información estructurada
en el lado del cliente.
• sessionStorage
permite guardar información en el lado del cliente.
es un comportamiento similar a las variables de sesión.
• localStorage
permite guardar información sobre un sitio web.
esta información puede ser compartida entre ventanas y/o pestañas
distintas. La información permanece aunque se termine la sesión.
41. HTML5 y CSS3
HTML5
Web Storge
A pesar de tener un comportamiento similar a las cookies, tiene
varias ventajas adicionales:
• las cookies están limitadas a 4 KB de espacio, mientras que
con SessionStorage se pueden guardar varios MB (depende
de cada navegador).
• las cookies se envían en cada petición al servidor, lo cual
aumenta la sobrecarga, mientras que la información guardada
con SessionStorage no se envía automáticamente (aunque se
puede configurar si es necesario).
42. HTML5 y CSS3
HTML5
Web Storge
Los sitios pueden agregar datos al objeto sessionStorage, y se
podrá acceder desde cualquier pestaña del mismo sitio abierto
en esa ventana.
sessionStorage.setItem('key', 'value');
//Crea una nueva variable en el objeto sessionStorage
sessionStorage.getItem('key');
//Accede a la variable 'key'
var a = sessionStorage.key; //Otra forma de acceso
sessionStorage.removeItem('key'); //Eliminar variable
43. HTML5 y CSS3
HTML5
Web Storge
<body>
<script>
function guardarEstado(){
sessionStorage.setItem('state', document.getElementById('cb').checked);
}
function mostrarEstado(){
if(sessionStorage.getItem('state') != null){
alert(sessionStorage.getItem('state'));
}else{
alert('Haz click sobre el checkbox para guardar la información
sobre su estado');
}
}
</script>
<section>
<input type="checkbox" id="cb" onchange="guardarEstado()"/> Marca el checkbox
<br/>
<input type="button" onclick="mostrarEstado()" value="Info de SessionStorage"/>
</section>
</body>
44. HTML5 y CSS3
HTML5
Web Storge
El mecanismo LocalStorage de almacenamiento está diseñado para que el
almacenamiento sea accesible desde ventanas distintas (que tengan abierto el
mismo sitio web), y se prolongue más allá de la sesión actual.
• Las aplicaciones web pueden almacenar megabytes de datos.
• Las cookies no son aconsejables en este caso, ya que se transmiten con
cada solicitud.
• El funcionamiento es el mismo que con sessionStorage, pero usando el
objeto localStorage en su lugar.
45. HTML5 y CSS3
HTML5
Web Storge
<body>
<script>
function guardarEstado(){
localStorage.setItem('state', document.getElementById('cb').checked);
}
function mostrarEstado(){
if(localStorage.getItem('state') != null){
alert(localStorage.getItem('state'));
}else{
alert('Haz click sobre el checkbox para guardar la información
sobre su estado');
}
}
</script>
<section>
<input type="checkbox" id="cb" onchange="guardarEstado()"/> Marca el checkbox
<br>
<input type="button" onclick="mostrarEstado()" value="Info de LocalStorage"/>
</section>
</body>
47. HTML5 y CSS3
HTML5
Drag & Drop
Es una característica, que permite poder arrastrar elementos de un lado a otro
en la interfaz.
En HTML5 aparecen
• Nuevos eventos
dragstart, drag, dragenter, dragover,
dragleave, drop, dragend.
• Atributo draggable="true“ para declarar que un elemento se puede
arrastrar.
• Posibilidad de establecer la imagen "ghost" mostrada mientras se
desplaza.
• Efectos asociados a copiar, mover…
48. HTML5 y CSS3
HTML5
Drag & Drop(Eventos)
• dragstart: Comienza el arrastrado. El "target" del evento será el elemento
que está siendo arrastrado.
• drag: El elemento se ha desplazado. El "target" del evento será el elemento
desplazado.
• dragenter: Se activa al entrar un elemento que se está arrastrando, dentro
de un contenedor. El "target" del evento será el elemento contenedor.
• dragleave: El elemento arrastrado ha salido del contenedor. El "target" del evento
será el elemento contenedor.
49. HTML5 y CSS3
HTML5
Drag & Drop (Eventos)
•dragover: El elemento ha sido movido dentro del contenedor. El "target" será el
contenedor. Como el comportamiento por defecto es cancelar "drops", la
función debe devolver false o llamar a preventDefault para indicar que se puede
soltar dentro de ese contenedor.
• drop: El elemento arrastrado ha sido soltado en un contenedor. El "target" del
elemento será el contenedor.
• dragend: Se ha dejado de arrastrar el elemento, se haya dejado en un
contenedor o no. El "target" del evento es el elemento arrastrado.
50. HTML5 y CSS3
HTML5
Drag & Drop
Para utilizar Drag & Drop:
• Definir un objeto como "arrastrable", estableciendo su propiedad
draggable="true“(por defecto "true" en imágenes).
• Definir el comportamiento adecuado cuando se detecta un evento
relacionado con Drag & Drop:
51. HTML5 y CSS3
HTML5
Drag & Drop
<body>
<div class="area" align="center">
<span>Elige un objeto para arrastrar</span><br/>
<img id="rectangulo" src="rectangulo.jpg" width="120" height="82"/>
<img id="triangulo" src="triangulo.jpg" width="145" height="168" />
</div>
<div class="area" align="center">
<span>Suelta el objeto aquí</span>
<div id="lista"></div>
</div>
</body>
53. HTML5 y CSS3
HTML5
Drag & Drop
<script>
function empezar(e){
e.dataTransfer.setData('Text', this.id);
e.dataTransfer.effectAllowed = 'move';
}
function anyadirObjecto(e) {
e.dataTransfer.dropEffect = 'move';
return false;
}
function soltar (e) {
imagen = new Image();
imagen.src = e.dataTransfer.getData('Text') + '.jpg';
document.getElementById('lista').appendChild(imagen);
}
</script>
54. HTML5 y CSS3
HTML5
Drag & Drop
El elemento a mover, tiene su propiedad draggable a 'true'.
El contenedor puede recibir información de los elementos
arrastrados desde otros navegadores u otras aplicaciones.
Si utilizamos setData y getData del objeto dateTransfer expuesto en el objeto del
evento (Event Object).
55. HTML5 y CSS3
HTML5
Drag & Drop
Tipos para almacenar la Información:
• Texto: Utilizamos text/plain.
event.dataTransfer.setData("text/plain", "Este es el texto a arrastrar");
• Link: Utilizamos text/plain o text/uri-list.
event.dataTransfer.setData("text/plain", "http://www.online.imaginaformacion.com");
event.dataTransfer.setData("text/uri-list", "http://www.online.imaginaformacion.com");
• HTML/XML: Utilizamos text/plain, text/xml o text/html.
event.dataTransfer.setData("text/html", "Hola <strong>alumnos</strong>");
event.dataTransfer.setData("text/plain", "Hola alumnos");
56. HTML5 y CSS3
HTML5
Drag & Drop
Arrastrando archivos
• Un archivo local es arrastrado con el tipo application/x-moz-file.
• Las páginas web sin ciertos privilegios, no son capaces de recuperar o
modificar datos de este tipo.
• Debido a que un archivo no es una cadena, debe utilizar el
método mozSetDataAt (en firefox) para asignar los datos.
• Del mismo modo,cuando se recuperan los datos, debe utilizar el
método mozGetDataAt (en firefox).
event.dataTransfer.mozSetData("application/x-moz-file", file, 0);
57. HTML5 y CSS3
HTML5
Drag & Drop
Imágenes:
La mayoría de los navegadores no soportan actualmente arrastrar imágenes.
Por lo general lo que se arrastra es la url de la propia imagen.
Se Utiliza text/plain o text/uri-list.
event.dataTransfer.setData("text/plain", imagenURL);
event.dataTransfer.setData("text/uri-list", imagenURL);
En chrome podemos utilizar:
event.dataTransfer.setData("image/png", stream, 0);
Para saber más acerca de la url de Datos,
https://developer.mozilla.org/en/data_URIs
59. HTML5 y CSS3
HTML5
Sprite CSS
Permite ir recopilando las imágenes de la web una a una y después
colocarlas todas en un png.
Después desde CSS se escriben las coordenadas de todas y cada
una de las imágenes.
Sprite Me, es un programa que se encarga de esta engorrosa tarea por
nosotros.
Utiliza menos ancho de banda, ya que con una sola HTTP-Request puede
cargar todas las imágenes desde el servidor.
Cada <img> o background-image es una HTTP_Request.
60. HTML5 y CSS3
HTML5
Sprite CSS
Antes
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/img1.jpg')}
#nav li a:hover.item1 {background-image:url('../img/img1.jpg')}
#nav li a.item2 {background-image:url('../img/img2.jpg')}
#nav li a:hover.item2 {background-image:url('../img/img5.jpg')}
...
61. HTML5 y CSS3
HTML5
Sprite CSS
Ahora
#nav li a {background-image:url('../img/SpriteImage.jpg')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px} #nav li
a.item2 {background-position:0px
-143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
63. HTML5 y CSS3
CSS3
CSS3 es totalmente compatible con HTML5 y sus nuevas etiquetas.
Los nuevos selectores dan más flexibilidad a la hora de
seleccionar unos u otros elementos.
Selectores
E:disabled /*Elemento que esta desactivado*/
E:checked /*Elemento es que esta marcado (radiobutton, checkbox)*/
E[foo^="bar"]/*El que el valor del atributo “foo” de E comienza con la cadena “bar”.*/
E[foo$="bar"]/*El valor del atributo “foo” de E acaba exactamente con la cadena “bar”.*/
E[foo*="bar"]/*el atributo “foo” de E contiene la cadena “bar”.*/
Muchos selectores más...
64. HTML5 y CSS3
CSS3
Border radius
Permite crear cajas con bordes redondeados fácilmente.
Para dotar mayor compatibilidad se usan los prefijos -webkit- y -moz- para
los navegadores basados en Webkit (Safari y Chrome) y los de Mozilla
(Firefox).
65. HTML5 y CSS3
CSS3
Box Shadow
Ofrece la posibilidad de añadir una sombra a nuestra caja.
Admite cuatro parámetros:
• desplazamiento x
• desplazamiento y
• desenfoque
• color de la sombra
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
66. HTML5 y CSS3
CSS3
Text shadow
Ofrece la posibilidad de añadir una sombra al texto.
Admite cuatro parámetros:
• desplazamiento x
• desplazamiento y
• desenfoque
• color de la sombra
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
67. HTML5 y CSS3
CSS3
Multiple background
Permite agregar varios fondos de forma simultánea.
Tiene las mismas propiedades que background.
(varias direcciones de imágenes).
/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
68. HTML5 y CSS3
CSS3
Background size
Permite variar el tamaño del background.
Acepta dos parámetros anchura de x e y.
body {
background: url(path/to/image.jpg) no-repeat;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
@font-FACE
Permite agregar cualquier tipografía local o desde un servidor de Fonts.
@font-face {
font-family: Gentium;
src: url(http://site/fonts/Gentium.ttf);
}
71. HTML5 y CSS3
CSS3
Pseudo Clases
Se utilizan para agregar estilo a elementos HTML, cuando una determinada condición se
cumple. La condición depende de la pseudo-clase que se añade al selector.
Las pseudo-clases se indican con: un selector(identificador de clase, selector de
atributos, etc) y a continuación, seguido de dos puntos (:) se escribe la pseudo-clase.
:hover, se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por
encima de un elemento.
:active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el
ratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente
imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que lo
suelta.
:focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el
elemento está seleccionado. Normalmente se aplica a los elementos <input> de los
formularios cuando están activados y por tanto, se puede escribir directamente en esos
campos.
72. HTML5 y CSS3
CSS3
Pseudo Clases
:first-child, selecciona el primer elemento hijo de un elemento.
:link, se aplica a todos los enlaces que todavía no han sido visitados por el usuario.
:visited, se aplica a todos los enlaces que han sido visitados al menos una vez por el
usuario.
Más…
73. HTML5 y CSS3
Ejercicios
1. Utilizar la aplicación spriteme.org y/o http://spritegen.website-performance.org/
2. Probar la generación de texto en http://www.blindtextgenerator.com/es
3. Leer acerca del uso de variables en css3 en
http://www.w3.org/TR/css-variables/ y en http://www.inserthtml.com/2012/02/css-
variables/
Probar las herramientas:
http://www.spritebox.net/ , http://wearekiss.com/spritepad