Como siempre les digo, mientras más opciones mejor, y si bien últimamente estuve enviando plantillas en .psd que requerían conocimientos de maquetación, también hay veces que encuentro plantillas que ya se encuentran en HTML y solo requieren algunos cambios mínimos que por lo general son solo gráficos.
MailCheck es un plugin jQuery de lo más simple pero no por eso menos útil. Sirve para validar direcciones de correo electrónico, pero no solamente su sintaxis, sino también verifica la validez del dominio que la acompaña. Es así que por ejemplo podemos validar si el usuario en lugar de escribir @hotmail.com escribe hotnail.com, sugiriendo del posible error.
Las animaciones que podemos realizar solo utilizando CSS3 y sin la necesidad de emplear JavaScript, son extremadamente poderosas. Probablemente en los próximos años la forma de animar los sitios web cambie radicalmente, haciendo más eficientes los sitios web.
Las propiedades para animar de CSS3 se pueden utilizar hoy en día, navegadores como Chrome, Safari, y Opera en casi todas sus versiones cuentan con soporte completo, lo mismo ocurre con Firefox e Internet explorer en sus versiones más nuevas. Así que si el publico de un sitio web se caracteriza por tener versiones nuevas de sus navegadores no habría ningún inconveniente en hacer uso de las propiedades para realizar animaciones de CSS3.
En TutorialZine, un blog excelente con muy buenos tutoriales y recursos para diseñadores, nos brindan en descarga directa un excelente menú animado que solo utiliza CSS3, ademas de obviamente el tutorial en donde se explica com ose implementaron las distintas propiedades.
El menú se ve de la siguiente manera:
No se olviden de visitar la demostración online.
El menú es muy simple pero cumple perfectamente su cometido. Mi sugerencia es comenzar a perderle el miedo a CSS3 y sobretodo a la compatibilidad cruzada con los distintos navegadores. La adopción de los navegadores más modernos se acelero considerablemente en estos últimos meses, algo que se ve reflejado en las estadísticas de cualquier sitio web.
Siguiendo con la tendencia de incentivarlos a migrar a HTML5 queremos compartir con ustedes 8 plantillas web profesionales HTML5 que son completamente gratis para que utilicen en sus próximos diseños, después de todo HTML5 es una tendencia global en cuanto a diseño web y que poco a poco se esta convirtiendo en un estándar, es muy recomendable porque una de sus mayores ventajas es que incluso utilizando animaciones hechas con HTML5 y CSS3 sus sitios seria totalmente visibles y adaptables para los usuarios que naveguen en Internet con un iPad, iPhone y cualquier tableta o telefono móvil del mercado.
En la búsqueda de opciones originales para presentar galerías fotográficas, se pueden encontrar diferentes métodos técnicos o se puede optar por opciones vistosas que solo cumplan con una función decorativa.
Al utilizar este tipo de elementos, debemos tener en cuenta que poseen una estética propia y generan un entorno en consecuencia, es por ello que si necesitan realizar algún proyecto extremadamente sobrio, puede que no sea la mejor opción.
Descargar Taped Image Corners | PixelsDaily
En cambio, si lo que desean es simplemente destacar una galería de forma fácil y rápida, este efecto de cintas puede resultarles muy útil. Como podrán ver cuando descarguen el recurso, el funcionamiento es muy simple y no posee mayores complicaciones para su utilización. Hay siete opciones con diferentes posiciones de cinta adhesiva en sus esquinas, todo elaborado en html y css.
Pie Menu es un fantástico plugin desarrollado con el framework jQuery y con la potencia de CSS3 para la creación de un bonito menú circular animado.
Este menú circular funciona de tal modo que las opciones se encuentran escondidas, y solamente se muestran cuando decidimos extender el menú, para realizar esta acción el menú realiza una atractiva animación, la misma se puede configurar con apenas unos pocos parámetros que nos permiten seleccionar el ángulo de salida, el radio del circulo, etc.
Otro detalle es que el menú puede configurarse con la capacidad de poder ser arrastrado. Esta opción resulta practica para los usuarios en determinadas situaciones en donde el espacio de trabajo se modifica continuamente.
Ejemplo de uso:
Estructura HTML:
< div id='outer_container' class="outer_container" >
< a class="menu_button" href="#" title="Toggle">
< span>Menu Toggle
< ul class="menu_option">
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< li>< a href="#">< span>Item< /span>< /a>< /li>
< /ul>
< / div>
JavaScript:
$('#outer_container').PieMenu({
'starting_angel':0(Starting Angle in degree),
'angel_difference' : 90(Displacement angle in degree),
'radius':100 (circle radius in px),
});
No olviden visitar el sitio oficial del plugin, si se encuentran interesados en utilizarlo les recomiendo ver su demostración online.
Web: Pie Menu
Fuente: http://www.kabytes.com/programacion/menu-circular-desplegable-que-funciona-con-jquery-y-css3
En varias oportunidades les he comentado sobre las bondades de CSS3 y con ellas, los problemas que pueden llegar a tener al momento de implementarlos para plataformas web. Es por ello que mi recomendación es aplicar estos efectos con mucho cuidado y sabiendo que en algunos exploradores no podrán ser visualizados correctamente.
Mi selección sería sobre plataformas offline, aplicaciones y gráficos que puedan presentarse a través de un explorador determinado, en redes cerradas o presentaciones interactivas, donde uno mismo tenga la opción de decidir qué explorador usar.
Descargar código de Annotation Overlay Effect | Ver Demo | Tympanus
Dejando las especificaciones un poco de lado, quiero mostrarles una forma de presentación de anotaciones sobre imágenes que resulta muy atractivo y puede llegar a solucionar problemas de espacio. Al hacer clic en una imagen, aparecerán comentarios sobre la misma, cubriendola sutilmente. De esta forma podemos desplegar información accesoria y anotaciones que deseamos aclarar sobre la muestra en cuestión.
Fuente: http://www.kabytes.com/desarrollo/anotaciones-superpuestas-en-css3
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.
SLIDING LETTERS WITH JQUERY
RESTAURANT WEBSITE AND GALLERY TEMPLATE
CIRCULAR DISCOGRAPHY TEMPLATE WITH JQUERY
3D WALL GALLERY
B&W BOX GALLERY
Thumbnails Navigation Gallery with jQuery
Creating a polaroid photo viewer with CSS3 and jQuery
AnythingSlider
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:
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 
Web: LionBars
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.
Los 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.
<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 quehace referencia a tu fuente, la cual debiste embeber en el SWF utilizando Flash.sIFR.activate(cochin); // From revision 209 and onwardssIFR.replace(cochin, { selector: 'h1' });</script>
.sIFR-active h1 { visibility: hidden; font-family: Verdana; line-height: 1em; font-size: 18px; }
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.
Tras 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.
@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'); }
h1 { font-family: ‘MyFontFamily_Squirrel’, Arial, serif; font-weight: 400; }
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+
Y 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.
<link href=’http://fonts.googleapis.
com/css?family=Mrs+Saint+ ’ rel=’stylesheet’ type=’text/css’>Delafield
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.
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.
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 | |
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.
© 2006 Miracle Design. Todos los derechos reservados