Proyecto del Curso (II): Web estática

Lunes, noviembre 12th, 2012

Presento la entrega número 2 de la página web y para empezar voy a hablar de recursos utilizados. Por un lado he utilizado un modelo de plantilla de HTML+CSS para comenzar la web de Free Css Templates, para todas las consultas referentes a la semántica de HTML y CSS W3Schools, finalmente el validador de CSS 2.1 que utiliza el plugin de Firefox de WebDeveloper, las fuentes fueron extraídas de Pointless and productions, utilicé JQuery v1.8.2 y su API y además utilicé GIMP/Adobe Photoshop CS2 para todo el tema de gráficos que excepto el fondo de las nubes y el sprite de hierba (ambos obtenidos de imágenes de google, y el de las nubes es temporal).

Ahora analicemos los contenidos por partes:

-Imágenes: Todas las imágenes siguieron el tutorial descrito anteriormente para pixelar cualquier fotografía. Todas hechas a mano, diseñadas por mí, en la mayoría de los casos, partía del modelo de imagen que te daba la plantilla, cogía el tamaño en píxeles, y desde cero empezaba a diseñar con la herramienta de tratamiento de imagen. Solo varió un poco en el tratamiento de los bordes y los botones planos, que básicamente las diseñaba en pequeñito pixel a pixel y luego las escalaba. El fondo es básicamente una única imagen de 3×3 con un color en cada píxel con una propiedad de multiplicación, que hace que se extienda por todo el fondo.

ImagenImagenImagenImagen

-Estructura: Descargué uno de los tantos HTML+CSS que se adecuaban al estilo que yo más o menos quería utilizar, leí todo el código y fui adecuándolo a mi gusto. Podría ir propiedad a propiedad, pero no tiene sentido. Básicamente establecí 4 zonas de importancia: masthead, featured-area, main-content y footer; correspondientes respectivamente a esas zonas que intuitivamente puedes encontrar más diferenciadas. Si tuviera que resaltar algo importante que hice fue el hecho de que para mantener las imágenes con el CSS y no tener que meterlas en el HTML, para así poder variar de forma sencilla utilicé la propiedad text-indent:-9999px; haciendo que se mantuviera la imagen pero así quitando todo el texto.

-JavaScript, Cookies y CSS: Por un lado, utilicé el JQuery, para la modificación del CSS, primero carga un css que no muestra nada nostyle.css y después aplica las cookies con JQuery.Cookie, por defecto carga el estilo style.css y si tiene uno de los dos estados, aplica el css asignado a esa cookie. Este es el contenido de toda la parte de Jquery utilizada.

$(document).ready(function(){

if($.cookie(“estado”)==null){
$.cookie(“estado”, “foo”);
}
if($.cookie(“estado”)==”foo”){
$(“link.changing”).attr(“href”, ‘styles.css’);
}

if($.cookie(“estado”)==”sharp”){
$(“link.changing”).attr(“href”, ‘nopixel.css’);
}

$(“#changecss”).click(function(){
$(“link.changing”).attr(“href”, ($(“link.changing”).attr(“href”)==’styles.css’) ? “nopixel.css” : “styles.css”);

if ($(“link.changing”).attr(“href”)==’styles.css’){
$.cookie(“estado”,”foo”,{expires: 7});
}
else
{
$.cookie(“estado”,”sharp”,{expires: 7});
}
});

$(“li#contact”).click(function(){
$(‘#main-content’).load(‘contact.html #content-contact’);
});

$(“li#portfolio”).click(function(){
$(‘#main-content’).load(‘portfolio.html #content-portfolio’);
});

});

-Validación: Todos los CSS usados y la página web, valida mediante el WebDeveloper. Si quieren ser validados deben ir uno a uno en local, pues en online, solo valida un css de “Pega” que tengo para que me cogiera el cambio de css con JQuery de manera efectiva.

Creo que hasta aquí todo lo que puedo comentar de esta entrega.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: