Frogx Three

HTML5

HTML5

Tumult Hype Pro el futuro de la animación con HTML5/CSS3

tumul hype professional

Tumult la empresa que desarrolla  Hype una de las mejores aplicaciones para crear animaciones web y diseños de paginas web en Mac, Tumult esta preparando el lanzamiento de una nueva versión de su poderos App, se trata de Hype Pro el futuro de la animación con HTML/CSS3 o al menos así lo están dando a conocer, entre las características que promete Tumult para la nueva versión de Hype, aparte de la posibilidad de crear animaciones para Web, Hype Pro incluye un nuevo método para crear paginas web responsivas de forma intuitiva y muy sencilla sin necesidad de programar. El nuevo Hype Pro también te permitirá crear animaciones con movimientos naturales sin utilizar keyframes o código, simplemente utilizando las funciones que el mismo programa ofrece, también ofrece una forma mas sencilla para agregar interacción y gestión de eventos para controlar las animaciones, perfecto para crear juegos HTML5 para móviles con eventos Touch, otra......

Seguir leyendo 23

Tips: El arte de las animaciones en interfaces web

15 noviembre, 2014 Enlace Corto

css animations

Llevamos muchos tiempo hablando del diseño de interfaces y de la importancia que tienen las animaciones en interfaces web aprovechando las capacidades que ofrece CSS3, HTML5 y JavaScript combinados logrando enganchar y enamorar a tus visitantes con algunas animaciones simples y sutiles que dan una sensación de innovación y comodidad al navegar a través de una pagina web o cualquier interface de una aplicación sea cual sea el medio en el que la estemos utilizando. Por ello quiero compartirles un enlace que me encontré muy interesante y que todos deberías leer, es una pagina web en forma de diapositivas que nos ofrece muchos tips sobre el arte de las animaciones de interfaces, así como muchos recursos para utilizar de forma inteligentes estos recursos para diseñadores de interfaces  web y móviles, en el documento encontrarán desde Frameworks CSS y JavaScript recomendados, ejemplos de código, recomendaciones de su uso e incluso algunos......

Seguir leyendo 26

Tutorial para crear mockups 3D interactivos con CSS3 y jQuery

3d-animated-mockup-featured-new

Si eres diseñadores sabras lo importante que puede llegar a ser aplicar un poco de animación en una pagina web, y si tus usuarios tiene interacción con eventos de tu sitio para provocar animación mejor, pero y si combinas todo eso y creas formas interactivas para hacer demostraciones que permitan a tus visitantes y interactuar y que tengan un entorno visual agradable, bueno esto seria increíble. Eso es lo que podrás lograr si sigues el siguiente tutorial que estoy compartiendo con ustedes, y que si bien esta en Ingles bien que vale la pena esforzarse un poco en comprenderlo. Este tutorial para diseñadores web te permitirá crear mockups 3D interactivos con CSS3 y jQuery, una combinación que bien utilizada y aprovechada es una bomba, en el enlace que les comparto al final podrán encontrar el tutorial completo que les explica como funciona y como utilizarlos, también podrán descargar los archivos......

Seguir leyendo 5

Atomic, App colaborativa para diseño de interfaces

atomic

Les quiero presentar Atomic una App colaborativa para diseño de interfaces que me encontré ayer, no se desesperen por probarla pues esta aplicación aun esta en desarrollo y no hay una fecha prevista para su lanzamiento al publico o su primera Beta pero te puedes suscribir a la lista de correo de Atomic para ser uno de los primeros en recibir la noticia de su lanzamiento, Atomic será una App Online sencilla, pero con características muy útiles que te permitirán trabajar en equipo, algunas de las principales características que ofrece Atomic son: Crear diseños de interfaces con interacción lo que te permitirá demostrar el funcionamiento de las principales funciones de tu App o al menos su navegación. Compartir tus diseños por medio de enlaces, evitando la necesidad de compartir pesados archivos. Panel de comentarios para recibir Feedback de tus colegas o clientes con los que compartas los avances de tu diseño.......

Seguir leyendo 9

MixitUp, Plugin jQuery para filtrar y reordenar grids dinámicamente

mixitup

Me encontré un plugin jQuery genial que quiero compartir con ustedes se llama MixitUp y creo que lo aplicare en algún momento al blog, MixitUp es un plugin jQuery que te permite agregar dinamismo al grid de tu pagina web, el plugin te permite filtrar y reordenar bloques en un grid de forma dinámica y con animación agregando un toque visual y bastante interesante a la tu diseño, de tal manera que puedes ofrecer una opción interesante de filtrado de datos con un poco de interacción y animación que harían mas cómoda y agradable la interacción de los usuarios que visitan tu pagina con la información que ellos encuentran en tu sitio. El plugin es gratuito, y lo puedes utilizar sin problemas en cualquiera de tus paginas web, en el sitio hace referencia a una licencia comercial pero esta es solo si tienes intensiones de incluir MixitUp en un plantilla......

Seguir leyendo 23

Plugin jQuery para cambiar diseño de elementos de formularios web

Labelauty

Labelauty es un pequeño pero muy útil plugin jQuery para cambiar el diseño de elementos de formularios web, en particular de los elementos Checkbox y los Radio Buttons, que podrán ser muy útiles pero son los elementos más inflexibles para crear diseños de paginas web con formularios que se adapten al diseño, el plugin prácticamente convierte los elementos checkbox y radio buttons en botones seleccionables a los cuales les puedes aplicar diseños mas agradables y que se puedan adaptar a la identidad del sitio sin perder la funcionalidad que estos elementos nos ofrecen. La imagen de abajo te muestra un ejemplo de como utilizar este plugin jQuery para cambiar el diseño de formularios web, el plugin es completamente gratuito y bastante sencillo de aplicar, basta con iniciar el script en el footer o cabecera de tu sitio web para que el diseño de todos los elementos checkbox y radio buttons se......

Seguir leyendo 39

Genial diseño de la pagina oficial de Big Hero 6

web big hero six 3

Si estas esperando con ansias la película de Disney Big Hero 6 que se estrenara el próximo 5 de Noviembre o si eres un diseñador web que admira los buenos trabajos de diseño web, bueno pues tienes que conocer la nueva pagina web oficial de Big Hero 6 la cual fue creada por el diseñador Rolf A. Jenser quien es originario de Oslo, Noruega, el nuevo sitio oficial para esta película es un sitio único y original, y que a pesar de estar lleno de animación, no existe ni rastro de Flash. El sitio esta lleno de interactividad y elementos animados todos aprovechando las diversas posibilidades que nos ofrece la combinación de HTML5, CSS3 y mucho JavaScript, en verdad les recomiendo mucho visitar el sitio incluso si no les interesa la película ver lo que Rolf ha logrado con este sitio es muy interesante y demuestra que con CSS3 y HTML5......

Seguir leyendo 38

Framework HTML5 para crear apps para móviles

onsen ui framework html5

Onsen UI es un interesante y poderoso Framework HTML5 para crear apps para móviles, es un framework basado en una gran colección componentes y elementos UI para facilitar y agilizar la creación de aplicaciones para móviles, Onsen UI es un framework que se integra perfectamente con Phone Gap y Cordova apps, dos frameworks especializados en la creación de aplicaciones móviles utilizando HTML5, CSS y JavaScript. Todos los elementos de Onsen UI tienen propiedades responsivas que se adaptan perfectamente a diferentes resoluciones sea en aplicaciones para tabletas o para teléfonos móviles, el framework también trabaja perfectamente con dos poderosos frameworks JavaScript como son Angular JS de Google y el conocido jQuery. Onsen UI es un framework HTML5 tipo Open Source es decir que es gratuito y lo puedes utilizar en tus aplicaciones móviles sean gratuitas o de paga, el paquete integra de igual forma por default la librería de iconos Font Awesome, muy......

Seguir leyendo 36

Clippy, App para crear formas poligonales con CSS3

clippy

Clippy es una fantástica App para crear formas poligonales con CSS3 para aplicar en los diseños de paginas web que realices, este editor te permite generar formas CSS a partir imágenes SVG a las cuales se les puede aplicar un fondo de tal modo que presentemos imágenes en forma de triángulos, rombos y otros poligonos con formas especiales las cuales se generen automáticamente al cargar la pagina, estas prácticas son posibles al utilizar la propiedad clip-path de CSS3 que esta disponible en casi todos los navegadores web modernos con excepción de Internet Explorer. La aplicación esta montada en una pagina web y es de uso gratuito, el editor de Clippy te generara el código CSS necesario para aplicar en tus archivos CSS para asignarlos a tus capas según las clases o IDs a los que necesites aplicárselo, en el editor por default te ofrece una galería de formas predefinidas las cuales puedes utilizar......

Seguir leyendo 38

Plantillas HTML5 para paginas de aplicaciones para móviles

app-introduction-template-featured

Les comparto una interesante plantilla HTML5 especialmente diseñada para crear paginas de aplicaciones móviles, es un plantilla perfecta para presentar tu producto en el caso que seas un desarrollador de aplicaciones móviles y necesites un medio para dar a conocer tu aplicación, ofrece una estructura limpia y un estilo de navegación horizontal moderno y agradable, esta plantilla para crear paginas web de APP’s móviles esta completamente desarrollada con HTML5 y CSS3. La plantilla utiliza así mismo jQuery y Modernizr para garantizar su funcionamiento en todos los navegadores web, incluyendo el fantástico Internet Explorer (sarcasmo), en el enlace al final de este post podrán encontrar la liga hacia la pagina oficial de este proyecto por la gente de CodyHouse, un sitio que ofrece una colección de librerías gratuitas para hacer que nuestro trabajo de diseño web sea mas sencillo y agradable. Como característica adicional al soporte HTML5 que ofrece esta plantilla, también......

Seguir leyendo 45

Plugin para hacer tus formularios web más esteticos

formplate

Formplate es un plugin para hacer que los formularios de tu pagina web se vean más estéticos y con un diseño fuera del común y feo diseño que se muestra por default como parte del UI de cada navegador, este plugin es una combinación entre JavaScript y CSS3 que genera código HTML5 valido para cambiar el estilo de tus formularios y el diseño sea el mismo sea en navegadores web de computadoras de escritorio, móviles o tabletas, sin importar el navegador, la versión o el sistema operativo. El plugin es gratuito, utiliza un par de dependencias las cuales son Modernizr y jQuery para funcionar de forma adecuada e integrarse correctamente con cualquier navegador web, en su pagina web la cual enlazamos más abajo se muestra un ejemplo de como incluir este plugin en tu pagina web. Enlace para descargar Formplate...

Seguir leyendo 63

App JavaScript para crear lineas de tiempo con HTML5 y CSS3

timesheet js

Time Sheet JS es una interesante App JavaScript que te facilita crear lineas de tiempo aprovechando la flexibilidad de HTML5 y CSS3, es un script muy fácil de utilizar e integrar en tu pagina web, basta con incluir el script y definir un arreglo en formato JSON con los datos que deseas se desplieguen como parte de la linea de tiempo, definiendo para cada dato una fecha inicial y una fecha inicial así como la información referente a dicho evento. La forma en la que nos permite crear las lineas de tiempo nos permite crear el arreglo de datos y eventos de manera muy sencilla integrando los datos desde una base de datos usando AJAX por ejemplo, no hay mucha documentación sobre la herramienta, solo una pequeña guía que explica como crear tu primera linea de tiempo con Time Sheet, les dejo el ejemplo. Por cierto resaltar que esta librería no......

Seguir leyendo 30

Animator, aplicación para crear animaciones HTML5

animator

Animator es la aplicación perfecta para diseñadores que no saben programar y desean crear animaciones web con HTML5 sin necesidad saber programar, la aplicación es gratuito para crear tus primeros 20 proyectos de forma publica, existen otros dos paquetes con costo que permiten crear proyectos de animaciones web privados. La interface de la aplicación es bastante sencilla e intuitiva, especialmente si llegaste a utilizar Adobe Flash o algún editor de video, la aplicación se basa en los principios básicos de la animación, en cuanto a uso de frames, velocidad y posición dentro del area de trabajo, el servicio te permite descargar el código HTML5 de tu animación o también exportar tu animación en formato GIF.   Enlace hacia la pagina oficial de Animator...

Seguir leyendo 62

SpinKit, serie de indicadores animados con CSS

spinkit

En el 2000 se empezó a hacer muy popular entre los diseñadores web el uso de acciones AJAX que permitían ejecutar acciones sin tener que recargar la pagina, esto trajo nuevas necesidades en cuanto a diseño web y diseño de interfaces, una de ellas fue la necesidad de mostrar indicadores de carga animados que indiquen que una acción se esta realizando y que hay que esperar, la primera opción fue utilizar imágenes GIF animadas pero ahora con la introducción de las transiciones que permiten crear animaciones sencillas con CSS, estos indicadores se pueden realizar de forma más sencilla utilizando puro código CSS. SpinKit es un sitio el cual nos proporciona una serie de atractivos indicadores de carga animados con CSS de forma gratuita los cuales podemos descargar copiando el código para incluir en nuestros diseños de paginas web. Enlace hacia la pagina oficial de SpinKit...

Seguir leyendo 34

Atractivo diseño de formulario web full screen

formulario full screen

Navegando por los recursos que comparten en Codrops me encontré este excelente diseño de formulario web full screen, es un diseño que refleja muchas cosas muy buenas como elegancia, usabilidad, sencillez y todo combinado en un diseño moderno y fácil de navegar, considero el diseño puede ser perfecto para pequeñas encuestas por su sencillez en todos los aspectos desde el diseño de los campos del formulario hasta toda la interface que refiere a un sitio responsivo y aplicable a cualquier dispositivo. Les comparto los respectivos enlaces donde podrán descargar los scripts JavaScript y CSS, así como ver el tutorial para crear formularios web con este estilo en tu pagina web, así como también la pagina demo donde podrán probar esta interface web para formularios. Enlaces: Descargar Scripts & Tutorial | Demo...

Seguir leyendo 36

Galería con nuevo diseños web para inspirarse

diseños web inspiracion junio 4

Les comparto una galería con un total de 15 nuevos diseños web para inspirarse, creados por diversos diseñadores, algunos de estos diseños son proyectos ya terminados otros se han quedado en propuestas y algunos otros son simples conceptos de diseño web que los diseñadores han creado con el fin de demostrar sus habilidades y creatividad esperando ser vistos por las grandes marcas y agencias, de esta galería debemos destacar el estilo de cada uno de los diseños y también la variedad de estructuras de contenido que se plantean pero sin olvidar el factor de uso humano, algo muy importante que todos los diseñadores web siempre deberían considerar, espero que esta galería les sea de utilidad para ganar un poco de inspiración en diseño web. Diseños web para inspirarse...

Seguir leyendo 19

12 Diseños de paginas web usando HTML5 fantásticos

pagina web tacospillet

Miren esta galería de diseños de paginas web hechos con mucha creatividad utilizando HTML5 y CSS3, todos los sitios mencionados en esta galería están actualmente activos con estos excelentes diseños web en el que combinan las herramientas mencionadas con algunas librerías JavaScript para dotar de interacción y animación los diseños sin tener que recurrir al obsoleto Flash. Diseños de paginas web usando HTML5...

Seguir leyendo 24

Tutorial y código para crear un grid estilo Google

google grid

Les comparto un recurso para diseño web que incluye tutorial y código para diseñar paginas web utilizando un grid estilo Google con bloques flotantes, este estilo de diseño se puso de moda desde el lanzamiento de Pinterest y ha sido recreado por otras redes sociales con algunas modificaciones, este tipo de grids es perfecto para sitios que generan muchos contenido combinado entre imágenes y texto, de hecho en este blog hicimos algo “similar” pero preferimos mantener el orden de nuestros bloques, en el siguiente enlace encontrarán el código para crear un grid como el de Google+ y también un tutorial que describe como aplicarlo. Enlace: Codrops...

Seguir leyendo 24

UIKit un interesante Framework para diseñar paginas web

UIKIT

UIKit es una excelente framework para diseñar paginas web, es un alternativa mas que recomendable al famoso Bootstrap, UIKit es un framwork OpenSource que incluye una gran cantidad de componentes para personalizar y armar de una forma rápida nuestra pagina web, incluye archivos CSS base para normalizar el estilo de los elementos, CSS para impresión, plantilla grid basada en el estándar 960 que nos ayudara a crear paginas web responsivas. Es muy fácil de integrar, básicamente tienen que insertar los archivos CSS y según los componentes o addons que deseen agregar algunos archivos JavaScript, les dejo el enlace a la pagina oficial del proyecto donde podrán descargar UIKit gratis y leer toda su documentación. Enlace para descargar UIKit Framework...

Seguir leyendo 41

5 UI Kits CSS para modificar la apariencia de formularios web

tres

Les comparto una serie de UI Kits CSS que incluyen diseño y el código CSS y HTML para modificar la apariencia de los formularios web, estos UI Kits CSS3 permiten modificar los componentes de entrada de texto, selectores, checkbox, botones radio y botones de acción en general con el fin de otorgar de un diseño diferente y único los diseños de interfaces web para nuestras aplicaciones o paginas, todos son gratuitos y para aplicarlos se necesita de conocimientos básicos de HTML y CSS. UI Kits CSS para modificar formularios...

Seguir leyendo 66

Pagina 1 de 4123...Antiguas »

#RanascreativasÚltimas imágenes enviadas