SEO & Web Design» Web 2.0

Utilizar fonts ttf en diseño web con @font-face

José Meza — Fri, 07 Aug 2009 08:00:47 +0000

@font-face fue incluida en el estandar CSS2 y ha sido implementada en el Internet Explorer desde su version 5 y utilizada bajo el formato Embedded Open Type (.eot), ningun otro navegador lo soportaba.

Hoy es soportada por la mayoria de los navegadores debido a que esta directiva ha sido incluida en el CSS3, soportando no solo fuentes OpenType (.eot) tambien TrueType (.ttf).

Esta directiva debera ser declarada usando @font-face
ejemplo:

 @font-face {
font-family: Ghostwriter;
src: url("http://site/font/ghostwrit.ttf");
}

h1 { font-family: "Ghostwriter"; }

Esta directiva también nos permite definir otras propiedades del font, como formato, grosor y estilo.
ejemplo:

 @font-face {
font-family: Techi;
src: url("fonts/font_techina_24b.otf") format("opentype");
font-weight: bold;
font-style: italic;
}

También te puede interesar:

No hay posts relacionados.

ColorBox :: jQuery Lightbox

José Meza — Mon, 03 Aug 2009 16:50:51 +0000

ColorBox es un lightbox muy ligero (9kb) y muy fácil de personalizar, este plugin para jQuery 1.3 soporta:
fotos
Galerias de fotos
Slideshows
Ajax
Contenido iframe
flash/video

Visita: http://colorpowered.com/colorbox/

Demo: http://colorpowered.com/colorbox/core/example2/index.html

También te puede interesar:

No hay posts relacionados.

Elimina el HTML en los comentarios (WordPress)

DeVoRoUx — Fri, 31 Jul 2009 15:58:31 +0000

Seguramente ya sabrás que WordPress convierte las URLs de los comentarios en enlaces activos, aunque no estén codificados como tales. Esto, que es cómodo para los lectores, y no digamos para los spammers, puede llegar a convertirse en un problema para ti si se usa en demasía, provocando más enlaces salientes que los que recibas, [...]

También te puede interesar:

No hay posts relacionados.

Photo Slide (Flash Slider)

José Meza — Wed, 29 Jul 2009 07:00:03 +0000

Cada vez es más frecuente ver slide noticias, foto slide, texto slide, etc. esta herramienta tan práctica se ha puesto de moda y es algo que toda buena web debería tener.

JC Play List es un componente creado en AS3 de fácil uso y diseñado para una agradable presentación visual (.xml y RSS 2.0 feeds de Picasa y Flickr).

Puedes usar JC Play List para mostrar listas que contengan imágenes con títulos y descripción, índice numérico e información adicional, esta herramienta puede ser personalizada para mostrar listas en posición vertical, slide horizontal, con controles o sin controles, slide scroll automático ó scroll sensible al movimiento del mouse.

Enlace: http://www.jumpeyecomponents.com/Flash-Components/User-Interface/JC-Play-List-285/
Demo: http://www.jumpeyecomponents.com/Flash-Components/User-Interface/JC-Play-List-285/examples.htm

También te puede interesar:

No hay posts relacionados.

24 hermosos diseños web realisticos (Immersive Design)

José Meza — Mon, 27 Jul 2009 14:52:08 +0000

La mayoría de websites son solo una colección de gráficos y texto colocados de una manera atractiva y ordenada, pero para algunos el diseño web es más que eso, ya que con un buen diseño pueden transmitir rápidamente un mensaje, una filosofía y conservar al visitante a que siga explorando nuestra web, ya que la primera impresión lo es todo y muchos al no ver lo que esperan solo cierran su navegador y pasan a la siguiente búsqueda.

Go Summer Project

Gozz

Serial Cut

Bulls Boars n Barra

CCC Celt

Orca Bay Seafoods

Hotel-Prestige

Votaw

Bently Reserve

Cedevitago

Frizo

C Galvin

Villa Bianca Hotel

Rainbow Cleaners

Agota

Hellenic Holidays

Creative Spaces

Nuevo Aurich

Falk Adventures

Magnolia Park

Future Talent

Zoosa - Adelaide Zoo

Creative People

También te puede interesar:

No hay posts relacionados.

Webs con bellos diseños ilustrados (Beautifully Illustrated Websites)

José Meza — Mon, 27 Jul 2009 05:22:45 +0000

Muchos Diseñadores Web utilizan hermosas ilustraciones para diseñar sus Websites personales y así poder plasmar toda su creatividad o simplemente por diversión.

Sin embargo vemos que esta técnica también puede ser encontrada en Website corporativas o de negocios explotando la grafica como señales visuales para captar la atención del visitante.

A continuación algunas webs con bellos diseños ilustrados que nos pueden inspirar.

Sketchen

También te puede interesar:

No hay posts relacionados.

Ideas creativas para tablas, diseño de planes de venta

José Meza — Sun, 26 Jul 2009 08:08:58 +0000

Una página web bien desarrollada y organizada se traduce en éxito, transmitir una gran cantidad de datos al usuario teniendo solo una pequeña área a mostrar muchas veces es complicado, pero con un buen diseño esto puede ser fácil de leer y comprender, sobre todo cuando vendemos u ofrecemos algún producto o servicio.

Al diseñar nuestros planes para venta, es necesario resaltar las características de los servicios ofrecidos, siendo este el punto crucial para concretar una venta.

Aquí hay varios ejemplos muy creativos de empresas que nos pueden servir de inspiración a la hora de diseñar nuestros propios paquetes de venta.

También te puede interesar:

No hay posts relacionados.

Phothoshop Letterpress emboss text effect, efecto de letras troquelado

José Meza — Wed, 15 Jul 2009 22:22:24 +0000

Letterpress o efecto de troquel se ha puesto de moda por los diseñadores, tal es así que el mismo Adobe incluye dicho efectos en todos sus logos de la suite Adobe CS4, esta tendencia muy de moda pasa a ser una de los tantos efectos utilizados para el ya conocido estilo Web 2.0, resaltando y [...]

También te puede interesar:

No hay posts relacionados.

Tipografías para mi web de estilo web 2.0

José Meza — Wed, 15 Jul 2009 06:33:02 +0000

Se escucha mucho hablar sobre Web 2.0 pero pocos entienden el concepto, pero lo que esta claro es que este nuevo concepto trajo consigo mejoras e interacción de casi toda herramienta diseñada para Web, las mejoras visuales son una notable característica en este paso, ya que podemos enriquecer nuestros diseños añadiendo tipografías que sean de fácil lectura o simplemente bellas que resalten nuestro diseño, generando un buen impacto visual a nuestros visitantes, a continuación algunos ejemplos de estilos CSS.

 .style1 {
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;
}

.style2 { font-family: Cambria, serif; font-size: 13px; font-style: normal; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; line-height: 1.7em; }

También te puede interesar:

No hay posts relacionados.