Desde su aparición, HTML 5, ha sido considerado como el sustituto perfecto de Flash para la creación de animaciones para la web. Poco a poco, según hemos ido descubriendo HTML 5, las presagios se están confirmando y ya no necesitamos Flash para realizar una animación para nuestra web, basta con emplear HTML 5. Las aplicaciones que van surgiendo para crear animaciones en HTML 5, están simplificando notablemente el desarrollo de las mismas. Todas ellas nos permiten crear de forma visual, rápida y sencilla una animación para la web, tan fácil y sencillo como crear una presentación de diapositivas de Power Point. Las siguientes aplicaciones son las mas extendidas y mas utilizadas por los desarrolladores web para crear animaciones: 1.- Sencha Animator: posiblemente es la más utilizada, sobre todo por estar disponible para las principales plataformas Windows, Mac y Linux. Sin duda alguna esto ha favorecido su gran difusión y utilización, la aplicación nos permite crear animaciones para la web (botones, animaciones de texto, transición de imágenes…etc), anuncios y juegos para el navegador de forma gráfica e intuitiva. Podemos descargar la versión de prueba desde la web de sus desarrolladores , si nos gusta podemos adquirir la aplicación por 99 $. [...]
En el siguiente artículo he recopilado una serie de vídeo conferencias de desarrolladores Front-end, expertos en materias tales como CSS, HTML5 o JavaScript. La verdad que no las he visto todas, pero con este artículo ya quedan recopiladas para ir viéndolas poco a poco. Breaking Good Habits (Harry Roberts) “Solventando los debidos problemas a las debidas personas; mirando como algunas de nuestras mejores prácticas obstaculizan, en vez de ayudar” Enlace directo | Slides Learning to Love JavaScript (Alex Russell) Comenta los concepts del core de JavaScript, que esta muy bien para los que están comenzando pero tambien para quien ya ha programado pero esta aprendiendo JavaScript. Enlace directo | Slides Writing Maintainable JavaScript (Andrew Dupont) “Aprende como obtener un puñado de estrategias que puede utilizar para mantener su base de código JavaScript sólida, modular y flexible.” Enlace directo Progressive Enhancement 2.0 (Nicholas Zakas) Ponencia donde se comenta las mejoras progresivas que se deberían proporcionar a cierto nivel para apoyar todos los navegadores Fuente: It’s Time To Stop Blaming Internet Explorer. Enlace directo | Slides The CSS3 Experience (Dan Cederholm) Enlace directo | A feed apart page How Browsers Work Internally (Tali Garsiel) “La renderización de una web no es una acción única del navegador, pero es una serie de [...]
Con las reglas @media de CSS3 conseguimos mejorar la experiencia del usuario que entra en un site, independientemente del dispositivo que se use. Adaptando la web a las resolución y medidas del dispositivo que se esté usando, claro siempre y cuando tengamos las reglas para ese dispositivo en nuestro css. Podremos definir conjuntos de estilos dependiendo de propiedades comunes de los dispositivos y se pueden ajustar propiedades específicas para el alto, ancho, la relación de aspecto, el número de colores disponibles, etc. Hasta el momento necesitábamos JavaScript para obtener información del navegador del usuario y conocer el tamaño de la ventana. En CSS3 tenemos las media queries con las que podemos obtener bastante información de las propiedades del navegador o dispositivo que se está usando para acceder a nuestro site. Las propiedades más importantes que tendremos que tener en cuenta para dispositivos móviles son las siguientes: Aspect-ratio: Mira las dimensiones relativas del dispositivo expresadas como una relación de aspecto: 16:9 por ejemplo. Width y height: Mira las dimensiones del área de visualización. Además pueden ser expresadas en valores mínimos y máximos. Orientation: Mira si el layout es panorámico ( el ancho es mayor que el alto ) o vertical ( [...]
CSS 3 incluye todos los selectores de CSS 2.1 y añade otras decenas de selectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y su explicación detallada se puede encontrar en el módulo de selectores de CSS 3 (http://www.w3.org/TR/css3-selectors/) . En primer lugar, CSS 3 añade tres nuevos selectores de atributos: elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada. elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada. elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada. De esta forma, se pueden crear reglas CSS tan avanzadas como las siguientes: /* Selecciona todos los enlaces que apuntan a una dirección de correo electrónico */ /* Selecciona todos los enlaces que apuntan a una página HTML */ /* Selecciona todos los títulos h1 cuyo atributo title contenga la palabra “capítulo” */ Otro de los nuevos selectores de CSS 3 es el “selector general de elementos hermanos”, que generaliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2 y selecciona el elemento2 que es [...]
CSS3 está llevando el desarrollo y diseño web a un nivel superior. En este artículo, he recopilado algunos ejemplos de técnicas de CSS3 que probablemente llegará a ser muy popular cuando CSS3 será totalmente compatible con la mayoría de los navegadores. Modernizr Modernizr is una librería JavaScript que te ayudará a integrar HTML5 y css3 en tu página web y que sea compatible con todos los navegadores posibles. Modernizr detecta el soporte para CSS3 y añade clases a los elementos de tu html, aportando compatibilidad con diferentes navegadores. Sin duda una librería que está siendo muy popular e integrada por empresas tan conocidas como twitter, Google o Microsoft, entre otros. Visitar: Modernizr CSS3 Please CSS3 Please otra site a tener en cuenta que te permite copiar y pegar muchas de las comunes declaraciones de CSS3. Tiene un interface donde puedes probar y “jugar” con nuevas funcionalidades de CSS3 como rotar un elemento, estirar, mover o escalar y puedes ver en el momento el código CSS3 que se va generando. Visitar: CSS3 Please CSS3 Guía de referencia Como no siempre es útil tener a mano una guía de referencia donde poder recordar las propiedades y sintaxis cuando no te acuerdes. guía [...]
Publicado por: corso
Publicado por:
Últimos comentarios