En esta presentación se dan a conocer los nuevos principios de Html5 Y Css3, presentación creada para Tc Unibague

1. PRINCIPIOS EN HTML5
Y CSS3
Marlon Ramirez (Zhionit)
Tc Unibague

2. Html5 y familia Html5
Un cambio que ahora estamos viviendo con HTML5, es una nueva revisión del
estándar que mueve Internet.
Html5 Es una combinación de nuevas etiquetas de Markup.
La familia HTML5 incluye nuevas etiquetas y tecnologías como
CSS3, Geolocalización, Almacenamiento Web (Web Storage) y WebSockets entre
otras.
A continuación se dará una breve explicación sobre algunas de ellas

3. Api
• Que es una Api??
• Interfaz de Programación de Aplicaciones
Definición formal
• “Llave de acceso”
• Llave de acceso?
• Lllave de acceso a funciones que nos permiten hacer uso de un servicio web provisto por
un tercero, dentro de una aplicación web propia, de manera segura.

4. Ejemplos de APIs
• Google Maps a través de su acceso a "API" nos permite ponerle datos e información útil sobre
sus mapas, y presentarlos con ciertas búsquedas o funciones personalizadas, desde nuestra
propia aplicación
• Paypal con su "API" nos permite hacer operaciones de pagos electrónicos usando nuestro
propio sistema web, sin necesidad de acceder/operar en la web de Paypal
• Algunos Booking Engines (centrales de reservas de hoteles y tickets aereos) abren sus
aplicaciones a partir de APIs para permitir que terceros re-vendan desde sus propios sistemas
• Twitter ha permitido el desarrollo de un gran número de sistemas alternativos y servicios web
que operan a través de su API
• UPS y DHL (operadoras logísticas internacionales) brindan acceso a sus sistemas desde
APIs, para permitirles a los sitios de comercio electrónico poder calcular el costo de envío de los
productos vendidos según ciertos parámetros
• Facebook Connect cede a través delAPI ciertos datos para registrar automáticamente usuarios
en otros sitios web, dándoles la posibilidad de registrarse y loguearse con sus propias cuentas
de Facebook

5. Pollyfill
• Qué es un polyfill?
• Es un código que nos proporciona la tecnología para tener nuevas funcionalidades.
• También conocido como “Plugin”
• Para que sirve?
• Nos permite usar las nuevas funcionalidades de HTML5 en navegadores que no las
soportan de forma nativa.

6. Algunos Pollyfil
• Drag and Drop
• Arrastrar y soltar es una expresión informática que se refiere a la acción de mover con el
ratón objetos de una ventana a otra o entre partes de una misma ventana.
• jQuery UI Draggable
• Geolocalización
• El nuevo estandar HTML5 permite detectar la geolocalización del usuario de una página
o aplicación web de forma extremadamente sencilla.
• https://developers.google.com/maps/?hl=es

7. • WebSockets
• Hacer una app real-time (en tiempo real) es una gran mejora y los WebSockets brindan
esta habilidad para agregar comunicación bi-direccional en una conexión persistente
para tu aplicación, permitiendo incrementar la interactividad y el compromiso con el
usuario.
• https://github.com/gimite/web-socket-js
• Socket.io: un framework para Nonde.js que ayuda con transportes de bajo nivel para
navegadores que carecen soporte nativo de WebSockets.

8. Css3
• Las ventajas principales en esta nueva versión son la inclusión de nuevas
propiedades especialmente en cuanto al aspecto gráfico.
• He aquí una lista de las principales propiedades que son novedad en CSS3.
• Bordes
• border-color, border-image, border-radius, box-shadow.
• Fondos
• background-origin, background-clip, background-size, hacer capas con múltiples
imágenes de fondo.

9. • Color
• colores HSL, colores HSLA, colores RGBA, Opacidad.
• Texto
• text-shadow, text-overflow, Rotura de palabras largas,Web Fonts.
• Interfaz
• box-sizing, resize, outline, nav-top, nav-right, nav-bottom, nav-left.
• Selectores
• Selectores por atributos.

10. • Modelo de caja básico
• overflow-x, overflow-y.
• Degradados CSS3
• Degradados lineales, Degradados radiales, Degradados lineales de
repetición, Degradados radiales de repetición.
• Otros
• media queries , creación de múltiples columnas de texto.
• propiedades orientadas a discurso o lectura automática de páginas web.
• animacionesCSS3.

11. Transformaciones yTransiciones con Css
• Transformaciones
• http://msdn.microsoft.com/es-es/library/ie/jj665791%28v=vs.85%29.aspx
• Transiciones
• http://www.cristalab.com/tutoriales/uso-de-transiciones-en-css3-c107220l/
• Animaciones con Css
• http://webintenta.com/userfiles/2012/01/ej29112011_17/css3animation.php
• http://webintenta.com/userfiles/2012/01/ej29112011_17/css3animation2.php
• http://webintenta.com/userfiles/2012/01/ej29112011_17/css3animation3.php
• http://webintenta.com/css3-animaciones.html

12. GRACIAS!
Marlon Ramírez (Zhionit)