Pincipios css3 & html5
Descargar como PPTX, PDF0 recomendaciones632 vistas
El documento aborda los principios y novedades de HTML5 y CSS3, destacando su impacto en la web contemporánea. Se describen conceptos como APIs, polyfills y tecnologías relacionadas, incluyendo geolocalización y websockets, que mejoran la interactividad. También se enumeran nuevas propiedades y funcionalidades de CSS3 que enriquecen el diseño y la presentación en la web.
Pincipios css3 & html5
- 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