Hay 8 articulo(s) nuevo(s) en portada, haz click aquí para leer.

Frogx Three

HTML5

HTML5

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 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 14

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 17

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 31

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 46

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

Menú lateral desplegable tipo panel con jQuery

menu tipo panel lateral

Perfecto menú lateral desplegable tipo panel creado por Amit Jakhu, es un muy buen diseño de menú inspirado en los menús laterales desplegables de las aplicaciones para dispositivos móviles como puede ser la versión de Facebook de versiones anteriores a iOS7, este tipo de menús es de gran utilidad ya que ayuda a ahorrar espacio en el sitio y a su vez crear menús de navegación extensos, este menú fue creado utilizando jQuery con la ayuda de HTML5 y CSS3 así que sería fácilmente adaptable a diseños web responsivos., por cierto que este plugin es gratis. Enlace: Sliding Menu...

Seguir leyendo 37

Archivos PSD: Elementos de Bootstrap 3 en PSD

20 septiembre, 2013 Enlace Corto

BTv3-1

Les dejamos el enlaces a un excelente paquete con todos los elementos de Bootstrap 3 en PSD, este set fue creado por los chicos de designshock quienes han creado este enorme paquete de elementos gráficos en Photoshop que incluyen todos los elementos UI, como ventadas, iconos, botones PSD, todo en archivos PSD, en fin todo lo que pueden encontrar en el poderoso Framework para crear diseños web responsivos utilizando HTML5 y CSS3 que han creado por desarrolladores de Twitter. Para quienes no sepan, recién se lanzo Bootstrap 3 con excelentes mejoras y nuevas características, el cual igual les recomendamos mucho porque les facilitara mucho la tarea de crear sitios web. Enlace: Bootstrap 3 PSD...

Seguir leyendo 34

Trunk, plantilla responsiva en HTML5 y CSS3

plantilla responsiva

Trunk es una plantilla responsiva en HTML5 y CSS3 perfecta para iniciar el desarrollo de paginas web adaptables a diferentes resoluciones, tabletas y teléfonos, está plantilla utiliza HTML5, CSS3 y también algo de JavaScript para dar soporte responsivo, la plantilla no incluye imágenes básicamente es la estructura de un diseño web responsivo que incluye un menú de navegación horizontal y desplegable para dispositivos móviles para facilitar la navegación en resoluciones pequeñas. Les recomendamos visitar nuestra sección de HTML5 donde podrán encontrar más plantillas web responsivas y recursos para diseñar paginas web. Enlace: Trunk JS...

Seguir leyendo 26

Pagina 1 de 3123