11
Sep 2012

Buenos plugins JQuery para galerías de imágenes

Escrito por: paginas-web el 11 Sep 2012 - URL Permanente

El uso de galerías de imágenes con distintos efectos es cada vez más demandado y habitual en el desarrollo de proyectos web. Javascript ha demostrado ser uno de los lenguajes favoritos a la hora de implementar estas galerías. Y si hablamos de Javascript es muy difícil pasar por alto el framework JQuery que por su continuo desarrollo y la multitud de plugins que complementan su uso, se ha vuelto una de las opciones más utilizadas por los diseñadores y desarrolladores de páginas web.

En este post mencionaremos algunos plugins que sirviéndose de JQuery nos permiten incorporar atractivas formas de mostrar imágenes en páginas web.

iView Slider nos permite crear sliders de imágenes, vídeo o texto. El plugin está perfectamente adaptado para diseños Responsive.
Proporciona unso 35 efectos a escoger para las distintas imágenes.
También ofrece animación para títulos y distintas maneras de navegación por las distintas diapositivas que desee incorporar el desarrollador.

www.iprodev.com

Adaptor es otro interesante plugin que nos permite gestionar y aplicar interesantes efectos a nuestras galerías de imágenes. La particularidad de este plugin es que centra de forma especial en la creación de efectos 3D. Dichos efectos son compatibles con los principales navegadores, no obstante, para navegadores no compatibles Adaptor proporciona efectos más sencillos.

El plugin es bastante ligero y proporciona una gran variedad de opción de configuración de las transiciones que desarrollemos.

www.philparsons.co.uk

Rhinoslider es otro interesante plugin jQuery que permite la creación de sliders de imágenes con una gran cantidad de efectos. Es un plugin sencillo de utilizar y extremadamente flexible. Podremos aplicar los efectos prácticamente a cualquier elemento de nuestra web (imágenes, textos, vídeos). El plugin está pensado para una utilización intuitiva y sencilla, accesible para desarrolladores con poca experiencia en el uso de Javascript y JQuery.

La versión 1.04 de este plugin nos permitirá configurar efectos y opciones de visualización para buscar lo que mejor se adapten a nuestra página web.

www.rhinoslider.com

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

10
Ago 2012

Novedades para CSS3

Escrito por: paginas-web el 10 Ago 2012 - URL Permanente

Las mejoras que continuamente vemos en HTML5 habitualmente van de la mano con nuevos recursos, tutoriales y aplicaciones que internet nos proporciona para ampliar los conocimientos y uso de CSS3.
En este post presentaremos algunas de las aplicaciones o recursos para CSS3 que últimamente nos han llamado la atención.

Westciv.com es un conjunto de herramientas con las que generar código CSS3.
Su manejo es sencillo y cada una de las herramientas está optimizada para generar el respectivo código CSS3 a partir de los parámetros que deseemos asignar.

Entre sus propiedades podemos ver:
CSS Shadow: permite crear sombras en un texto y en una caja, una de las propiedades más difundidas de CSS3.
Gradients: explora gradientes CSS.
CSS Text-stroke, añade borde en el texto.
CSS Tranforms nos permite rotar, escalar, y transformar los elementos.

www.westciv.com/tools

CSS3Ps es ni más ni menos que un recurso para implementar en Photoshop que nos permitirá generar código CSS3 automáticamente sobre las formas que hayamos diseñado en Photoshop, respetando como es lógico, sus propiedades y características.

Este plugin de descarga gratuita permitirá un ahorro notable de tiempo en la conversión de formas en código CSS

www.css3ps.com

CSS3 Gradient Generator es un una herramienta con la que generar gradientes de forma sencilla. En su interfaz están especificados los parámetros de color, dirección y formato de forma que una vez ajustados los parámetros a nuestras necesidades, podamos obtener el código CSS.

www.gradients.glrzad.com

Ceaser CSS Easing Animation Tool una herramienta orientada a ayudarnos en la creación de animaciones en CSS3.

Ceaser CSS Easing Animation Tool es muy fácil de usar y no es necesaria descargas ni registros previos.

www.matthewlein.com/ceaser

Finalmente Eric Meyer, el gurú del CSS y gran promotor de los estándares web, ha creado una lista con los colores por nombre y sus respectivos equivalentes numéricos.

En su listado se encuentran los 147 colores con nombre definidos en SVG, como se indica en CSS Color Module Level 3 del World Wide Web Consortium (W3C) junto con sus valores RGB, HSL y hexadecimal.

Sin lugar a dudas, otro gran aporte de este gurú que cualquier diseñador conocerá por ser el autor del famoso reset para CSS.

www.meyerweb.com

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

09
Jul 2012

HTML 5 para el desarrollo web

Escrito por: paginas-web el 09 Jul 2012 - URL Permanente

De forma progresiva y sin grandes aspavientos, las predicciones que apuntaban a que 2012 sería un año decisivo en la consolidación de HTML5 para estarse cumpliendo.
Todo ello en parte es debido a la ingente cantidad de proyectos que buscan informar sobre este lenguaje de forma creativa y didáctica. Muchos son los proyectos destacables, en este post mencionaremos un par de ellos. Así que si estás pensando arrancar con HTML5 este post te puede interesar.

HTML5 Doctor es un proyecto en forma de guía con el que se pretende facilitar al máximo el conocimiento y acceso a este lenguaje. Mediante descripciones iremos viendo los distintos elementos que componen este lenguaje, con un código a base de ejemplo y enlaces a otros artículos del proyecto.
Podremos encontrar un apartado de artículos HTML5 con licencia Creative Commons , y una galería de webs desarrolladas con HTML5.

La guía está ordenada alfabéticamente y eso sí, redactada en inglés.

www.html5doctor.com/element-index

Otro proyecto interesante es HTML5 Please! Donde veremos todas las características de este lenguaje y su respectiva compatibilidad con los distintos navegadores y su multitud de versiones, de esta forma podremos determinar, cuál podremos usar y con cuál debemos ir aún con cuidado.

Este es un proyecto hermano de la interesante CSS3Please! que también resulta de enorme utilidad de cara a la implementación y uso de CSS3

http://html5please.com

http://css3please.com/

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

16
Jun 2012

Insertando fuentes en nuestra página web con Font Squirrel

Escrito por: paginas-web el 16 Jun 2012 - URL Permanente

Existen distintos servicios en la red que nos proporcionan soporte para poder insertar fuentes especiales en nuestra web (Google fonts, el sevicio de Adobe, Typekit, etc), aunque uno de los más populares es sin duda Font Squirrel.
Este servicio además de contar con una interesante colección de fuentes, proporciona abundante información al diseñador y desarrollador web sobre el manejo de las mismas.
El procedimiento es distinto al de Google fonts ya que la fuente especial debe ser descargada para posteriormente ser subida a nuestro servidor. Esto proporciona mayor confianza a los diseñadores ya que no dependen de las oscilaciones empresariales de terceros, como sucede con la vía Google fonts.

La facilidad de uso de Font Squirrel es notable y una vez descargada la fuente desde su web, nos dará un zip con los distintos formatos de la misma para que sea compatible tanto con navegadores como con distintos dispositivos. En el zip también obtendremos el código @font-face de CSS pertinente para poder insertarlo en nuestra hoja de estilos, además encontraremos un par de HTML´s con distintos ejemplos del comportamiento de la fuente en varios tamaños.

Sin duda Font Squirrel es uno de los servicios tipográficos mejor trabajados que existen hoy en la red.

www.fontsquirrel.com

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

16
May 2012

Fuentes y pictogramas para usar en nuestros proyectos web

Escrito por: paginas-web el 16 May 2012 - URL Permanente

Qué duda hay sobre la importancia que tiene para diseñador web el conocimiento y uso adecuado de las fuentes en sus proyectos. Es una parcela en la que existe abundancia y creatividad.
En este post agruparemos algunos recursos y plataformas útiles para todos los diseñadores web interesados en las fuentes y pictogramas.

Empezaremos por Fontomas. Este servicio ofrece un conjunto de pictogramas llevados a cabo a partir de iconos
Es un proyecto de código abierto planteado con una sencillez máxima, en 3 pasos (selecciona, ordena y salva) podemos crear una fuente personalizada en formato vectorial
La web del proyecto es:
http://fontello.com/

Siempre es interesante estar al día de nuevas plataformas que publican selecciones interesantes de fuentes gratuitas:

En addictivefonts.com se puede encontrar una interesante recopilación de fuentes clasificadas por estilos que harán las delicias de todos los amantes de la tipografía.
Todas las fuentes tipográficas incluidas en esta selección están disponibles de forma gratuita para cualquier interesado.

Otro sitio reseñable es Instanshift. En la sección dedicada a fuentes podemos encontrar un número notable de posts en los que recopilan distintas colecciones fuentes o nos ofrecen recursos variados en relación a la tipografía
http://www.instantshift.com/category/fonts/

Servicios para insertar fuentes en nuestros proyectos web

Existen en la actualidad diversas formas de conseguir que los usuarios puedan visualizar en sus ordenadores las fuentes especiales que hemos usado en nuestro proyecto web. Veamos algunos de los más populares.

TypeKit es un servicio desarrollado por Adobe que nos permite insetar fuentes de forma sencilla en nuestros proyectos, dispone de un amplio catálogo.

Para poder usar este servicio es necesario crear una cuenta gratuita, seleccionar las fuentes y pegar el script que nos dará la plataforma en nuestro proyecto..

www.typekit.com

Google web fonts dispone de un amplio catálogo de fuentes en continuo crecimiento
El sistema es similar al de Typekit, se generará un script que debemos incluir en nuestra web.

Las fuentes de Google web fonts tienen una ficha con los datos del diseñador, descripción, caracteres y ejemplos de textos en distintos tamaños, colores y variantes.

www.google.com/webfonts

Otra de las formas (quizá la más popular) para insertar fuentes personalizadas en nuestra web es Cufón. Esta librería conocida JavaScript, nos permite insertar cualquier fuente tipográfica en un website. Su uso es libre y sencillo. Aunque es importante saber que su funcionamiento está basado en transformar la tipografía en imagen, por lo que solo es recomendable para logos y encabezados.

http://cufon.shoqolate.com/generate/

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

28
Mar 2012

Animaciones para nuestra web con Javascript

Escrito por: paginas-web el 28 Mar 2012 - URL Permanente

La ya incuestionable emergencia de HTML5 como sustituto de Flash hace que muchos diseñadores y desarrolladores web se estén planteando qué tecnología es la que les permitirá realizar efectos de animación en sus páginas web, ya que son muchos los clientes los que aún piden que en su página haya animaciones o recursos de movimiento.

Por el momento, y aunque quizá de una forma no tan completa u versátil como la que ofrece Flash, podemos recurrir a una poderosa librería llamada Spritely.

Con este plugin podremos añadir animaciones a nuestros proyectos web , obteniendo animaciones de personajes, scrolls complejos con varios planos, etc. Todo ello, basándonos únicamente en Javascript y CSS.

Su uso es sencillo, fundamentalmente se basa en modificar el atributo background-image de cualquier imagen que tengamos en nuestro CSS, para conseguir la animación.
Podremos utilizar imágenes PNG o GIF para crear estos nuestros efectos visuales.
Spritely se basa en dos métodos: sprite() y pan() los cuales se encargan simplemente de animar la propiedad css background-image como ya hemos mencionado.

Se puede especificar la velocidad (speed, píxeles por frames). Y para superponer capas se utiliza la propiedad CSS z-index.
Combinando Javascript y CSS (e imaginación) se puede desplegar una abanico muy potente para el desarrollo de efectos y animaciones web.

Spritely nos permitirá obtener de forma sencilla animaciones de gran calidad para nuestros proyectos de diseño y desarrollo web, que además serán compatibles con la mayoría de navegadores web, iPad y dispositivos móviles. Por lo que puede resultar una alternativa interesante para todos aquellos interesados en el universo de HTML5, CSS y Javascript para el desarrollo de páginas web con efectos y animación.

www.spritely.net

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

09
Mar 2012

Dos herramientas para el desarrollo de aplicaciones para dispositivos móviles

Escrito por: paginas-web el 09 Mar 2012 - URL Permanente

En este post presentaremos dos herramientas para todos aquellos desarrolladores que desean crear aplicaciones para dispositivos móviles pero no conocen los lenguajes nativos de cada una de las plataformas o buscan formas de sintetizar y hacer más sencillo y accesible el desarrollo.

Por una parte DHTMLX Touch es una librería Javascript. Se trata de framework que permite la creación sólida de aplicaciones ejecutables en iPhone, iPad, Android, Blackberry (es decir, prácticamente todo el espectro del mercado de dispositivos móviles)
Esta librería es compatible con los navegadores más populares que dan soporte para HTML5

El primer lanzamiento de esta librería es compatible con los navegadores web móviles más importantes que ofrecen soporte de HTML5.

La Información detallada sobre esta excelente librería se encuentra en su página web:

dhtmlx.com/touch

Por otra parte, tenemos el proyecto Phoneapp. Esta plataforma está basada en HTML5, Javascript y CSS y nos facilita la creación de aplicaciones para dispositivos móviles basado en tecnologías populares que posteriormente podremos compilar para hacer compatibles con smarthphones de Apple, Android, WebOS, Blacberry, Symbian y Windows Mobile.

El proceso es sencillo y se realiza en tres etapas, se crea la aplicación en HTML, CSS y Javascript, se sube a Phoneapp y la plataforma las prepara y entrega listas para los distintos dispositivos.

Desde su web podemos acceder a toda la documentación necesaria.

phoneapp.com

Dos excelentes plataformas muy útiles para el diseño y desarrollo web de aplicaciones para dispositivos móviles.

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

04
Mar 2012

Dinamizando el trabajo con el código de nuestras páginas web

Escrito por: paginas-web el 04 Mar 2012 - URL Permanente

Siempre es interesante conocer y tener a mano distintos recursos que permitan al desarrollador web poder optimizar y dinamizar su trabajo.
En internet las opciones para echar mano de herramientas son múltiples.
En este post presentaremos dos que nos parecen interesantes.

Chop es un servicio pensado para mejorar nuestro código de forma colaborativa. Su uso es sencillo, desde su web agregamos el fragmento de código que deseamos compartir y su lenguaje y con un solo click en Chop it! lo ponemos al servicio de una comunidad de desarrolladores que puedan resolver nuestras dudas y contribuir a su optimización.
Chop abarca unos 15 lenguajes de programación.
Su uso es gratuito, no se necesita registro

chopapp.com

Otro servicio interesante es Ideone, donde podremos ejecutar y compilar distintos lenguajes de programación. El manejo de Ideone es fácil, simplemente hay que seleccionar el lenguaje de programación y una vez escrito podremos compilarlo a través de su opción run code. Una vez creado, desde Ideone podremos descargarlo a nuestro ordenador y también obtendremos una URL que nos permitirá enviar el enlace con el código con quien estimemos conveniente.
Ideone soporta alrededor de 40 lenguajes (Perl, PHP, Python, Visual Basic, Ruby…)
Existe otra sección de nuevos lenguajes con ejemplos interesantes.

ideone.com

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

28
Feb 2012

Optimizar nuestro trabajo con CSS usando Less

Escrito por: paginas-web el 28 Feb 2012 - URL Permanente

CSS es un lenguaje cada vez más poderoso y complejo para el desarrollo de páginas web.
Un diseñador habituado al uso de CSS se encontrará en el desarrollo de proyectos de mayor envergadura con la dificultad de una cierta falta de flexibilidad en este lenguaje, que obliga a repetir reglas y realizar revisiones continuas en la hoja de estilos de cara a una mejor optimización.
Todo esto, como es lógico, se traduce en incremento en el tiempo y esfuerzo en el desarrollo de una página web.
Para solventar este tipo de cuestiones existen plataformas como Less.
Less ayuda a hacer que CSS se comporte de forma dinámica. Permite crear variables, reglas anidadas, operaciones que hacen que los estilos se comporten de manera mucho más óptima, de tal forma que el diseñador pueda ahorrar tiempo y peso final en su hoja de estilos.
Less funciona a través de una librería Javascript. La forma recomendada de utilizarlo es compilarlo previamente y enlazar la hoja de estilos y el archivo Javascript en nuestro HTML. Para realizar el proceso de compilación recomendamos dos plataformas que nos facilitarán la tarea y de paso nos ayudarán a comprender como funciona Less.
Crunch: es una aplicación gratuita de Adobe desarrollada en Adobe AIR y Winless: otra aplicación gratuita que se encargará de hacer la compilación de tus archivos.

Como cualquier recurso nuevo al diseñador puede tomarle cierto tiempo aprenderlo, pero desde luego una vez integrado en el trabajo ese esfuerzo inicial se verá recompensado en obtener una forma de trabajo con CSS más dinámica y eficiente, ahorrando tiempo y esfuerzo en el desarrollo de las hojas de estilo que una página requiere.

lesscss.org
crunchapp.net
winless.org

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live

24
Feb 2012

Crear páginas web en Flash sin necesidad de programar

Escrito por: paginas-web el 24 Feb 2012 - URL Permanente

Muchos son los que les gustaría tener su página web hecha en Flash pero se encuentran con la dificultad de no saber utilizar el programa.
Para todos aquellos que deseen crear su página web usando esta tecnología, existe una opción gratuita que les permitirá crear una web sin programar ni una sola linea de código. La plataforma que ofrece este servicio es Wix. Este servicio gratuito dispone de una serie de atractivas plantillas donde el usuario una vez seleccionada la que le guste podrá a través de un editor ir personalizando su web a medida. El servicio cuenta con una serie de guías y servicio de soporte en caso de necesitar insertar vídeos u otros recursos.
Wix comenzó su actividad en 2008 y hasta la fecha se han creado más de 13 millones de páginas web. Otro aspecto importante de Wix es que cuenta con una comunidad de desarrolladores en constante actividad.
El servicio ofrece además la posibilidad de crear sitios para dispositivos móviles o desarrollar de forma intuitiva una página de fans de Facebook.
Por si fuera poco, Wix es una plataforma gratuita, solo hay que darse de alta y ya se puede empezar.
Definitivamente Wix es un servicio muy atractivo para quienes desean crear una página web en Flash de forma fácil e intuitiva.

es.wix.com

Compartir

  • Eskup
  • Tuenti
  • Meneame
  • Bitacoras
  • iGoogle
  • My Yahoo
  • My Live