Google Fonts


Google Font

A todos los programadores web nos ha pasado alguna vez que un cliente nos solicita una web con un diseño que él mismo nos facilita, o quizás una agencia (no muy acostumbrada a diseño web) o simplemente nos pide una tipografía concreta.

Esto podía suponer un problema a la hora de realizar la programación del site (si descartamos de inicio el utilizar imágenes para representar las fuentes conflictivas) ya que muchas de esas fuentes no son universalmente compatibles.

Existen muchas fuentes propias del sistema operativo (Windows, Linux, Mac, etc…) y otras incompatibles con ellos. Esto daba lugar a que el usuario no pudiese ver correctamente la web o que tuviese que instalar las fuentes en su sistema operativo para ello. Un engorro…

Pues bien, Google una vez más sale al rescate de los programadores web con Google Fonts (actualmente en estado beta) con una librería de fuentes disponible online que incluye una API que nos permitirá incluir diversos tipos de fuentes no estándar en nuestras webs. Además el uso es muy muy sencillo.

Sólo hemos de añadir una cabecera al código de nuestra página e incluir en los css el estilo asociado. Por ejemplo para incluir la fuente “Tangerine”:

Encabezado HTML

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”&gt;

Estilos CSS

body {
font-family: ‘Tangerine’, serif;
}

¡Y listo!
¡Gracias Google!

Google Site Search


google-site-search-logo

Si queremos añadir un buscador a nuestro sitio web podemos hacer uso de la herramienta: Google Site Search.
Se trata de una opción de Google que nos permite incrustar en nuestro site un buscador interno. Las características son:

  • Configurable estéticamente
  • Configurable a la hora de buscar en nuestro sitio en determinadas secciones y/o carpetas y en otras no
  • Sí realiza búzquedas también dentro de documentos tales como PDF
  • Permite establecer prioridades en las búsquedas

Debemos tener en cuenta que existen dos versiones de Google Site Search: la gratuita y la de pago. La primera diferencia entre ambas estriba en que la gratuita nos muestra anuncios patrocinados junto con los resultados de las búsquedas (y esto puede ser problemático si se trata de una web empresarial porque  pueden aparecer anuncios de la competencia), mientras que la versión de pago muestra exclusivamente los resultados internos, sin anuncios.

Otra diferencia a tener en cuenta es que, puesto que el buscador sólo funciona con páginas indexadas en Google si las de nuestra web no lo están no aparecerán en los resultados. La versión gratuita no hace nada adicional por incluir las páginas que queramos (por lo que deberán estar ya indexadas), mientras que la versión de pago las indexa al incluirlas entre las que deseamos que aparezcan en la herramienta.

El precio actualmente ronda los 90 euros anuales.

Para adquirir Google Site Search basta con pinchar aqui y pulsar en el botón “Quiero Comprar Google Site Search”. Con una cuenta de Google accederemos y podremos realizar todo el proceso de configuración. Se pueden activar tantos buscadores se quieran para diferentes webs, eso si, para cada una de ellas pagando o bien usando el gratuito.

Y por último, a la hora de agregarlo a la web, Google nos facilita un código que simplemente tendremos que copiar y pegar a la zona de nuestro html correspondiente (con 3 opciones de forma de mostrar los resultados).

Espero que os sirva, cualquier duda ya sabéis.

Efecto máscara con degradado en Flash


Voy a dar un breve pero útil (al menos para mí) tip sobre cómo crear una máscara con degradado en Flash.

A veces querremos que determinados objetos se muestren sólo en un área determinada de nuestra película, esto lo conseguimos mediante una máscara, que no explicaré en este artículo como se crea, ya que es un concepto algo más básico. Pues bien, también es posible que queramos que los bordes de la zona en la que los objetos son visibles esté degradada, es decir, que no aparezcan y desaparezcan los objetos de repente y de forma discreta, sino que haya como una neblina que haga que la aparición y desaparición sean graduales.

Tras buscar en diversos lugarres de la web encontré como solución más aplicada el uso del filtro desenfocar en Flash. Según explican en diferentes URLs como la siguiente: http://www.cristalab.com/tutoriales/mascara-en-flash-8-con-degradado-filtro-desenfocar-c176l/ debemos crear la máscara y aplicarle el filtro de sistema con nombre desenfocar. Tras esto nos indican también que debemos marcar la opción “utilizar caché de mapa de bits en tiempo de ejecución” sobre las imágenes que van bajo la máscara.

Sinceramente, puede que esta sea una opción válida, si alguien ha conseguido realizarlo por esta vía agradecería comentarios. Yo probé este método pero no me funcionó y lo que hice, aunque más rudimentario fue más efectivo. Se trata de lo siguiente:

  • Inserto los objetos y por encima la capa con la máscara según el área deseada.
  • Me creo en Photoshop una imágen de las mismas dimensiones que la máscara y con el color del fondo (por ejemplo blanco si nuestra película tiene ese color por defecto).
  • Le agrego degradado a esta imagen de forma que los bordes queden del color elegido y el centro transparente (creamos lo que se denomina un degradado transparente). Los bordes no deben ser muy grandes si no queremos comernos mucho espacio de visión.
  • Salvamos la imagen en formato PNG para conservar la transparencia.
  • Añadimos esta imagen a nuestra película, una capa por encima de la máscara y ya tendremos el efecto de máscara con degradado.La máscara hará su función y la parte blanca de la imagen PNG hará de degradado al estar por encima de nuestro contenido.

Con esto ya lo tendríamos solucionado.

USB 3.0


Por el año 1996 nació de manos de IBM, Intel y compañía el puerto de comunicación USB. Unos 3 años después ya teníamos comercializada la segunda versión, la 2.0, y ahora a casi 10 años desde aquel último modelo podemos afirmar que estamos a las puertas del siguiente, el 3.0.

fig1

El USB 3.0 presenta muchas mejoras con respecto al actual, sobre todo en cuanto a la tasa de transferencia de datos. Pero enumeremos los cambios del 2.0 al 3.0: Sigue leyendo

Flipping Book (efecto libro) en Flash


Puede que alguna vez hayaís querido añadir un efecto Flip Page, Flipping Book o como se quiera llamar. Un efecto de libro en Flash. Descartando la opción de construirlo uno mismo (a no ser que tengáis mucho timpo libre) nos queda buscar entre los componentes de Flash que existen por la red.

pagefilp

Lo primero que debemos saber es qué queremos exactamente, ya que aunque los diferentes scripts que podemos encontrar son muy similares tienen pequeñas diferencias que pueden hacernos util o no el uso de los mismos. Principalmente creo que los puntos que debemos pensar antes de lanzarnos a probar un componente u otro son: Sigue leyendo

Transformar texto a imagen con PHP


En multitud de ocasiones nos será útil convertir cualquier texto que tengamos en nuestro dódigo PHP a una imagen. Por ejemplo en las siguientes situaciones:

  • No deseamos que los motores de búsqueda indexen ese texto.
  • Se trata de un e-mail y no queremos que los spiders lo obtengan para el envío de SPAM
  • Para generar algún codigo de registro

Pues bien, lo primero que debemos hacer es instalar (si no la tenemos ya) en nuestro servidor la librería GD de PHP.

Una vez la tengamos instalada podemos incluir un fragmento de código como el que sigue:

<?php // tenemos nuestra cadena de texto$cadena ="Test";// creamos la imagen de dimensiones determinadas $picture = imagecreate(100,100);// establecemos color de fondo y color de texto $colorfondo = imagecolorallocate($picture,255,255,255); $colortexto = imagecolorallocate($picture,0,0,255);// escribimos el texto en la parte superior izquierda imagestring($picture,5,0,0, $cadena, $colortexto);// mostramos la imagen header("Content-type: image/png"); imagepng($picture);?>