Frogx Three

HTML5

HTML5

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 27

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 24

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 29

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 39

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 39

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 30

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 18

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 23

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 32

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

11 Plugins JS para hacer diseños web responsivos

diseños web responsivos

Les compartimos una serie de excelentes plugins javascript perfectos para hacer diseños web responsivos, esto será de gran utilidad para seguir una de las tendencias de diseño web en 2014 que se trata de crear diseños web adaptables a cualquier plataforma sin importar navegador y mostrando contenido de calidad aprovechando las posibilidades que los diferentes dispositivos ofrecen tanto en imágenes de alta resolución como en interactividad. Plugins JS para hacer diseños web responsivos Adapt.Js Es un alternativa al uso y dependencia de los Media Queries con CSS, que si bien cierto son excelentes aun no son reconocidos por todos los navegadores, lo cual puede causarnos algunos problemas, con Adapt.js eliminamos esa dependencia, también ofrece soporte para la mayoría de los navegadores incluso Internet Explorer, con este plugin podremos identificar el tamaño de la venta o resolución de pantalla de la persona que accede a nuestro sitio de tal modo que sirvamos......

Seguir leyendo 62

Crear botones animados para indicar porcentaje de carga

botones

Les comparto un excelente recurso para diseñadores web, se trata de un paquete que les permitirá crear botones animados utilizando CSS3 para indicar el porcentaje de carga de algunas acciones, como puede ser por ejemplo subir un archivo o realizar una acción que requiera algunos segundos para ser procesada y recibir respuesta del servidor. En la pagina demo podrán ver todos los diseños posibles para estos botones animados, los cuales utilizan botones con perspectiva y también efectos en 3D, estos botones utilizan algunas propiedades de CSS3 que aun no son soportadas por todos los navegadores por lo mismo les recomiendo leer el manual de uso el cual les menciona posibles alternativas para utilizar cualquiera de estos botones con animaciones CSS. Descargar script y tutorial de uso en: Tympanus| Demo...

Seguir leyendo 35

Foundation 5 una poderosa alternativa a Bootstrap

foundation

Foundation es un poderoso framework para diseño web, no es nuevo de hecho recientemente lanzaron Foundation 5 el cual se posiciona como una poderosa alternativa a Bootstrap, este framework que hará del diseño web una tarea mas sencilla se integra fácilmente con jQuery y tiene una gran cantidad de características, muchas de ellas centradas en la creación de diseños web responsivos. Algunas de sus características son: Integra Fastclick.js librería que elimina ese pequeño delay al hacer click en smartphones y tabletas Animaciones con CSS mas fluidas Off Canvas Creación más sencilla de formularios, con validaciones y patrones para campos Integración con Sublime Text Plantillas para iniciar proyectos Librería para trabajar con SASS Libsassy Una muy buena alternativa que los diseñadores web deberíamos considerar muy seriamente antes de iniciar un proyecto web. Descargar: Foundation 5...

Seguir leyendo 33

RevealJS: Crear presentaciones HTML5 con efectos 3D

reveals

RevealJS es una librería JavaScript que te permite crear presentaciones HTML5 con efectos 3D de una manera sencilla y elegante, RevealJS aprovecha las bondades que la combinación entre JavaScript y CSS3 pueden ofrecer para crear estos efectos, para quienes no tengan las habilidades de programación también pueden utilizar Slid.es una aplicación web que utiliza RevealJS la cual ofrece un editor visual para crear presentaciones con efectos utilizando HTML5 y CSS3, la aplicación ofrece un paquete gratuito y un paquete de $7 dólares mensuales. Independientemente de eso creanme que implementar RevealJS para crear tus presentaciones con HTML5 no es muy complicado. Enlace: RevealJS | Slid.es...

Seguir leyendo 24

TogetherJS para convertir pagina en área de trabajo colaborativa

togheterjs

La fundación Mozilla ha lanzado TogetherJS una librería capaz de convertir pagina en área de trabajo colaborativa de manera muy sencilla, simplemente tenemos que incluir la librería JavaScript en la pagina, ejecutar el script en el código HTML y esto automáticamente detectara a los usuarios en linea para crear multiples sesiones de tal modo que podrás ver el movimiento del cursor y acciones que realice el otro usuario conectado a la pagina y el podrán ver los tuyos, convirtiendo la pagina o aplicación web en un área de trabajo colaborativa. TogetherJS es una aplicación OpenSource es decir que es completamente gratuita, es perfecta para el testing de paginas e incluso puede utilizarse como un alternativa al eye tracking para conocer la actividad de usuarios y como utilizan una pagina web y si la usabilidad del sitio es adecuada. Video TogetherJS: Convertir pagina en área de trabajo colaborativa Enlace: TogetherJS...

Seguir leyendo 23

Carousel jQuery con soporte Touch

carrousel jquery

Owl Carousel es un excelente Carousel jQuery con soporte Touch, un plugin jQuery bastante útil y liviana que dota de mejores características a tus diseños web, es muy fácil de integrar, es gratuito y sirve perfectamente en sitios web responsivos, podemos asegurar que es un excelente plugin para crear galerías tipo carousel para diseños web modernos. Características del Carousel jQuery con soporte Touch Soporte para gestos Touch en pantallas tactiles  Responsivo Soporte CSS3 Soporte para multiples instancias en una misma pagina Compatible con todos los navegadores web modernos Enlace: Owl Carousel | Les recomendamos la sección de jQuery...

Seguir leyendo 37

Google Web Designer aplicación para crear animaciones web

google web designer

Google ha lanzado Google Web Designer una aplicación para crear animaciones web, esta nueva aplicación se centra en la creación de diseños web y publicidad utilizando HTML5 y CSS3 con el fin de incentivar a los desarrolladores y diseñadores ha utilizar estas características, al fin de dejar de utilizar herramientas como Flash y centrarse en el uso de estándares web que consumen menos recursos y son capaces de lograr excelentes diseños animados. Google Web Designer: Aplicación para crear animaciones web 2 Modos de animación Rápido para diseñar animaciones por escena Avanzado que permite crear animaciones por capas individuales Crear animaciones 3D utilizando las herramientas que ofrece CSS3 Visor de código fuente y diseño Herramientas de ilustración Se integra con herramientas de publicidad para publicar los anuncios. Video Enlace: Google Web Designer...

Seguir leyendo 38

Pagina 1 de 3123