El principal motivo de este post no es que aprendan CSS, sino mostrarles algunos consejos y sugerencias a tener en cuenta cuando se diseña con CSS, porque créanlo o no, todo el mundo tiene algo que decir sobre CSS.

1. La página debe ser usable y legible sin el CSS, teniendo en cuenta que es así como la ven los buscadores y muchos usuarios que usan navegadores de texto, o que no renderizan CSS.

2. Las propiedades (clases o capas) se escriben en minúsculas y sin caracteres especiales, utiliza clases cuando sea algún elemento de la página que se repite más de una vez, por ejemplo, si tienes este código HTML:

Código HTML:

<div id="destacado">
    <h2>Texto Destacado </h2>
    <p> Este es un texto destacado, pero solo habrá uno</p>
</div> 
<p class="noticia">Esto es otra noticia dentro de la página</p>
<p class="noticia">Esta es la tercera noticia, que se repite</p>
<p class="noticia">Y esta es la cuarta noticia</p>

Código CSS:

#destacado {
   color: red;
   font-weight: bold;
}
#destacado h2 {
   font-size: 1.4em;
   font-family: georgia, tahoma, serif;
}
.noticia {
   color: grey;
   font-size: .9em;
}

3. Tabula bien todas las clases, y comenta los bloques por secciones, un ejemplo de una clase sería algo como:

.myclass {
       padding: 4px 20px;
       margin-left: 5px;
       text-decoration: none;
       font-weight: bold;
}

4. La mejor forma de enlazar un archivo .css desde el .html es poniendo la siguiente línea entre las etiquetas “head” del código fuente:

<link rel='stylesheet' href='style.css' type='text/css' media='screen' />

5. Cuando definas alguna familia de letras, añade al final algun tipo de letra genérico, como serif, sans-serif, cursive, o monospace y no hace falta que estén entre comillas. Por ejemplo:

 font-family: helvetica, arial, sans-serif

6. Sobre el tamaño de la letra, algunos dicen que es mejor definirlas en % o em debido a que IE no permitía hacer zoom a las letras cuando estaban definidas en pixeles, pero últimamente he leído que es mejor en pixeles.

7. El objetivo de utilizar un reset.css es el de reducir inconsistencias de navegación en cosas como la altura de las líneas por defecto, los márgenes y el tamaño de las fuentes. El razonamiento general fue discutido en un post de Eric Meyer hace unos años. Yo personalmente utilizo el reset.css desarrollado por el mismo Meyer, aunque existen muchas versiones, pero esta es la más genérica y simple.

8. Utiliza algún IDE potente y olvídate de la vista previa en modo de diseño al estilo Dreamweaver. Ya cuando estás escribiendo código HTML y CSS tienes que hacerlo con una idea básica. Yo personalmente uso Aptana Studio , que es un IDE para desarrollo web súper profesional y gratis, con autocompletado en CSS y HTML, corrección de código, por no mencionar que permite crear proyectos usando JavaScript, PHP y Ruby on Rails.

9. Hay algunas técnicas y patrones de diseño que pueden ayudarte a reducir la cantidad de archivos de imágenes y recursos que uses para construir tu página: CSS Sliding Doors , CSS Sprites , etc. Siempre es bueno conocer este tipo de hacks.

10. Es importante también últimamente mantener y preparar la hoja de estilos para impresión y dispositivos móviles, que son una importante fuente de visitas en muchos casos.

11. Si validas tu código a medida que editas tu CSS, te evitarás muchos dolores de cabeza al final del proceso. De igual forma, asegúrate de que esa propiedad que estás utilizando esté disponible en la mayoría de los navegadores, y si vas a usar alguna de las nuevas, por ejemplo text-shadow, tienes que hacer algo como esto:

text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;

12. Y si quieres seguir leyendo sobre CSS, TripwireMagazine ha creado una recopilación de la mayor lista de recursos para CSS jamás mostrada. En ella se enumeran más de 155 recursos hacks y tutoriales.

No hay entradas relacionadas.

Bueno, de la mano de Anieto2k.com tenemos esta recopilación de 4 manuales para crear tu primer theme para wordpress, incluyendo el suyo propio (muy bueno).

Este es el tutorial oficial de wordpress (inglés) para diseñar templates. Nos da algunos buenos consejos y sobre todo se explica muy bien la estructura que debe tener un theme de wordpress.

Si no dispones de mucho tiempo puedes echarle un vistazo a este post de Maestros del Blog en los que nos dan algunas buenas ideas para personalizar nuestra plantilla.

Para los que tenga conexión rápida (yo no lo pude ver), pueden ver este videotutorial en Ayuda Wordpress, que según he leído parece estar muy bueno y concreto, aunque un poco largo….

Y por último, les dejo este sitio, que es el que casi siempre visito cuando busco inspiración para mis diseños, aunque por alguna extraña razón mis diseños nunca son tan buenos, será porque soy programador, dicen que no tenemos buen gusto.

Entradas relacionadas

Por eso les presento cuatro buenos recursos y sitios para desarrolladores web, sobre todo para quienes empiezan, o no saben como empezar…

Guía SEO de Microsoft

El posicionamiento en buscadores consiste en adoptar ciertas estrategias y aplicar diversas técnicas tendentes a lograr que los principales buscadores de Internet encuadren una determinada página web en una posición deseada dentro de su página de resultados, para determinados conceptos clave de búsqueda. Así empieza esta interesante guía que nos permitirá mejorar nuestros conocimientos sobre optimización y posicionamiento en buscadores.

Desarrollo web

No se por que desarrolloweb.com no tiene slogan, pero es sin duda el mejor sitio en español para diseñar y programar páginas web. Aquí podrás encontrar cientos de tutoriales, artículos, manuales, scripts y una gran comunidad de desarrolladores además de otros muchos servicios. Recomiendo a todos este sitio no solo por sus contenidos y opciones, sino porque gran parte de lo que sé sobre crear y desarrollar webs se lo debo a este excelente sitio.

Recursos para webmasters

Si vas a crear o desarrollar webs tienes mucho que leer y estudiar. En elwebmster.com presentan esta buena colección de recursos para webmasters muy bien organizados.

Foros del Web

Y para cuando acumules dudas, el mejor lugar donde puedes preguntar es en este foro, en mi opinión, el mejor para webmasters. Aquí tendrás mucho que intercambiar y opinar con otros webmasters con mucha experiencia sobre cuestones relacionadas con el desarrollo de webs.

Bueno, no pierdas más el tiempo, seguramente tienes mucho que ver
Comenta si quieres añadir algo a este post…

Entradas relacionadas

Si siempre te haz preguntado como se crean creé un pequeño tutorial sobre como crear tu propio logo 2.0 utilizando photoshop. Sin más vamos a empezar ya… el logo, una vez terminado quedará algo así:

Primero abrimos el photoshop y creamos un nuevo proyecto, para esto vamos a File/New (Archivo/Nuevo)

1- Así crearemos un nuevo proyecto llamado logo de 400 x 120 px como en la siguiente captura:

2- Ahora hacemos doble clic en la ventana nueva para maximizarla y trabajar mucho más cómodos. Seleccionamos la herramienta texto, hacemos clic en el área de trabajo donde queramos escribir y tecleamos el nombre que queremos para el logo, dándole el siguiente estilo:

Tipo de letra: Century Gothic (o cualquier otra que prefieras)
Tamaño: 40 ptos (pero se puede reducir o aumentar)
Color: #0399cc (o cualquier otro color moderno)

Igual podemos alternar este color con otros colores como este naranja (#ff751a) o este verde (#98cb00)

De modo que al aplicar estos estilos, quedaría algo así:

Ahora vamos a los efectos del texto

1- Seleccionamos la capa de texto
Para hacer la selección hay que ir a la ventana de capas. Si no aparece por defecto, pulsa F7. Una vez en la ventana de capas, con el botón Ctrl presionado haz clic en la parte izquierda de la capa de texto llamada MILOGO 2.0 como se muestra abajo.

2 – Creamos una nueva capa.

Para eso vamos a la ventana de capas y hacemos click sobre el icono que aparece en la siguiente captura.

En la nueva capa (layer 2) hacemos una selección con la herramienta , marcamos el icono Restar a la selección en la barra de opciones, y arrastramos el Mouse en el espacio de trabajo de modo que la selección pase por la mitad inferior del texto, quedando así:

3 – Ahora vamos a darle un fondo blanco a esta capa así:
a- Seleccionamos la herramienta Relleno (presiona g)
b- En la paleta de colores y buscamos el color blanco
c- hacemos clic sobre la nueva capa creada (layer 2) de manera que la parte superior del texto se vea en blanco. Hasta ahora se vería así:
d- Una vez logrado esto, presionamos Ctrl + d para quitar la selección.

e- Ahora para lograr el efecto que buscamos debemos darle algo de transparencia a la capa de la selección (layer 2). O sea a la parte blanca del texto. Para esto, seleccionamos la capa que creamos y justamente arriba, donde dice relleno (fill) cambiamos el valor que está al 100% hasta un 25%.
Quedando algo así:

Por último, le daremos el efecto de reflejo

1- Duplicamos la capa.
a- Seleccionamos la capa de texto
b- Hacemos clic derecho sobre su texto
c- Entre las opciones, seleccionamos duplicar capa (duplicate layer)
d- Verás una ventana donde pide que pongas el nombre de la nueva capa… en nuestro caso le pondremos reflejo y le damos OK.

2- La ponemos al revés, simulando un efecto de reflejo.
a- Con la nueva capa seleccionada presionamos Ctrl + t para transformar la capa. Verás como se selecciona.
3- Ahora hacemos clic derecho sobre el recuadro y seleccionamos Voltear vertical (flip Vertical). Verás como se pone al revés.
4- La movemos verticalmente, para esto debemos mantener el Shift presionado y arrastrar la imagen hacia abajo hasta que quede en una posición como la de la figura.

3- Le damos algo de transparencia con degradado
a- Seleccionamos la capa reflejo y creamos una nueva máscara como se muestra en la figura
b – Seleccionamos la herramienta Degradado haciendo clic derecho en la herramienta de Relleno
c- Si ya tenemos seleccionada la máscara que creamos podemos hacer clic y arrastrar el Mouse dentro del espacio de trabajo de arriba abajo para que vayas viendo el efecto buscado.

d- Repites el proceso hasta que te quede lo que buscas.

En fin… logramos algo como esto:

Luego exportamos en el formato que deseemos, preferiblemente png, y ya está, hemos creado nuestro propio logo 2.0. De todos modos aquí dejo el enlace para descargar el logo en PSD y algunas fonts muy buenas para estos tipos de logos.

Si tienen alguna duda dejen un comentario y lo resolvemos.

Entradas relacionadas