Archive for the ‘css’ Category

Usa cualquier fuente en CSS y HTML con el Font API de Google

Miércoles, Mayo 19th, 2010

Los desarrolladores/diseñadores web siempre han tenido la limitación en cuanto al uso de tipografías en el diseño web, para lidiar con esto actualmente se utilizan varias alternativas mediante el uso de Javascript e inclusive Flash, Cufón y SIFR por mencionar algunos, pero hoy Google introdujo su Font API y Font Directory en el Google I/O, ofreciéndonos una excelente alternativa para usar nuevas tipografías en web de forma gratuita.

Tipografías en CSS y HTML ¿Cómo funciona?

Existen dos formas de utilizar el Font API:

Método 1:

Simplemente agregamos la siguiente línea en nuestro HTML entre las etiquetas <head>:

Código :

<!-- embebemos la tipografía Tangerine -->
<link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css" />

y en nuestro CSS le aplicamos la propiedad font al elemento que queramos:

Código :

h1 { font-family: 'Tangerine', serif; }

En este caso estamos aplicando la tipografía Tangerine que llamamos en el ‘link’ del HTML a las etiquetas h1.

Método 2:

El otro método sin necesidad de modificar nuestro HTML es hacerlo directamente en nuestra hoja de estilos usando @import:

Código :

@import url('http://fonts.googleapis.com/css?family=Droid+Sans');

Y luego en el elemento:

Código :

h2 { font-family: 'Droid Sans', serif; }

En este caso estamos aplicando la tipografía Droid Sans que llamamos en el ‘import’ del CSS a las etiquetas h2.

Mas tipografías:

Para conocer que otras tipografías se pueden utilizar, visiten el directorio de fuentes y elijan la tipografía que más les guste.

Google Web Fonts en acción

La API de Google Fonts esconde una gran complejidad. Por detrás, la infraestructura de Google se encarga de convertir la fuente en un formato compatible con cualquier navegador moderno (como Internet Explorer 6 en adelante) y enviar a nuestra web los caracteres exactos con los estilos que les hayamos definido.

Estas fuentes también funcionan bien con CSS3 y HTML5, incluyendo sombras, rotación, etc. Funcionan de la misma manera que las fuentes locales, facilitando la separación de contenido y presentación.
Si quieren ver esto en acción, una reconocida web ya relanzó su sitio haciendo uso de la tipografía Droid Sans.

Funciona en todos los navegadores, la diferencia es que en algunos se muestra anti-alias y en otros no, en cuanto a navegadores móviles al parecer no funciona por eso es una buena práctica definir una segunda fuente alternativa.

Esto es un gran recurso gratuito para que desarrolladores podamos usar tipografías diferentes sin necesidad de javascript.

Más información

Google Font API
Google Font Directory

Enviar comentario

Posted in html5, googleio, css, google | 1 Comment »

Cómo crear una plantilla de Wordpress

Miércoles, Noviembre 25th, 2009

Continuando con la videoserie de Así las Armamos en Español vamos a llevar a nuestra plantilla Tabletop al siguiente nivel: la vamos a convertir en una plantilla wordpress funcional.

En esta primera edición de Wordpress he hecho dos videos: En el primer video veremos la maquetación estática de la sección "blog" de nuestra plantilla para luego hacer la instalación de la plataforma en un servidor local. Posiblemente implementare la plantilla como un portafolio para ver cosas mas avanzadas.

En el segundo video comenzaremos a dinamizar nuestra web viendo los template tags para rutas, nuestros links y también para nuestro menú estático

Te recuerdo ver las primeras partes de esta serie: Cómo convertir PSD de Photoshop a CSS y XHTML, parte 1 Convertir PSD a CSS y XHTML, parte 2 Convertir PSD en HTML, parte 3 PSD a XHTML y CSS, 4 Convertir PSD a CSS y XHTML, parte 5 Convertir PSD a CSS y XHTML, parte 6

Wordpress: Instalación y maquetación de un blog


Wordpress: Menús de navegación, rutas y links


No olviden dejar sus comentarios y sugerencias por aquí en Cristalab o siguiéndome a través de twitter @raymicha. En el siguiente capítulo continuaremos con nuestra implementación conociendo el Loop de Wordpress para los posts y armando nuestra barra de búsqueda. No se lo pierdan!

Enviar comentario

Posted in xhtml, wordpress, css, videotutorial, photoshop | No Comments »

Convertir PSD a CSS y XHTML, parte 5

Miércoles, Octubre 7th, 2009

Y aquí está la continuación del cuarto capítulo de "Así las armamos en español" mi videoserie sobre maquetación web. En esta parte veremos dos plugins de jquery que nos permitirán hacer cambios en las fuentes y darle funcionabilidad a nuestro slide.

Te recuerdo ver las primeras partes de esta serie Convertir PSD a XHTML/CSS parte 1, Convertir PSD a XHTML/CSS parte 2 , Convertir PSD a XHTML/CSS parte 3

Así las armamos en Español: Javascript

Podríamos decir que esta es ya la última parte de la maquetación de esta web, pero no, vamos a ver la sección de contáctanos con el objetivo de darle una mirada a las estructuras y estilizaciones de los formularios y veré como podemos sacarle el jugo a las otras secciones aprendiendo algún truco


Temas para Próximos Vídeos

  • Jquery
  • Wordpress
  • Tips y algunas propiedades vistas mas a fondo de CSS
  • Mas maquetaciones!!

No olviden que pueden dejarme sus comentarios por aqui en Cristalab o seguirme en twitter @raymicha muchas gracias a todos los que siguieron mis videos hasta ahora nos vemos pronto con nuevas cosas para aprender :D

Enviar comentario

Posted in xhtml, css, jquery, videotutorial, photoshop | No Comments »

Ventana de alerta para AJAX con Javascript, DOM y CSS

Domingo, Noviembre 2nd, 2008

En este tip les mostraré como armé esta ventana de alerta para AJAX, con DOM y CSS… la idea es entregar una base para agregar funcionalidades tales como drag, eventos de salida, etc:

Esta es la base:

alerta.js

Código :

function alerta(titulo, texto) {

Primero definimos la función, que recibirá el titulo de la alerta mas el texto del contenido… Además, trabajaremos con una imagen llamada fondo.gif, que será el fondo de la ventana mientras se muestra la alerta (yo elegí una imagen de 4 píxeles con 3 transparentes para que se opaque el contenido bajo la alerta) y definimos un div contenedor de nuestra ventana de alerta llamado fondo como sigue:

Código :

var fondo = document.createElement('div');
      fondo.style.backgroundImage = "url(img/fondo.gif)";
      fondo.style.position = "absolute";
      fondo.style.width = "100%";
      fondo.style.height = "100%";
      fondo.style.top = "0px";
      fondo.style.left = "0px";
      fondo.style.verticalAlign = "middle";
      fondo.align = "center";

Ahora bien, tenemos el fondo, pero necesitamos además crear la ventana de alerta que contendrá lo siguiente:

  • Una barra de titulo
  • Un contenedor con el texto de la alerta
  • Un contenedor con el boton "Aceptar"

veamos como sigue:

Código :

var ventana = document.createElement('div');
      ventana.style.width = "200px";
      ventana.style.margin = "5px";
      ventana.style.border = "solid 1px #999999";
      ventana.style.backgroundColor = "#FFFFFF";
      
      var barraTitulo = document.createElement('div');
         barraTitulo.style.backgroundColor = "#e2e3e5";
         barraTitulo.innerHTML = titulo;
      
      var contenido = document.createElement('div');
         contenido.style.padding = "5px";
         contenido.innerHTML = texto;
      
      var cerrar = document.createElement('div');
         cerrar.style.padding = "5px";

Ahora bien, tenemos que crear un botón de tipo input al cual le asignaremos la acción de ocultar nuestra ventana de alerta y dejar nuestra pagina como estaba anteriormente:

Código :

var boton = document.createElement('input');
            boton.type = "button";
            boton.value = "Aceptar";
            boton.onclick = function() {
               fondo.style.visibility = "hidden";
            }

Bien, solo queda agregar estos contenedores a donde correspondan para poder finalizar mostrando la ventana en el body:

Código :

ventana.appendChild (barraTitulo);
      ventana.appendChild (contenido);
      ventana.appendChild (cerrar);
      
   fondo.appendChild (ventana);
   document.body.appendChild(fondo);

return true;
}

Retornamos y esa es todo el código necesario para mostrar la ventana de alerta que se llama mediante alerta(titulo, texto). Espero que les haya servido, saludos!

Enviar comentario

Posted in dom, css, ajax, javascript | No Comments »