Efectos de Safari | Aprendeconsafari

Efectos de Navegador Safari Implementando HTML5,CSS3 Y JAVASCRIPT

Efectos de vídeo
Usando el elemento <video> HTML5, incorporación de vídeo en una página web puede ser tan simple como añadir una línea de código. Y, puesto que <video> es un elemento de la página web estándar, que puede manipularse con JavaScript y estilo con CSS. Usted puede usar JavaScript para crear sus propios controles de video que coinciden con la apariencia de su sitio web, y añadir fácilmente efectos de expertos para el vídeo como transformaciones 3D, reflexiones, o máscaras de imagen utilizando CSS. Juntas, estas tecnologías web permiten crear efectos brillantes con sólo unas pocas líneas de código.

Audio
El elemento <audio> HTML5 le permite agregar audio a su página web con una sola línea de código. Al igual que otros elementos de una página web, el elemento <audio> se puede controlar y consultar utilizando JavaScript. Programación, puede pausar, reproducir, buscar, comprobar la posición actual de la reproducción, y mucho más. Y, usted puede escuchar eventos DOM que alertan a su código a los eventos importantes, tales como cambios de volumen o el final de una canción. Al entregar audio con HTML5, los usuarios pueden disfrutar de un sonido en sus páginas web sin necesidad de descargar ningún software adicional

VR
Puedes usar HTML, CSS y JavaScript para crear escenas virtuales en sus páginas web que funcionan sin ningún tipo de plug-in de software. Transformaciones CSS se utilizan para colocar seis imágenes en el espacio 3D para formar un cubo con el interior punto de vista del usuario. Mientras navega, el cubo se gira para reflejar la nueva posición adecuada. Cualquier comportamiento del navegador web estándar que puedan perturbar la experiencia - como mostrar una selección de color en Safari en el escritorio, o en el panel Guardar imagen en Safari en iOS - se puede desactivar con algunas propiedades adicionales de CSS

360 °
Usted puede entregar interactivos vistas de 360 grados de productos en sus páginas web, sin un plugin. Al tomar varias instantáneas del producto y luego ensamblarlos con HTML, CSS y JavaScript, usted puede crear fácilmente los tipos de interacciones ricas que los usuarios normalmente necesitan software adicional a la experiencia. Y, mediante la integración de eventos DOM tacto, se puede optimizar para el tacto habilitados para dispositivos como iPad y iPhone

Web Gallery
Puede crear galerías de fotos interactivas ricas, mediante la combinación de CSS 2D y 3D transforma con transiciones CSS. Al animar la-webkit-transform propiedad CSS en el código, puede habilitar la aceleración por hardware animaciones y ofrecer una experiencia de primera clase en las páginas web en el iPad y el iPhone. También puede utilizar gradientes CSS para añadir un toque de luz a tus fotos, sin tener que añadir una imagen adicional a la página web. Ya que estos efectos se definen en CSS, un navegador más antiguo que no es compatible con estas propiedades simplemente ignorarlos y su página web se degradan con gracia, automáticamente.

Las transiciones de las fotos
Usted puede realizar la transición entre las imágenes - o cualquier otro elemento de la página web - usando CSS3 2D y 3D transforma junto con las transiciones y animaciones. CSS3 transforma permiten colocar fácilmente los elementos de la página web de una manera nueva e interesante, mientras CSS3 transiciones y animaciones permiten definir el aspecto de una animación con sólo unas pocas líneas de código. Animaciones CSS3 también puede aprovechar la aceleración de hardware, por lo que sus efectos serán suave y fluida en el iPad y el iPhone - especialmente en comparación con animaciones creadas con mayores, técnicas convencionales de animación de JavaScript.

Web Tipografia
Muchas páginas web utilizan imágenes para mostrar texto en fuentes que no están instaladas en todas las plataformas. Sin embargo, se pueden aplicar algunas propiedades CSS directamente a los elementos de texto en su página web para crear impresionantes gráficos, elementos de navegación por los menús, botones y otros elementos de la interfaz de usuario. Cuando se utiliza texto de estilo con CSS en lugar de una imagen, el resultado es más fácil de crear y mantener, descargas más rápido y de forma automática seleccionable, escalable y accesible para los lectores de pantalla, e indexable por los motores de búsqueda

Lienzo manipulación de píxeles

Este ejemplo demuestra el poder del elemento <canvas> HTML5 para implementar un editor básico de imágenes con tecnologías web estándar. El elemento <canvas> le permite utilizar JavaScript para dibujar líneas, arcos, formas y mucho más, directamente en la página web. También proporciona una manera de modificar los datos de los píxeles subyacentes de la imagen dinámicamente dibujados, o tomar una instantánea de la imagen que se utiliza en otros lugares. Cuando usted toma una instantánea de la imagen, el archivo resultante PNG, JPG, GIF o TIFF se pueden guardar en cualquier ubicación en Mac OS X y Windows, o en el rollo de la cámara en iOS.

Movie Trailers

En Safari, buscar y reproducir trailers de un catálogo de películas iTunes con un delantero conocido Fila de estilo de interfaz. Construido con Dashcode 3, esta aplicación web utiliza el elemento de vídeo HTML5 para mostrar el vídeo y los combina CSS 2D y 3D transforma con transiciones CSS para hacer que el fluido de interfaz de usuario y capacidad de respuesta. Cada pieza de datos dinámicos se enlaza a un elemento de la interfaz de usuario utilizando Data Dashcode Fuentes. Mediante el uso de fuentes de datos, se puede reducir la cantidad de tiempo que le dedican a la escritura de código para analizar los datos de entrada y los elementos de la interfaz de usuario se mantienen sincronizados si los datos cambian.

Mesa de Luz

El uso de CSS3 transiciones y transformaciones, las fotos pueden ser fácilmente clasificados, arrastrando los pies, o mostrar en una presentación de diapositivas con sólo unas pocas líneas de CSS y JavaScript. Usted puede utilizar estas tecnologías para crear rápida y fácilmente innovadores y de alto rendimiento animaciones con una pequeña cantidad de código que es rápida de descargar y fácil de modificar y mantener. En Safari en el iPad y el iPhone, se puede combinar con las transformaciones CSS DOM eventos de toque para cambiar la posición, escala, o la orientación de cualquier elemento de la página web