04 Jun

Crear una linea de tiempo con jQuery

Las lineas de tiempo pertenecen al grupo de estructuras para mostrar información que existen desde siempre y que con las redes sociales, especialmente Facebook, resurgieron con total fuerza.

Uno de los aspectos más atractivos de las lineas de tiempo es que su estructura permite mostrar muchísima información en un espacio reducido sin dejar de ser extremadamente fáciles de entender.

Crear una linea de tiempo es sencillo si nuestra información, especialmente los elementos que la componen son de similares características entre sí, lamentablemente esto es algo que no siempre ocurre, por lo que crear una linea de tiempo se vuelve un trabajo bastante complicado. Para nuestra suerte es que existe Timeline, un plugin jQuery que es una solución brillante a la hora de generar lineas temporales.

Visita la demostración online

Este plugin funciona de forma conjunta a otros dos plugin muy usados y conocidos, estoy hablando de Tabletop.js (para gestionar la información) y Isotope (para el layout). Son apenas dos dependencias para lograr un excelente resultado.

Timeline esta testeado en Chrome, Firefox, Safari, y IE 7-9. Así que no hay excusas para no agregar una linea de tiempo a tus proyectos si lo que estas buscando es una forma simple de mostrar mucha información de forma cronológica.

Web: Super Awesome Vertical Timeline

Share this
19 Mar

15 Galerias de Imagenes para jQuery

Quienes esten dedicados a diseño web seguro mas de una vez hayan tenido la necesidad de emplear galerias de imagenes con efectos de slideshows, la verdad son muy vistosos y le dan un estilo bastante elegante a los sitios claro si se consideran dentro del diseño y se adapta correctamente, una de las librerías mas conocidas en Internet es jQuery y utilizando como base muchos son los desarrollos de galerias de imagenes jQuery las que hay en Internet, así que para ahorrarles un poco la búsqueda vamos a recomendarles algunas.

La recopilación fue hecha en Smashing Hub y contiene un total de 15 excelentes scripts jQuery para galerías de imagenes, como siempre les comparto algunos y al final el enlace para descargar todas.

Automatic Image Montage

Demo | Download

galerias de imagenes jQuery 1 15 Galerias de Imagenes para jQuery

Restaurant Website and Gallery template

Demo Download

galerias de imagenes jQuery 4 15 Galerias de Imagenes para jQuery

Grid Navigation Effects

Demo | Download

galerias de imagenes jQuery 3 15 Galerias de Imagenes para jQuery

Sliding Background Image Menu

Demo Download

galerias de imagenes jQuery 2 15 Galerias de Imagenes para jQuery

 

SLIDING LETTERS WITH JQUERY

 

slidingLetters

Demo || Download )


RESTAURANT WEBSITE AND GALLERY TEMPLATE

 

 

RestaurantTemplate

Demo || Download )


CIRCULAR DISCOGRAPHY TEMPLATE WITH JQUERY

 

 

circularDiscographyTemplate

Demo || Download )


3D WALL GALLERY

 

 

3dwallgallery

Demo || Download )

 


B&W BOX GALLERY

 

bwboxgallery

Demo || Download )

 


Thumbnails Navigation Gallery with jQuery

thumbnails_navigation_gallery

Demo || Download )


Creating a polaroid photo viewer with CSS3 and jQuery

 

creating_photo_viewer

Demo || Download )

 


AnythingSlider

 

anythingslider

Demo || Download )

 

Share this
13 Mar

Barras de scroll estilo OS X Lion con jQuery

LionBars es un plugin jQuery para la creación de barras de scroll copiando el mismo estilo que las del sistema operativo Lion. El script es muy liviano y funciona en la mayoría de los navegadores modernos.

Específicamente los navegadores que soportan a la perfección el uso de este plugin son: IE8, Safari, Firefox, Chrome, Opera, tanto en Windows como en OSX.

Las barras de scroll modificadas se ven de la siguiente manera:

barras de scroll estilo OS Lion

Modo de uso

1. Incluir la ruta completa al script

<script type="text/javascript" src="jquery.lionbars.0.3.min.js"></script>

2. Incluir las hojas de estilo necesarias

@include 'lionbars.css';

3. Finalmente llamar al plugin para que haga su trabajo

$('#box').lionbars();

El plugin no tiene demasiada ciencia, no obstante es un lindo detalle para utilizar en nuestros sitios web y darle un toque de distinción a nuestro diseño :D

Web: LionBars

Share this
11 Mar

Fuentes Web, soluciones y como utilizarlas

fuentes web Fuentes Web, soluciones y como utilizarlas

Cada día son mas las paginas que utilizan HTML5 y CSS3, y también los navegadores cada vez ofrecen mayor compatibilidad con estos estándares web, una de las características que estos estándares integran es el soporte para fuentes web desde el servidor via CSS utilizando @font-face y no desde el cliente (la maquina del usuario).

Antes en diseño web los diseñadores nos teníamos que limitar a utilizar fuentes comunes que podían ser visualizadas desde cualquier navegador y sistema operativo, las más comunes eran: Arial, Times New Roman, Impact, Serif, Andale Mono, Trebuchet MS y Verdana.

En la actualidad las necesidades en diseño web, son distintas y los diseñadores buscamos poder utilizar tipografías mas estilizadas que tengan un mayor impacto visual en los visitantes, para lograr esto han aparecido en los últimos años algunas herramientas, de las cuales vamos a hablarles un poco y como utilizarlas.

sIFR

 Fuentes Web, soluciones y como utilizarlasLos diseñadores siempre peleamos la posibilidad de usar otro tipo de fuentes mas estilizadas en nuestros diseños sin tener que usar imagenes, al principio la primera alternativa que salió fue sIFR que te permitia utilizar otras fuentes diferentes a las básicas mediante Flash, esta te permitia embeber un objeto flash el cual imprimia tu texto con la fuente que previamente le habías configurado en el código.

Pero el primer problema como siempre con Flash era que aumentaba el consumo de recursos del servidor y en ocasiones la compatibilidad del navegador provocaba que el texto saliera en blanco, y por ultimo sIFR ha quedado rezagado ya que Flash no es compatible con los navegadores para móviles y la gran mayoría de estos le han dado la espalda al soporte para Flash, de este modo sIFR se ha convertido en una alternativa pero que no es “todo terreno”.

Pero como todo, el desarrollo y la integración de los estándares en los navegadores cada vez fue mayor, y también surgió un problema el 90% de los usuarios que teníamos una enorme biblioteca de fuentes las teníamos en formatos legibles para nuestro sistema operativo especifico, y en web los navegadores entre su guerra había optado por ofrecer soporte para distintos formatos: EOT, WOFF, SVG, etc.

Como utilizar sIFR 3.0

  • Descargar la ultima versión de sIFR (Actualmente es 3.436 estable) (Link)
  • Sube lor archivos que descomprimiste del archivo que descargaste y agrega el siguiente código HTML, entre las etiquetas <head>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
<script type="text/javascript">
var cochin = { src: 'cochin.swf' }; //Debes subir el archivo cochin.swf que 
hace referencia a tu fuente, la cual debiste embeber en el SWF utilizando Flash.
sIFR.activate(cochin); // From revision 209 and onwards 
sIFR.replace(cochin, { selector: 'h1' });
</script>
  • Por ultimo en tu archivo CSS debes incluir esto para asignar tu fuente a las etiquetas deseadas.
.sIFR-active h1 { visibility: hidden; font-family: Verdana; line-height: 1em; font-size: 18px; } 

Convertir fuentes TTF a EOT

Entonces aparecieron las aplicaciones para convertir fuentes TTF (las mas comunes) a estos formatos, pero eran muy complicadas o costosas, entonces los usuarios exigimos algo de acuerdo a nuestras necesidades, porque claro no todos los diseñadores gráficos o web somos programadores o expertos frente a una computadora.

convertir de fuentes para web Fuentes Web, soluciones y como utilizarlas

font squirrel logo Fuentes Web, soluciones y como utilizarlasTras las exigencias aparecio Font Squirrel con un convertidor de fuentes, el cual permiteconvertir fuentes TTF a EOT y los otros formatos ofreciendo la posibilidad de utilizar nuestras fuentes en nuestra pagina web utilizando @font-face de tal modo que todos los usuarios vean el mismo estilo tipografico en nuestro diseño y que puedan interactuar con el texto copiando y seleccionando los fragmentos deseados, pero (mas peros) ahi no acaba también tiene sus carencias el sistema de Font Squirrel y no quiere decir que sean errores o este sea malo, de hecho no son carencias es respeto a las licencias, el convertidor para fuentes web no permite convertir cualquier fuente, por ejemplo si intentas convertir Helvetica para Web el sistema no te va a dejar porque esta tiene licencias comerciales que no permiten dicho proceso. Para entonces CSS3 ya se empezaba a esparcir cada vez mas por la web, entonces en Font Squirrel empezaron a generar un repositorio de fuentes web gratis que podemos descargar para utilizarlas en nuestro equipo o podemos descargar los formatos necesarios para utilizarlas en nuestra pagina web, este movimiento fue algo genial para muchos diseñadores.

Como utilizar fuentes descargas de Font Squirrel utilizando @font-face

  • Ir a Font Squirrel  y descargar la fuente que deseas o convertir tu fuente (generador).
  • Ahora sube la fuente que descargaste o creaste a tu servidor
  • Y en el archivo CSS debes incluir un código similar a este, recuerda reemplazar “myfont-webfont” por el nombre de archivo de la fuente que subiste.
@font-face {
	font-family: 'MyFontFamily_Squirrel';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); }
  • Por ultimo para utilizar tu fuente en las etiquetas que desees utilizaras el valor que asignaste en el parametro font-family dentro del código mencionado anteriormente, ejemplo:
h1 { font-family: ‘MyFontFamily_Squirrel’, Arial, serif; font-weight: 400; }
  • Más información de como utilizar @font-face en: font spring

Este metodo tiene la limitante de compatibilidad con los navegadores web, sin embargo la gran mayoría de los navegadores modernos ya ofrecen soporte para @font-face, he aquí la lista: Safari 5.03+, IE 6-9+, Firefox 3.6-4+, Chrome 8+, iOS 3.2-4.2+, Android 2.2-2.3+, Opera 11+

Google Web Fonts

google web fonts logo Fuentes Web, soluciones y como utilizarlasY llego el grande, Google lanzo Google Web Fonts que en teoría ofrece el mismo servicio que Font Squirrel pero no, Google fue un poco mas halla, si para implementar las fuentes que descargabas necesitabas agregar 10 lineas en tu archivo CSS, google simplifico esto, y en su servicio ofreció la posibilidad de insertar fuentes web en tu pagina unicamente insertando un fragmento de código HTML, sin duda Google llego y ofreció mejores características, entre ellas: Simplifico la forma de uso y  puso sus servidores para que no tengamos que descargar las fuentes y subirlas a nuestro servidor, de esta manera reducio el tiempo de carga de nuestras paginas.

El servicio de Google elimino la necesidad de descargar y subir archivos al servidor, también la necesidad de utilizar @font-face.

También Google ofrece la posibilidad de descargar las fuentes para utilizarlas en nuestro equipo, actualmente el directorio de fuentes gratis en Google Web Fonts incluye un total de 436 tipografías y la verdad son muy buenas, a diferencia del directorio de Font Squirrel muchas de las fuentes publicadas en Google Web Fonts son exclusivas del directorio.

Como utilizar Google Web Fonts

google web fonts colletions 600x310 Fuentes Web, soluciones y como utilizarlas

  • Debes entrar a Google Web Fonts
  • Selecciona la tipografía que deseas utilizar en tu pagina.
  • Quick Use: Si solo utilizaras una fuente
  • Add to Collection: Si utilizaras mas de una.
  • En la opción QuickUse se abrira otra pagina baja y encontraras un código similar a este:

<link href=’http://fonts.googleapis.com/css?family=Mrs+Saint+Delafield’ rel=’stylesheet’ type=’text/css’>

  • Copia y pega tal cual entre las etiquetas <head> </head> de tu pagina, de este modo tu pagina le pedira a Google las fuentes que seleccionaste.
  • Ahora en tu CSS para aplicar las fuentes seleccionadas a tus etiquetas, en las propiedades CSS de font-family unicamente tendrías que añadir el nombre de tu fuente, por ejemplo:
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

Listo de este modo tu sitio ya estaría mostrando las fuentes que seleccionaste, a estas fuentes puedes cambiarles el color, tamaño o agregarles efectos CSS tal como si lo hicieras con una fuente normal.

Otras soluciones que ofrecen fuentes web gratis y con costo

OpenType

Las tipografías usualmente poseen las características básicas, como Mayúsculas, Minúsculas, numerales, símbolos de puntuación y acentuación, sin embargo las tipografías profesionales tienen aun más características que permiten que las tipografías tengan mas estilo, algunas de las características extras son:

Common ligatures “liga”
Discretionary ligatures “dlig”
Small caps “smcp”
Lining numerals “lnum”
Old-style numerals “onum”
Swash alternates (index number) “swsh” n
Styleset (01–20) “ss01–20”

CSS3 tiene soporte para utilizar estas caracteristicas sin embargo no asi todos los navegadores, los navegadores que ofrecen soporte a estas características son Firefox, Internet Explorer 10 y Google Ghrome para Windows, la siguiente imagen muestra un ejemplo utilizando la tipografía Magneta.

ejemplo de OpenType 489x350 Fuentes Web, soluciones y como utilizarlas

Como afecta OpenType en los programas de diseño? Bueno las siguientes tablas te dan una idea de en que programas puedes hacer uso de estándar para tipografías.

Mac OS
Application OpenType Support
Microsoft Word® Basic
Adobe InDesign® Basic, Multilingual, Advanced
Adobe Photoshop® Basic, Multilingual, Advanced
Adobe Illustrator® Basic, Multilingual (.ttf only)
Quark XPress® Basic
Macromedia Freehand® Basic
Corel Draw® Basic, Multilingual
Microsoft Windows
Application OpenType Support
Microsoft Word Basic, Multilingual (.ttf only)
Adobe InDesign Basic, Multilingual, Advanced
Adobe Photoshop Basic, Multilingual, Advanced
Adobe Illustrator Basic, Multilingual (.ttf only)
Quark XPress Basic
Macromedia Freehand Basic
Corel Draw Basic, Multilingual

Como utilizar OpenType en Web

Es muy sencillo en este caso no tenemos que instalar nada, solo agregar algunas lineas a nuestro código CSS, lo unico que necesitamos es que los navegadores del lado del cliente ofrezcan soporte para estas características y claro que las fuentes posean alguna de las características mencionadas arriba, les dejo el snippet:

h1 { 
-moz-font-feature-settings: "liga=1, dlig=1"; 
-ms-font-feature-settings: "liga", "dlig"; 
-webkit-font-feature-settings: "liga", "dlig"; 
-o-font-feature-settings: "liga", "dlig"; 
font-feature-settings: "liga", "dlig"; 
}

Más Información sobre Open Type:

Espero que este articulo sea de utilidad para ustedes, hemos intentado cubrir la mayoría de los aspectos y principales fuentes para el uso tipografías en Web y como utilizarlas, así como OpenType un estándar que se empieza a utilizar con CSS3 que permitira agregarles aun mas estilo a las tipografías que usemos.

Share this
27 Feb

Photogé: plantilla para web de fotografía en PSD

Si se encuentran buscando opciones para desplegar su portfolio de fotógrafo, esta plantilla gratuita ofrecida por PSDStyle puede brindarles herramientas para lograr un resultado profesional y que destaque su trabajo de la mejor manera.

Photogé contiene un header extendido para poder colocar un slider con diferentes muestras o estilos fotográficos, se trata de una plantilla a pantalla completa, no requiere barra de desplazamiento vertical por lo que quien la visita queda directamente observando lo importante, que en el caso de un fotógrafo son las imágenes.

Vista previa de plantilla para portfolio de fotógrafo

Descargar Photogé | PSDStyle

Al mismo tiempo, hay algunas herramientas para dividir secciones, aunque se puede utilizar el slider como muestrario de galería, en lo personal agregaría un espacio para contener diapositivas pequeñas y permitir al usuario del sitio navegar entre las diferentes fotografías.

Posee espacios destacados para los trabajos más nuevos, menú y últimas noticias. Obviamente el resultado final dependerá de lo bien que se lleven con la maquetación, pero sin dudas es una excelente opción para conseguir algo original. El archivo de diseño está incluído en formato .psd, deberán conseguir algunas fuentes para que todo quede en su lugar, aunque si lo prefieren, pueden jugar con fuentes tipográficas y colores sin problemas.

Share this
21 Feb

Acciones animadas sobre botones con CSS3

He compartido ya algunos tutoriales para agregar animaciones en diferentes elementos de un diseño web, y les he explicado lo que sucede con la implementación de CSS3 y la compatibilidad con diferentes exploradores.

Tengan en cuenta siempre, antes de aplicar estas herramientas en los diseños, que probablemente pierdan efectos cuando se trasladen a exploradores antiguos. La idea detrás de estos efectos es ofrecer información sobre los botones, sin importar cuáles sean. En la demo verán que se utilizan iconos sociales, pero la realidad es que pueden ser reemplazados por otras opciones sin problemas.

Vista previa de animaciones sobre botones con CSS3

Descargar Animated Tooltips With CSS3 | Ver Demo | Tympanus

Verán todos los códigos competentes en el sitio, y pueden descargar el código para analizar y utilizar sin problemas. Pueden cambiar las imágenes y los textos que aparecen y elegir la forma en la que lo hacen, hay 4 opciones planteadas, pero si se animan pueden generar muchas más y quizás encontrar algunas más adecuadas a lo que están necesitando.

Share this
15 Dic

Increíbles diseños web con efecto parallax

Excelentes ejemplos de diseños web con efecto parallax, este efecto es muy atractivo ya que reemplaza el usual efecto de navegación vertical con el scroll basico, por un efecto mas atractivo con el que los diseñadores juegan ya sea vertical o horizontal, el diseño sigue una secuencia visual muy atractiva y agradable.

Consiste en utilizar multiples capas, con imagenes en posiciones absolutas, una combinación de CSS y JavaScript con excelentes resultados, algunas características de este efecto son:

  • CSS: Contenedores con posiciones relativas
  • CSS: Usar posiciones absolutas
  • CSS: Usar objetos flotantes z-index
  • Imagenes con fondos transparentes PNG
  • Imagenes, uso de sprites
  • JavaScript para reconocer posición del scroll
Les dejo un enlace a un pequeño tutorial para crear efecto parallaxVer tutorial

Activate Drinks

diseño web efecto parallax active drinks Increíbles diseños web con efecto parallax

New Zeland

diseño web efecto parallax new zealand Increíbles diseños web con efecto parallax

Mario Kart Wii

diseño web efecto parallax mario kart Increíbles diseños web con efecto parallax

Smart USA

diseño web efecto parallax smart usa Increíbles diseños web con efecto parallax

Moods of Norway

diseño web efecto parallax moods of norway Increíbles diseños web con efecto parallax

Fuente: http://www.frogx3.com/2011/11/23/increibles-disenos-web-efecto-parallax

 

 

Share this

© 2006 Miracle Design. Todos los derechos reservados