Google Fonts en WordPress

Standard

Hace tiempo descubrí lo que era Google Fonts, me pareció muy copado y pensé algún día implementarlo en algún proyecto. Como actualmente estoy modificando un theme para este blog, decidí hacerlo, por ende les traigo una sencilla guiá para hacerlo andar en WordPress.

¿Que es Google Fonts?

Básicamente, es un directorio de fuentes web básicas, que proporciona un servicio a través de su API para que cualquiera pueda poner tipografías de calidad a sus páginas web, independientemente de las que son consideradas por defectos en los navegadores más populares.

Todas las fuentes que se encuentran en Google Fonts, son fuentes Open Source.

Empezemos

Eligiendo la fuente

Primero tenemos que elegir del directorio de fuentes de Google la que mas nos guste, yo elegí en este caso Fredericka the Great.

Implementando la fuente

Para utilizar la fuente, hacemos click en Quick-use, esto nos llevara a una nueva pagina con mas instrucciones.

Encontraremos mas abajo el código para poner en nuestro archivo header.php. Utilizaremos la forma estándar (a gusto del consumidor).

<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>

Ahora ingresamos al panel del Administrador de nuestro blog de WordPress (/wp-admin), nos dirigimos a Apariencia -> Editor y elegimos en el panel de la derecha la plantilla Cabecera (header.php).

Pegamos el código que obtuvimos anteriormente antes de la etiqueta (importante) y le agregamos esta clase para poder utilizarla donde queramos…

<style>.googlefontfredericka{
    font-family: 'Fredericka the Great', cursive;
}</style>

Pueden utilizar cualquier nombre, yo elegí googlefontfredericka

Utilizando la fuente

Listo, solo queda utilizar la clase en alguna etiqueta html y hacer tu blog la envidia del barrio. :D

<div class="googlefontfredericka">Zarpele Linux & Software Libre!</div>
Zarpele Linux & Software Libre!

Saludos…

Redimensionar imagenes sin PHP

Standard

Esta entrada es opuesta a la anterior, para la gente que no quiere lidiar con PHP hay una solución quizás mas fácil y efectiva utilizando CSS

/*
  *@autor: Chuecko
  *@url: Zarpele.Com.Ar
  *Redimensionar Imagenes por ancho con CSS
*/
 
#imagen {
max-width:740px;
}

y listo si la imagen rebasa los 740 de ancho, nos mostrara la imagen con el mismo; en caso contrario nos mostrara la imagen con sus dimensiones normales.

<img src="/rutademiimagen1.jpg" id="imagen">
<img src="/rutademiimagen2.jpg" id="imagen">
<img src="/rutademiimagen3.jpg" id="imagen">

Así deberán poner las imágenes que quieran redimensionar en caso de ser muy grandes…

Si interpretan un poco el código también pueden hacerlo con el alto (heigth), el código se los dejo a ustedes.

Aunque piensen que es un ejemplo boludo, no es muy conocido este método y lo quería compartir con todos los visitantes.

Saludos, comenta si te sirvió.

Hojas de referencia de PHP, MySQL y CSS

Standard

Las hojas de referencia ILoveJackDaniels ya son conocidas por la web, pero no está de más recordar algunas:

* PHP: funciones, variables superglobales, formato de fechas, expresiones regulares y apertura de archivos.
* MySQL: funciones de MySQL, tipos de datos, funciones en PHP y consultas de ejemplo.
* Javascript: funciones y métodos, XMLHttpRequest, Javascript en HTML, expresiones regulares y manejadores de eventos.
* CSS: lista de propiedades, selectores, pseudo-selectores, unidades y propiedades.

A continuación, y para su descarga, las hojas de referencia en PNG y PDF:

PHP

MySQL

CSS

Click en la fuente para ver mas…, estos me parecieron los mas copados

Vist en | Added Bytes

Saludos…