Una colección con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los márgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas.
CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
VÃa / Pixel Groovy
Uno de nuestros hábitos, aunque muchos dicen pijerías :), es mostrar los dominios en una versión, es decir con o sin www lo que impide la duplicación de contenidos en 2 url’s diferentes.
Las razones para evitar la duplicidad son variadas. Desde posicionamiento en buscadores a unificar el pagerank. Aunque Choan y Víctor lo resumen muy bien en castellano:
En realidad, lo importante es que el usuario pueda acceder a nuestro sitio con o sin el
www.por delante. Ojo, con un pero bien grandote: debemos facilitar el acceso a través de cualquiera de las dos direcciones —en beneficio del usuario—, pero nuestros contenidos deben estar disponibles solamente en una de ellas.
En la mayoría de casos estamos optando sin www. Las encontramos superfluas y totalmente innecesarias cuando verbalizas una dirección web.
Dando por hecho que tu web está en Apache crea o edita el archivo .htaccess de tu raíz FTP sustituyendo example y .com por lo que corresponda a tu dominio:
# Para que el dominio salga siempre sin www.
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.example\.com$ [NC]
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]
Y si te gusta lo clásico:
# Para que el dominio salga siempre con www.
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]Cuando tenemos nuestra página en mantenimiento y el motor de Google (Googlebot) u otro motor de búsqueda, se pasa por nuestra página para indexarla, no es correcto que obtenga una página no encontrada (404) o un error del servidor (500).
Según dicen en Google Webmaster Central lo correcto es mandar un código de red no disponible (503), pero el autor de este post recomienda también enviar un Retry-After para que vuelva a pasarse más tarde. También recomienda que a los motores de búsqueda se les envie a una página 503 y a los visitantes (menos a él) a una página 404 (página no encontrada).
Instruct Search Engines to come back to site after you finish working on it
Cada cual tiene su forma de desarrollar y todo aquel que considera que su experiencia puede ser de utilidad, da consejos sobre cómo poder hacer las cosas. Nunca viene mal aprender de otros, por eso os muestro 5 consejos que nos ofrece Mike Rundle.
My 5 CSS Tips
VÃa / SkimCSS
Uno de los trabajos iniciales con los que nos solemos encontrar al empezar un proyecto web es la de realizar el diseño inicial de la estructura de la página (layout). Normalmente se suele hacer un copy/paste de un proyecto anterior, pero en el caso de que no dispongamos de esa base previa, siempre podemos buscar en un lugar donde nos lo ofrezcan.
CSSeasy nos ofrece 8 diseños, 4 estáticos y 4 fluidos. Siendo los 4 diseños para los dos diferentes tipos los siguientes: 1 columna sin navegación, 1 columna con navegación arriba, 2 columnas con navegación izquierda y 2 columnas con navegación derecha.
Lo que se echa en falta es una explicación más detallada, ellos recomiendan ver el código fuente y experimentar con él, el código está algo comentado, pero quizás no sea necesario para gente que se esté iniciando en el diseño web o que pasen de diseño con tablas a diseño sin tablas.
CSSeasy.com
VÃa / Digg
Firefinder es un plugin para Firefox que se integra con Firebug y que nos permite localizar de forma rápida y sencilla elementos HTML en la página.
Permite usar selectores CSS y XPath, por lo que no es necesario conocer una nomenclatura nueva, y además nos ayuda cuando trabajemos con los selectores jQuery o cuando estemos parseando HTML.
Firefinder
Vía / Robert’s talk
Un buen tutorial en el que se explica cómo crear un portfolio en el que se cargan las imágenes dinámicamente. Explicado de forma muy detallada y fácil de seguir. El flash mostrará tres thumbnails, que al pinchar sobre ellos cargará la imagen correspondiente, mostrando el tÃtulo y la descripción.
Como única pega, a parte de que está limitado a tres imágenes, yo hubiera cargado los datos en un XML, en vez de en 3 ficheros de texto independientes.
Creating a Dynamic Portfolio in Flash
VÃa / Pixel Groovy