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 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

Categorías
CSS HTML Maquetación web

2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web

Optimizar Imágenes para Internet

El recorte de imágenes es una tarea muy mecánica que en poco tiempo puede estar finalizada. Pero hay que tener varios factores en cuenta para preparar las imágenes y optimizarlas al máximo.

Nuestro objetivo es lograr un balance entre calidad de imagen y el peso de la misma y así evitar hacer esperar al usuario a que se cargue la imagen en la página. Te muestro una serie de factores muy básicos a tener en cuenta antes de empezar.

1. La resolución de píxeles necesarios para visualizar imágenes en la pantalla es de 72pp.
2. El peso final de una imagen debe estar comprendido entre 2 y 20kb (kilobytes).
3. Los formatos principales para web serán: GIF, PNG y JPG.

Si quieres conocer más acerca de qué formato es el recomendable para usar en un sitio web, el siguiente enlace me parece de los más interesantes:
http://blogandweb.com/blogger/conoce-mas-sobre-los-formatos-de-imagenes-para-web/

 

Y una vez vistos los tres puntos básicos te muestro la manera en la que recorto una imagen optimizada para web con un ejemplo muy sencillo.

Con la herramienta Recortar (C) defino los límites de la imagen quedando de la siguiente manera:

Una vez tenemos la imagen recortada y todo está correcto, para guardarla hacemos clic en Archivo > Guardar para Web y Dispositivos cargándose la siguiente pantalla:

Optimizar Imágenes para Internet

En la opción Ajuste preestablecido tenemos la opción de elgir el formato que mejor se adapte para el sitio web. Yo suelo guardar en formato PNG cuando se trata de imágenes con colores planos, transparencias y según qué tipo de texturas y el formato JPEG lo uso en fotografías y siempre con calidad entre 60 y 80.

Al hacer clic en Guardar y ubicando la imagen en la carpeta del proyecto, ya tenemos nuestra primera imagen optimizada para web. Guardándolas de esta manera, nos aseguramos en gran parte que cumplimos con los 3 puntos principales a tener en cuenta que hemos tratado al principio.

¿Empezamos ya a maquetar?


  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

1. Pasar de PSD a HTML y CSS | Definiendo los pasos

[et_pb_section][et_pb_row][et_pb_column type=»4_4″][et_pb_text]

Convertir un archivo de Photoshop en código HTML y CSS es una de las tareas más comunes para un maquetador web. En ocasiones el diseño y la maquetación de la página los asume la misma persona, pero en otras, ambas tareas son desarrolladas por un diseñador y un maquetador, por lo que debería existir una relación cercana entre ambos para tener claro el tratamiento del proyecto web.

Con esta entrada quiero explicar la metodología que sigo desde el momento en que recibo el diseño de la página en un archivo psd y como hago uso del mismo para comenzar a maquetar y dar vida al proyecto. Como ejemplo para hacer la conversión he usado este diseño que tiene una estructura sencilla de explicar.