Categoría: HTML

Categorías
CSS HTML tipografías

Añadir fuentes de Google Fonts en WordPress

Añadir Google web fonts a tu web

Google nos da la oportunidad de usar diferentes tipos de letras en nuestro sitio web a través de su banco de tipografías gratuitas. Y lo hace de una manera muy sencilla que vamos a aprender en este post.

Conociendo el entorno de Google Fonts

Para empezar, vayamos a la página de Google Fonts y veamos cómo funciona. Te encontrarás con un directorio de todas las fuentes de Google Fonts. Puedes buscar directamente la fuente o encontrar la apropiada a través de los filtros de categorías, idioma o propiedades

Directorio de fuentes de Google Fonts

Al hacer clic en la tipografía elegida, en mi caso he elegido Oleo Script, Google te mostrará las diferentes variantes de esa tipogra´fía, pudiendo elegir una a una las que necesitas a través de la opción «Seleccionar este estilo». Fíjate cómo una vez seleccionas el estilo, se abre una nueva columna en la parte derecha con dos pestañas: resumen y añadir.

En la primera pestaña, «review», verás el resumen de todas las fuentes elegidas de las diferentes tipografías. En la pestaña Embed, tienes el código que debes incrustar en la web para poder visualizarla.

Ten en cuenta que cuantas más tipografías estés utilizando en tu página, más peso tendrá la misma y en consecuencia tardará más a la hora de cargarse.

Los pasos a dar parecen poco y sencillos. Por un lado debes incluir la etiqueta <link> dentro de las etiquetas <head> y </head> de tu html y por otro lado especificar la/s familias a través de la hoja de estilos CSS. Pero, ¿qué pasa cuando no tenemos ni idea de cómo llevarlas a cabo? Vamos por partes.

Añadir código entre las etiquetas <head> de una página en WordPress

Las etiquetas <head> de una web hecha en WordPress se encuentran en el archivo header.php. ¿Cómo accedemos a él? Podemos hacerlo de dos formas:

  1. Mediante FTP.
  2. A través del panel de administración de WordPress.

Vamos a ver las dos formas, pero mi consejo es que siempre que hagas cualquier cambio en un archivo de la web lo hagas a través del FTP. ¿Por qué? Pues porque si escribes mal el código o te falla la conexión en el momento del guardado desde el panel de administración de WordPress, vas a tener que contactar con el servidor para que recupere una copia de seguridad de tu página (si es que ofrece ese servicio gratuito o no). Intenta hacerte la vida más fácil 🙂

Acceder al archivo header.php mediante FTP

A través de los datos que obtendrás desde el servidor web que deben ser el nombre del servidor, usuario y contraseña podrás entrar en los archivos de tu página web mediante FTP.

Una vez dentro, esta es la ruta para llegar hasta el archivo header.php:

wp-content > themes > Nombre del tema que estás utilizando > header.php

Te recomiendo que hagas una copia de seguridad de este archivo antes de editarla. Así, en el caso de que surja cualquier problema, siempre tendrás la versión original del archivo.

Acceder al archivo header.php mediante el panel de administración de WordPress

Desde el backend de WordPress ve hacia Apariencia > Editor de temas. Te encontrarás con esta pantalla. En la columna derecha tienes un listado de todos los archivos correspondientes al tema que estás utilizando en tu WordPress. En la parte izquierda, el contenido. Haz click en header.php

Editor de temas de WordPress

Integrar Google Fonts en WordPress

Ahora que ya sabemos cómo acceder a los archivos del tema (recuerda que mi consejo es hacerlo a través del FTP) vamos a integrar Google Fonts. Para ello copiamos el código que nos ofrece la web de Google Fonts en la pestaña Embed como hemos visto anteriormente.

<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">

Y lo pegamos justamente antes de la linea de código wp_head. 

<?php wp_head(); ?>

El código debe quedar así:

<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
<?php wp_head(); ?>

Guardamos el archivo y nos aseguramos de subirlo correctamente al FTP. Tendremos que sobreescribir el archivo anterior. No te olvides de tener tu copia de seguridad del archivo header.php a mano por lo que pueda pasar.

Ahora vamos a acceder a añadir el estilo CSS y lo vamos a hacer desde el panel de administración de WordPress. Tan fácil como ir Apariencia > Personalizar > CSS adicional. Y aquí, escribimos lo siguiente:

* { font-family: 'Oleo Script', cursive; }

Y te debe quedar algo como en la siguiente imagen. Con el asterisco *, le estamos diciendo que queremos que todos los elementos de nuestra página usen la tipografía ‘Oleo Script’. Guardamos haciendo clic en Publicar.

Añadir estilos CSS desde el panel de administración de WordPress

Para los maquetadores, es una ventaja poder utilizar este tipo de recursos que ofrece Google. Puedes darle un toque personal a tu proyecto con una tipografía diferente, simplificas el peso de la página, ya que las tipografías están ubicadas en servidores de Google y además y no menos importante, son fuentes de código abierto, gratuitas. ¡Así que solo queda disfrutar! 🙂

Categorías
HTML redes sociales

Cómo integrar Twitter en mi página web

¿Tienes una cuenta de Twitter y te gustaría que se pudieran ver los tweets que envías desde tu página web? Hoy vamos a aprender cómo hacerlo.

En este nuevo post vamos a aprender cómo introducir la aplicación de Twitter que muestra nuestros Tweets en nuestra página web. Existen varias maneras de hacerlo. La que aprenderemos hoy es la que nos ofrece nuestro propio perfil de Twitter a través de la creación de un widget personalizado que será el que incrustaremos en nuestra web.

1Dando por hecho que tenemos nuestro perfil de Twitter creado, accedemos a la siguiente URL: https://twitter.com/settings/widgets donde vamos a crear el widget que incluiremos en nuestra página web.

Hacemos clic en «Crear nuevo«.

2 Observamos cuatro pestañas. Nosotros vamos a ver la primera. «Cronología de usuario» es la que nos interesa para incrustar los tweets en nuestra web. Podemos personalizar el widget según las opciones que nos muestran y una vez terminado hacemos clic en «Crear Widget» donde se nos ofrece un código que debemos pegar en el HTML de nuestra página, allí donde queremos que aparezca exactamente.

Un ejemplo del código que te generará el widget será el siguiente:

<a class="twitter-timeline" href="https://twitter.com/pensandoenweb" data-widget-id="302069386464870402">Tweets por @pensandoenweb</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Ya sabes, pégalo en tu HTML y mostrarás en tu página web tus propios tweets actualizados desde tu cuenta de Twitter.

Más sobre la API de Twitter:

Categorías
HTML

Empezando con HTML5. Estructura de cajas

¡HTML5! La quinta y última versión del lenguaje básico de la World Wide Web (W3C). En este primer tema del curso Cómo crear una página web desde cero vamos a comenzar con unas nociones básicas en este lenguaje. HTML5 es un estandard vivo, un concepto de marketing que agrupa tecnologías como CSS3 y Javascript, semántica, nuevas capacidades de diseño, etc. Y es compatible con todos los navegadores.

¿Qué es exactamente el lenguaje HTML?

Se trata de un lenguaje de marcado (que no de programación) que utilizamos para mostrar la estructura y el contenido de una página web. Esto significa que si eliminamos el diseño de una página web y vemos su contenido como si fueran cajas, esas cajas serían el HTML.

Aquí te muestro una imagen donde se perciben las principales diferencias entre las etiquetas de HTML tradicional y HTML5 donde podemos observar que HTML5 introduce una serie de etiquetas que ayudan a definir la estructura de una página.

diferencias entre html tradicional y html5
  • El elemento <header> corresponde al contenido introductorio de la cabecera de una página. Dentro de esta etiqueta debe estar el h1. Puesto que será lo primero que cualquier buscador lea dentro de cada página, si existieran más de un <h1> por página, este perdería su valor semántico de cara al posicionamiento.
  • <hgroup> agrupa etiquetas desde <h1> hasta <h6> para especificar que es un contenido semántico agrupado en una cabecera. Por ejemplo, dentro de un artículo de un blog, un <hgroup> puede contener una etiqueta <h2> y otra <h3> para especifica el título y subtítulo del artículo como cabecera del mismo.
  • <nav> es el menú de navegación de los contenidos o secciones importantes de la página. En este ejemplo lo hemos colocado solamente dentro de la etiqueta <header> pero igualmente podemos encontrar un menú de navegación dentro de un <aside> o un <footer>.
  • La etiqueta <aside> contiene elementos que no son esenciales dentro del sitio web. Por ejemplo, un listado de enlaces a redes sociales podría estar dentro de un elemento <aside>.
  • La etiqueta <section> agrupa contenidos dentro de la página.
  • <article> actúa como contenedor de una sección independiente de la página. Puede ir dentro de la etiqueta <section> o aislada dentro del sitio web.
  • Al igual que la etiqueta <header> corresponde a la cabecera de la página, <footer> encaja con el pie.

Para tener un ejemplo más concreto de cómo podría estar estructurada una página básica en HTML5 te muestro el siguiente ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<title>Mi página web hecha en HTML5</title>
</head>
<body>
	<header>
		<hgroup>
			<h1>HTML5</h1>
			<h2>Estructura básica</h2>
		</hgroup>

		<nav>
			<ul>
				<li><a href="#" title="Inicio">Inicio</a></li>
				<li><a href="#" title="Características">Características</a></li>
				<li><a href="#" title="Contacta">Contacta</a></li>
			</ul>
		</nav>
	</header>

	<section class="propiedades">
		<article>
			<hgroup>
				<h2>Propiedades de HTML5</h2>
				<h3>Características principales:</h3>
			</hgroup>
			<figure>
				<img src="imagenes/html5.png" alt="características de HTML5" title="características principales de HTML5" />
				<figcaption>Características principales de HTML5</figcaption>
			</figure>
		</article>

		<article>
			<ul>
				<li>Etiam tincidunt sagittis felis</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Morbi interdum malesuada lacus</li>
			</ul>
		</article>
	</section>

	<aside>
		<section>
			<h3>Enlaces de interés</h3>
			<ul>
				<li><a href="#" title="enlace1">Enlace 1</a></li>
				<li><a href="#" title="enlace2">Enlace 2</a></li>
				<li><a href="#" title="enlace3">Enlace 3</a></li>
				<li><a href="#" title="enlace4">Enlace 4</a></li>
			</ul>
		</section>

		<section>
			<h3>Síguenos en las Redes Sociales</h3>
			<ul>
				<li><a href="#" title="Facebook"><img src="imagenes/facebook.png" alt="Facebook" title="Facebook" /></a></li>
				<li><a href="#" title="Twitter"><img src="imagenes/twitter.png" alt="Twitter" title="Twitter" /></a></li>
			</ul>
		</section>
	</aside>

	<footer>
		© 2012 Mi página en HTML5
	</footer>
</body>
</html>

Ahora que ya conocemos las etiquetas básicas para poder crear una página en HTML5 hay que ponerlo en marcha y practicar con los conocimientos adquiridos. Y para ponerle la guinda al pastel, te dejo una serie de links con los que podrás ampliar tus conocimientos en este lenguaje que debe ser ya imprescindible en tus páginas 🙂 Ánimo y hasta el próximo post!

Enlaces de referencia:

Categorías
CSS HTML Maquetación web tipografías

Añadir Adobe Adge Web fonts a mi página web

Si hace unos días aprendíamos cómo utilizar y añadir Google Web Fonts a nuestra página web, hoy le toca el turno a Adobe Edge Web Fonts, un servicio  que nos permite disponer de cientos de tipografías gratuitas para nuestra página web.

Adobe Edge Web Fonts es una aplicación que nos ofrece un catálogo de unas 500 fuentes para ser usadas en tus páginas. Este proyecto, que va en paralelo con Google Web Fonts, nos aporta solidez y versatilidad a la hora de encarar un proyecto web.

En este sencillo post vamos a aprender cómo utilizar esta aplicación en tan solo unos pasos. 🙂

1

Desde Adobe Edge Web Fonts  hacemos scroll hasta llegar al siguiente punto de la página:

adobe edge fonts
2

 Elegimos la tipografía que vamos a usar a la vez que obtenemos la muestra de cómo quedaría en pantalla. Copiamos el código naranja que se nos muestra más abajo y lo pegamos en el archivo HTML antes del cierre de la etiqueta </head>. En nuestro caso, tomamos como ejemplo la tipografía «Quicksand»:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Añadir Adobe Edge Web Fonts a mi página web</title>
        <script src="http://use.edgefonts.net/quicksand.js"></script>
    </head>
3

 Añadimos en la hoja de estilos CSS la propiedad de font-family a la etiqueta que nos interesa. Por ejemplo un titular  h1:

h1 {
  font-family: quicksand, serif;
}
4

 Si además queremos especificar que nuestro titular sea normal, negrita o cursiva debemos ir a la página con la documentación completa donde nos señalan todas las fuentes tipográficas de las que dispone nuestra familia elegida. Lo vemos con el ejemplo:

añadir diferentes tipografias en mi página web

Quickdand tiene 6 diferentes fuentes tipográficas. Pongamos que nuestra cabecera es Bold Italic. El código CSS quedará:

h1 {
  font-family: quicksand, serif;
  font-weight:700;
  font-style:italic;
}

¿Has visto qué sencillo? Dependiendo de las fuentes tipográficas que tiene cada familia, usaremos las propiedades de font-weight y font-style de diferente manera. Donde:

  • n e i corresponden a las propiedades font-style:normal y font-style:italic respectivamente.
  • El número que les sucede corresponde a la propiedad font-weight.

En el siguiente listado vemos la relación de n e i dentro de las propiedades CSS con el ejemplo de la fuente Quicksand:

n3      font-weight:300;
n4      font-weight:400;
n7      font-weight:700;

i3      font-weight:300;      font-family:italic;
i4      font-weight:400;      font-family:italic;
i7      font-weight:700;      font-family:italic;

Después de estos sencillos pasos solo queda practicar. !Ánimo! Y hasta el siguiente post 🙂

Categorías
CSS HTML Maquetación web

6. pasar de PSD a HTML y CSS | crear varias columnas en html y css

En esta ocasión vamos a maquetar varias columnas en una página con HTML y CSS. Además, con la peculiaridad de que cada una tiene un ancho (width) diferente… Ya verás qué fácil 😉

Según nuestro archivo psd y ayudándonos de las guías, las columnas miden lo siguiente en ancho:

  • Columna Izquierda: 221px.
  • Columna Central: 326px.
  • Columna Derecha: 240px.

Un dato importante a saber es que la separación que hay entre la columna izquierda y la central es de 75px. Esto marcaría el margin-right que se lo aplicaremos a la columna de la izquierda.

Con esta información ya tenemos más que suficiente para, por lo menos, maquetar 3 columnas en un ancho total de 930px. ¿Cómo hacerlo? Nuestro código HTML quedaría de la siguiente forma:

<div id="columnas">
    <div id="col_izqda">
    </div>
    <div id="col_centr">
    </div>
    <div id="col_drcha">
    </div>
</div>

La estructura es tan básica como concentrar a las 3 columnas en un solo contenedor, al que llamamos #columnas y dentro del mismo creamos un div para cada una de ellas. Ahora vamos a aplicarle el código CSS.

/* ------------------------------------ */
/*				COLUMNAS				*/
/* ------------------------------------ */
#columnas {
     width:930px;
	 float:left;
	 margin:20px 0;
     padding:0px;
}

#col_izqda {
     width:221px;
	 float:left;
	 margin:0 75px 0 0;
     padding:0px;
	 height:300px;
	 background:#063;
}

#col_centr {
     width:326px;
	 float:left;
	 margin:0;
     padding:0px;
	 height:300px;
	 background:#063;
}

#col_drcha {
     width:240px;
	 float:right;
	 margin:0;
     padding:0px;
	 height:300px;
	 background:#063;
}

Te habrás dado cuenta de que a las 3 columnas le he dado el mismo alto y el mismo background de fondo. Esto es solo un pequeño truquito que utilizo para asegurarme de que a ese div al que le estoy dando un color (background), se corresponde con los estilos que le estoy aplicando. (Si no pusiera un height, al no tener altura el div, y en principio vacío porque no le he metido contenido aún, sencillamente, no tendría fondo, y no podría previsualizarlo antes de seguir).

Es más sencillo de entender si directamente ves cómo queda lo que acabamos de maquetar con la siguiente demo.

¿Te atreves a maquetar el interior de cada columna? Después de lo aprendido, tienes los conocimientos suficientes para hacerlo. Pero si necesitas el código completo, no tienes más que decírmelo y estaré encantada de enviártelo.

¡Muchas suerte! 🙂

  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página
Categorías
CSS HTML

5. Pasar de PSD a HTML y CSS | Introducir un vídeo de Vimeo o YouTube

[et_pb_section admin_label=»section»] [et_pb_row admin_label=»row»] [et_pb_column type=»4_4″][et_pb_text admin_label=»Text»]

Incluir videos de vimeo o YouTube en tu página web es de lo más sencillo, ya verás. 😀

Cómo incluir un vídeo de Vimeo en tu página web

1

Ve al enlace del vídeo de Vimeo que quieres introducir en tu página web.
Como ejemplo yo he elegido el siguiente: http://vimeo.com/39645824

2

Haz clic en el botón «share» que está justo en la parte superior derecha del vídeo.
insertar vídeo de vimeo en tu página web

Seguir leyendo «5. Pasar de PSD a HTML y CSS | Introducir un vídeo de Vimeo o YouTube»
Categorías
CSS HTML

Cómo crear un fondo de repetición con CSS

Las propiedades de la etiqueta background se utilizan para dar efectos en el fondo de los elementos.

background de repetición

Son 5, las diferentes propiedades con las que cuenta esta etiqueta.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

En esta entrada vamos a explicar algunas de las diferentes formas de utilizar esta etiqueta y sus propiedades.

Como ejemplo tenemos el diseño de esta página, a la que le hemos colocado un fondo de repetición. ¿Cómo crearíamos ese fondo?

En primer lugar abrimos nuestra carpeta «plantilla» para empezar un proyecto nuevo  y en nuestro archivo index.html comenzamos a escribir lo siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="estilos/reset.css" rel="stylesheet" type="text/css">
<link href="estilos/home.css" rel="stylesheet" type="text/css">

<title>Nombre de tu documento</title>
</head>

<body>

<div id="contenedor_global">
	<h1>Este es el titular de mi página</h1>
</div>

</body>
</html>

Hemos creado un solo div y es suficiente para jugar con 3 fondos diferentes. Lo vemos.

El primer elemento al que vamos a aplicar un fondo será el body. Para ello escribimos:

body {
	background-image:url(../imagenes/fondo-body.png);
	background-position:0 0;
	background-repeat:repeat;
}

¿Qué quiere decir esto? Muy sencillo. Explico una a una cada propiedad:

background-image | Aplica una imagen de fondo al elemento que es llamada desde su localizador URL.

background-position | Asigna la posición desde la que debe comenzar el fondo asignado. Las coordenadas son ‘x’ e ‘y’. Con 0 0 le estamos diciendo que empiece desde el punto 0 del eje x y desde el punto 0 del eje y, o lo que es lo mismo y hablando «en plata», desde arriba a la izquierda. 😀

background-repeat | Establece las diferentes propiedades de repetición. En este caso, repeat, significa que repita tanto el eje x como el eje y, por lo tanto creará un mosaico de repetición sobre todo el elemento contenedor.

Con estas tres líneas de código ya hemos dado un fondo de repetición o mosaico a toda la página, o lo que es lo mismo, al elemento body. Ahora vamos a darle estilo al div «contenedor_global».

#contenedor_global {
	width:600px;
	height:400px;
	margin:20px auto;
	background-color:#d9d9d9;
	padding:50px;
}

A este contenedor solo le hemos asignado un color con la propiedad background-color. Probemos con la etiqueta <h1>. Vamos a colocar una línea de separación por debajo del texto que tenga 2px de altura y que se repita a lo largo del eje x para que quede de la siguiente manera:

linea-repeticion
h1 {
	width:600px;
	float:left;
	color:#333;
	font-size:20px;
	font-family:Verdana, Geneva, sans-serif;
	padding-bottom:12px;
	background-image:url(../imagenes/linea-separacion-horizontal.png);
	background-position:left bottom;
	background-repeat:repeat-x;
}

Como verás, he vuelto a usar las mismas propiedades que en el body, pero diferentes valores en:

background-position | Le indico que empiece desde la izquierda y desde abajo y lo expresamos en texto. Más valores para esta propiedad.

background-repeat | Le indicamos que la imagen debe repetirse a lo largo del eje x. Más valores de la propiedad background-repeat.

Hoy hemos aprendido a crear imágenes de repetición y diferentes formas de hacerlo. Espero que te haya servido de ayuda. 🙂
Como siempre, puedes ver cómo ha quedado nuestro código o si quieres descargar los archivos, puedes probar con las imágenes que he utilizado.

¡Hasta la próxima! 😀

Categorías
CSS HTML listas Maquetación web

4. pasar de PSD a HTML y CSS | maquetar un menú

Ahora que tenemos la estructura básica de la página definida, el siguiente paso es maquetar la cabecera, donde encontramos dos menús. Uno a cada lado del logotipo.

diseñar y maquetar un menú en página web

Podemos ir trabajando sobre el archivo index.html desde donde hemos empezado para ir viendo evolucionar la página, aunque te aconsejo que cada vez que vayas a dar un paso importante, sobre todo al principio, hagas una copia de seguridad de lo que tienes hasta ahora. En caso de que «experimentando» con el código pierdas lo que tenías, siempre puedes recurrir a tu copia de seguridad. 🙂

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Título de la página</title>
    <link href="estilos/home.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="contenedor_global">
            <div id="cabecera">
            	cabecera
            </div>

            <div id="contenido">
            	contenido
            </div>

            <div id="pie">
            	pie
            </div>
        </div>
    </body>
</html>

Aquí tenemos nuestro código. Evidentemente, lo nuevo que vamos a colocar irá entre las etiquetas

<div id="cabecera">
</div>

Si volvemos (como siempre) a echar un vistazo a nuestro querido wireframe, podemos ver que la cabecera a su vez se divide en 3 divs: un menú izquierdo, el logotipo al centro y un menú en la parte derecha de la página, que no es más que una continuación del primer menú. Seguro que ya tienes en tu cabeza cómo se maquetarían estos tres divs. 🙂

<div id="cabecera">
    <div id="menu_izquierda">
    </div>

    <div id="logotipo">
    </div>

    <div id="menu_derecha">
    </div>
</div>

Para maquetar un menú en una página web, has de saber en primer lugar, que lo más apropiado es hacerlo con listas. A nivel semántico es lo más correcto ya que los botones de un menú no dejan de ser una lista de enlaces a otra/s página/s. Te dejo un enlace sobre listas en html que puede servirte como referencia antes de empezar. Ahí msimo podrás comprobar que existen dos tipos de listas:

1

ordenadas, que se maquetarán entre las etiquetas

<ol>
    <li></li>
</ol>
2

y desordenadas, cuyas etiquetas son:

<ul>
    <li></li>
</ul>

Donde <li> </li> será cada enlace o botón que se encuentre dentro del menú.

Para los menús utilizaremos las listas desordenadas. Y así, el código html para la cabecera quedaría de la siguiente forma:

<div id="cabecera">
    <div id="menu_izquierda">
        <ul>
            <li><a href="" title="">Inicio</a></li>
            <li><a href="" title="">Nosotros</a></li>
            <li><a href="" title="">Servicios</a></li>
        </ul>
    </div>

    <div id="logotipo">
    </div>

    <div id="menu_derecha">
        <ul>
            <li><a href="" title="">Proyectos</a></li>
            <li><a href="" title="">Blog</a></li>
            <li><a href="" title="">Contacto</a></li>
        </ul>
    </div>
</div>

Ya tenemos los menús, ahora tenemos que darle estilo. Debemos tener varias cosas en cuenta.

  1. Cada enlace tiene una pequeña ilustración que lo acompaña cuando la página que señala está activa o simplemente cuando el ratón pasa por encima.
  2. Los textos están en mayúsculas. (Esto puede hacerse con estilo en vez de escribir el código HTML con letras mayúsculas).
  3. Cada enlace tiene tanto por encima como por debajo una línea de puntos.

Estos son los tres aspectos más importantes (no tan comunes) que veo a tener en cuenta a la hora de maquetar. ¿Cómo solucionamos cada uno de ellos y cuáles son los atributos css correspondientes?

  1. background: url(/imagenes/icono.png) 0 0 no-repeat; || será el fondo [background] que hará aparecer el icono que acompaña al enlace.
  2. text-transform: uppercase; || convierte los textos en minúsculas a mayúsculas.
  3. border-bottom:1px dotted #7f7f7f; || Crea un borde en la parte baja del contenedor que sostiene el elemento con 1 píxel de grosor, punteado y del color que se le indica, en este caso #7f7f7f.

Te puede sonar a chino, pero enseguida lo entenderás y te será muy fácil utilizarlo. Veamos los estilos completos para cada uno de los elementos. Para que el menú izquierdo quede funcionando perfectamente, los estilos quedan de la siguiente manera:

#cabecera {
     width:930px;
     padding:0px;
     height:178px;
     margin:0px;
}
#menu_izquierda {
	width:221px;
	float:left;
        margin:0;
}
#menu_izquierda ul {
	width:136px;
	float:left;
	margin:0px;
	padding:0px;
	border-top:1px dotted #7f7f7f;
}

#menu_izquierda ul li {
	width:136px;
	height:27px;
	margin:0px;
	padding-top:10px;
	color:#222;
	float:left;
	text-transform:uppercase;
	border-bottom:1px dotted #7f7f7f;
}

#menu_izquierda ul li a{
	width:112px;
	float:left;
	padding-left:22px;
	color:#222;
}

#menu_izquierda ul li a:hover{
	color:#9d8e6e;
	background:url(../imagenes/icono-menu.png) 0 0 no-repeat;
}

#menu_izquierda ul li a.activo {
	color:#9d8e6e;
	background:url(../imagenes/icono-menu.png) 0 0 no-repeat;
}

¿Qué podemos no entender de aquí? En principio y como se puede comprobar, procuro asignar a cada elemento sus atributos comunes. Como comunes pueden ser: width, height (no siempre es necesario), float, margin y padding.

  • width: es el ancho del contenedor.
  • height: se refiere a la altura.
  • float: a que lado flota el contenedor, izquierda o derecha.
  • margin: son los márgenes externos al contenedor.
  • padding: son los márgenes internos en el contenedor.

Aquí te paso una chuleta de css para estos apuntes básicos. ¡Imprescindible!

Ahora vamos a ver paso a paso el código css:

Al #menu_izquierda le hemos dado su ancho correspondiente (según archivo.psd que hemos recibido del diseñador) y le decimos que flote a la izquierda. De aquí podemos deducir que para el #menu_derecha el código sería el siguiente:

#menu_derecha {
	width:221px;
	float:right;
}

El siguiente elemento #menu_izquierda ul corresponde a la lista que está dentro del div #menu_izquierda. A esta lista le estamos dando también los valores para el ancho, para que flote a la izquierda, un margen de 0px a cada lado exterior de su contenedor y el detalle de 1px de ancho para el borde superior. Este pequeño detalle, nos va a permitir que todos los elementos de la lista (<li>/<li>) estén rodeados tanto arriba como abajo por esa línea de puntos intermitentes, ya que le vamos a dar una línea sobre el contenedor total de la lista y una línea en el pie de cada uno de los elementos internos de la lista.

Con #menu_izquierda ul li, nos estamos refiriendo a cada uno de los elementos de la lista (sea enlace o no) y cuando escribamos #menu_izquierda ul li a entonces estamos señalando a los enlaces de los elementos de la lista. ¿Fácil, no? 🙂

Bien, entonces a #menu_izquierda ul li le damos un ancho, un alto, un margin general igual a 0, un margin interior superior (padding-top) de 10 px para que haya separación entre un elemento y otro. Le asignamos un color que recogemos del archivo.psd, le decimos con text-transform:uppercase que las letras las ponga en mayúsculas y le asignamos un borde inferior de línea discontinua.

La siguiente etiqueta #menu_izquierda ul li a hace referencia a cada uno de los enlaces que hay dentro de cada elemento de la lista. Mostramos un enlace de la siguiente manera:

<a href="url de la página" title="descripción del enlace">
    enlace a la página
</a>

Para saber más sobre enlaces en html te dejo un buen link de referencia. Y seguimos con esta etiqueta, a la que le hemos dado los valores comunes de ancho, float, color y un padding-left de 22px. ¿Por qué? con este margen interior izquierdo, le estamos dando espacio para que cuando el cursor pase por encima de cada enlace el icono que acompaña a cada uno aparezca a su izquierda.

Cuando vemos una etiqueta como esta, #menu_izquierda ul li a:hover, el hover nos está indicando que así va a reaccionar la etiqueta cuando pasemos el ratón por encima. Entonces le decimos que cuando el ratón pase por encima del enlace que está dentro del elemento de la lista cuyo div que lo contiene es #menu_izquierda, debe asignarle un color y una imagen de fondo que defiinimos de la siguiente manera:

background:url(../imagenes/icono-menu.png) 0 0 no-repeat;

Le estamos indicando que el fondo debe extraerlo de la siguiente url, que su posición debe ser 0 (0px alto) 0 (0 px ancho) y que no se repita, que solo se muestre una vez.

Por último tenemos #menu_izquierda ul li a.activo. Aquí leemos que hay un enlace de la lista a la cual hemos asignado una clase y la hemos llamado activo. Esta clase servirá para indicarnos en qué página nos encontramos y los valores que le hemos dado son el color y el background, los mismos que a #menu_izquierda ul li a:hover. ¿Casualidad? Por supuesto que no. Queremos que cuando el elemento esté activo se comporte de la misma manera que cuando el ratón pase por encima, es decir, con el icono al lado del nombre del enlace.

diseñar y maquetar un menú en página web

¡Ya sabemos maquetar un menú! En el siguiente enlace puedes ver cómo ha quedado la cabecera después de estas instrucciones. Y si quieres trastear un poco el código, no tienes más que descargarlo. ¡Suerte! Y hasta el siguiente post. 🙂

  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página
Categorías
CSS HTML Maquetación web

3. pasar de PSD a HTML y CSS | maquetando una web desde cero

Para maquetar una página web necesitamos dos herramientas fundamentales:
– Un editor de texto. Yo uso SublimeText.
– Un navegador web.

Antes de empezar es el momento de echar un rápido vistazo de nuevo al wireframe que realizamos previamente:

wireframe

En este boceto están definidas claramente tres partes en nuestro sitio:
– Cabecera
– Contenido
– Pie

Seguir leyendo «3. pasar de PSD a HTML y CSS | maquetando una web desde cero»