CSS: Trabajando con espacios en blanco

27 de octubre de 2009 | Etiquetas: , | Categoría: CSS

Cuando trabajamos con espacios en blanco sobre html lo normal es que nuestro navegador los elimine, interpretando sólamente aquellos que aparecen entre palabras. Para mí eso es perfecto, pero habrá quien añore el preformato tipo procesador de texto, para vosotros aquí tenéis una solución con css.

La propiedad white-space te permite manejar los espacios en blanco a tu antojo ¿Cómo? Simple, con un mismo ejemplo os demuestro su funcionamiento, el código que voy a usar es el mismo, cambiaré solo la propiedad en css.

<p>Lorem ipsum dolor sit        amet, consectetur adipiscing elit.
Aenean sit amet   mauris et sapien sollicitudin semper sit     amet quis erat. Quisque feugiat lorem ut ipsum
varius a faucibus sapien aliquam.</p>

white-space: normal
Es el valor por defecto, NO muestra los espacios en blanco añadidos ni los saltos de línea, aunque crea saltos de línea automáticamente para que el texto no se salga de su contenedor.

css normal

white-space: pre
Este valor SI muestra los espacios en blanco y los saltos de línea. Lo malo, que si no añadimos saltos de línea el texto continuará en la misma línea, llegando a salirse del contenedor.

css pre-wrap

white-space: pre-wrap
Aquí SI nos muestra los espacios en blanco y los saltos de línea, y SI ajustas las líneas automáticamente para que no se salga el texto del contenedor.

css pre

Puede no parecer algo muy importante, pero es una propiedad no muy habitual, por lo que o no se aprovecha o se desconoce directamente. Siempre es bueno conocer todos nuestros recursos :)

Twittea esto Guardalo en Delicious Compartelo en Facebook

SEO básico, o como aplicarlo con la cabeza

21 de octubre de 2009 | Etiquetas: , , | Categoría: SEO

No quiero decir que tengamos que aplicarlo a base de cabezazos contra la pantalla del ordenador, que hay quién es capaz de hacerlo o al menos a más de uno nos entran ganas después de ver que no obtenemos resultados. Sino que podemos aplicar SEO sin tener muchos conocimientos, simplemente pensando un poquito y utilizándo la lógica.

Pero primero vamos con lo primero ¿Qué significa SEO?

La palabra SEO son las siglas de Search Engine Optimization (Optimización para Motores de Búsqueda) o lo que mucha gente entiende como ESO que se hace para que mi web aparezca la primera en Google.

Hago un flashback (que no flash forward) y pienso en lo dicho por Enrigue Aguilera en el Congreso de Webmasters, debemos darle más importancia a la hora de realizar SEO básico a:

1. El elemento title de cáda página. Hay que poner un texto coherente y no muy largo, único para cada página de nuestra web y relacionado con su contenido. Una lista con 50 palabras sin sentido no nos sirve de nada.

<title>Hijos Martínez, empresa de fontanería en Alicante</title>

2. Los encabezados h1. Es muy importante el texto que ponemos dentro de un h1, debe estar igualmente relacionado con lo que vamos a contar y sobre todo seguir una concordancia con el resto de encabezados (que aparezca al principio del documento el h1, luego h2, luego h3 y así sucesivamente).

<h1>Encuentre su fontanero en Alicante</h1>

3. El dominio de nuestra web. El nombre del dominio, de las carpetas que tengamos y de las páginas webs. También tenemos que tener en cuenta el efecto geolocalización, si nos interesan tener visitas desde España deberemos tener un dominio .es y alojado en servidores españoles, con DNS apuntando hacia España.

http://www.fontaneros.es/alicante/arreglamos-tuberias.html

4. Los anchors text, la etiqueta title de nuestros enlaces. Ya sea en enlaces internos o enlaces externos. Debemos intentar que cuando nos enlacen pongan en el title palabras claves que nos interesen, no nos sirven de nada (si somos una empresa pequeña sobretodo) que pongan nuestro nombre.

<a href=”http://fontaneros.es” title=”Hijos Martinez”>www.fontaneros.es</a>
<a href=”http://fontaneros.es” title=”Fontaneros baratos”>Hijos Martinez</a>

5. La frecuencia de actualización de los contenidos. No nos sirve de nada todo el trabajo realizado anteriormente si hacemos una web y la dejamos olvidada durante años, debemos ir añadiendo contenido continuamente para que los buscadores sepan que nuestra web está viva.

Recordad que antes de todo esto tenéis que tener bien definida la idea y los conceptos con los que queréis que se os conozcan, deberéis ir introduciendo palabras claves pero siempre sin querer sobreoptimizar la web ya que no queremos confundir ni colapsar a nuestros visitantes.

También recomiendo no aplicar todos los cambios de golpe, si no ir haciéndolos poco a poco, por ejemplo: hoy defino las palabras claves y cambios los title, dentro de unos días cambio los h1 y algunos anchors text y más adelante el resto. Pues tampoco queremos que los buscadores noten algo extraño y nos cojan manía.

Twittea esto Guardalo en Delicious Compartelo en Facebook

Cheat Sheet, descúbrelo de un vistazo

29 de septiembre de 2009 | Etiquetas: , , , | Categoría: Recursos
cheat sheets

Me encanta las Cheat Sheet, las referencias rápidas, las hojas de trucos o como queráis llamarlas. Yo soy de las que se acuerdan del argumento de la película pero no recuerda el título, por lo que muchas veces me acuerdo del funcionamiento de funciones, propiedades, etc, pero no recuerdo el nombre de las mismas.

Por eso tengo siempre a mano unas cuantas hojas de referencia rápida, cuando te bloquees, solo tienes que dar un vistazo a la hoja apropiada y.. ¡Tachán! Habrá vuelto a tu memoria ;)

Algunas de las que tengo en mis favoritos son:

- Guía de Referencia CSS 2.1 (w3c.es)
- HTML 5 Visual Cheat Sheet (woork.blogspot.com)
- Emezeta Card PHP Cheat Sheet (emezeta.com)
- JQuery 1.3 Visual Cheat Sheet (woork.blogspot.com)
- Mootools 1.2 Cheat Sheet (mediavrog.net)
- WordPress Cheat Sheet (Español) (lordmax.org)

¿A vosotros os pasa también esto o yo soy un espécimen defectuoso? ¿Me he dejado alguna interesante?

Twittea esto Guardalo en Delicious Compartelo en Facebook

Inserta videos de youtube con HTML Válido

16 de junio de 2009 | Etiquetas: , , , | Categoría: html

El código que indican en youtube para insertar el video en tu página web, es un completo desastre, intenta pasar tu web por el validador w3c cuando tengas un video de youtube insertado y verás como explota xD

El código que nos da youtube es el siguiente:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/5AFasYNOifk&amp;hl=es&amp;fs=1&amp;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/5AFasYNOifk&amp;hl=es&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Y algunos de los errores que nos devuelve el validador son:
- General entity hl not defined and no default entity.
- Attribute type exists, but can not be used for this element.
- Attribute allowscriptaccess is not a valid attribute.
- Attribute allowfullscreen is not a valid attribute.
- Attribute width exists, but can not be used for this element.
- Attribute height exists, but can not be used for this element.

El primer error aparece porque en la url al video se pasan parámetros enlazados con un &, pero en html el & indica el comiendo de una entidad, como puede ser por ejemplo &nbsp; (un espacio en blanco), para solucionar esto debemos sustituir los & que aparecen en la url por su entidad &amp;.

El resto de errores son causa de etiquetas con propiedades no reconocidas o en desuso, para solucionar esto tenemos el código que os copio a continuación, un código para insertar videos de youtube con html válido:

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/5AFasYNOifk&amp;hl=es&amp;fs=1">
<param name="movie" value="http://www.youtube.com/v/5AFasYNOifk&amp;hl=es&amp;fs=1" />
</object>

Tened en cuenta que debéis cambiar el ancho (width) y alto (height) a vuestro antojo, y la URL que escribo de ejemplo por la del video que queráis insertar :)

Twittea esto Guardalo en Delicious Compartelo en Facebook

4 pages