En CSS, Posicionamiento
A menudo preferimos hacer un logotipo con photoshop (u otra herramienta de diseño) en vez de colocar el texto del mismo con código (X)HTML+CSS.
Un ejemplo de ello es este blog que, como muestro en la imagen a continuación, tiene por cabecera un logotipo hecho con photoshop.
El problema viene cuando queremos que el título de nuestra web sea relevante para los buscadores, por lo que en esta entrada le daremos el toque SEO que necesitamos para que sea así.
Como se trata del título de la web lo colocaremos dentro de las etiquetas H1 para que tenga máxima relevancia, quedando el código de la siguiente forma:
<h1 id="logo"><a title="Dario BF / Diseño web, GNU/Linux, mac, nuevas tecnologías y más" rel="home" href="http://www.dariobf.com/"><span>Dario BF</span></a> <small>Diseño y desarrollo web, GNU/Linux, mac, nuevas tecnologías y más</small></h1>
Como veis, le asignamos un ID (logo) a la etiqueta H1, y el resto lo insertamos normalmente: un span para el titulo del blog y un small para el tagline.
El truco de esto reside en el CSS, que será el siguiente:
#header h1 small,#header h1 a span{
display:none;
}Como veis, lo que hacemos es decir, a través de CSS, que no muestre (display:none) el contenido de las etiquetas span y small (titulo y tagline respectivamente)
Etiquetas: CSS, desarrollo web, posicionamiento, SEO
Comenta ahora! »
En Diseño y desarrollo web
Para el posicionamiento en buscadores es mejor crear una especie de “tela de araña” entre las entradas de nuestro blog, y para eso es aconsejable incluir un “related post”.
Yo en este blog lo hice con plugin, aunque también es posible hacerlo sin él, y nos dará más agilidad dentro del blog (es lo que tengo en mente para el nuevo diseño que estoy preparando)
Para tenerlo en tu blog (sólo para WordPress) basta con Descargar el plugin e instalarlo como cualquier otro (Subirlo por FTP a la carpeta /wp-content/plugins o bien mediante el panel de administración y activarlo).
Una vez instalado tendremos que insertar la línea de código que llama a la función php del plugin allá donde queramos que salga, que será la siguiente:
<?php wp_related_posts(); ?>
Yo la puse en el “single.php” del tema, tras los tags (el sitio más recomendable).
Etiquetas: desarrollo web, Wordpress
Comenta ahora! »
En Diseño y desarrollo web
Muchas veces hacemos sitios web completos sin siquiera pararnos a pensar en los elementos que conforman su código.
Voy a empezar a redactar una serie de entradas donde explicaré los elementos más notables de una plantilla HTML.
Comenzaré explicando lo que se llama “cabecera” o “header” de un sitio web; en resumidas cuentas, los elementos básicos y fundamentales que se encuentran entre las etiquetas
En Diseño y desarrollo web
Ahora que estoy preparando un tema nuevo para el blog, me doy cuenta que al insertar imágenes y alinearlas directamente desde wordpress falla la alineación (la inserta siempre a la izquierda y no flotante).
Basta con mirar un poco por encima el tema default de wordpress para darse cuenta que hay unas propiedades que marcan estas pautas.
El código que hay que insertar en el CSS del tema que estamos creando es el siguiente:
Código:
/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */Insertando eso al final de nuestro código la alineación que se gestiona desde el panel de administración de wordpress volverá a funcionar.
Etiquetas: desarrollo web, Wordpress
Comenta ahora! »
En CSS, Diseño y desarrollo web
Se algo caracteriza el diseño de un sitio web es sin duda su tipografía, su fuente.
¿Quien no ha querido alguna vez escribir su sitio con una fuente completamente diferente a la que traen los sistemas operativos por defecto?
Ahora es fácil hacerlo gracias a Google y sus colaboradores, que ponen a nuestro alcance un repositorio de fuentes online de donde podremos cargar las fuentes para nuestro sitio web.
¿Cómo hacerlo?
Podría deciros el código, que lo copiaseis y pegaseis, pero voy a hacer algo mejor, os voy a contar desde dónde se saca dicho código.
Para ello hay que acceder al repositorio de fuentes de Google, ojear las fuentes por encima y seleccionar una (pinchar sobre ella).
En la página que se abrirá hay que seleccionar “Get de code” y ahí teneis los dos códigos a insertar en la plantilla de vuestro sitio.
El primero corresponde a la etiqueta que va entre el <head> y </head> y el segundo se corresponde con el código CSS que va en vuestra hoja de estilos.
Con esto tendreis una fuente completamente diferente a las más utilizadas en la web.
Etiquetas: CSS, desarrollo web, Google
Comenta ahora! »
