Maquetación web

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 …

Añadir Adobe Adge Web fonts a mi página web Leer más »

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

6. pasar de PSD a HTML y CSS | crear varias columnas en html y css Leer más »

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

4. pasar de PSD a HTML y CSS | maquetar un menú Leer más »

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: En este boceto están definidas claramente tres partes en nuestro sitio: – Cabecera – Contenido – …

3. pasar de PSD a HTML y CSS | maquetando una web desde cero Leer más »

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

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 …

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