Tarea 1 de TWEC

lunes, 19 de diciembre de 2011

MEMORIA-4 TWEC

Ya es la última entrega de la asignatura.

Para la entrega final he modificado algunas imágenes, he modificado el styles1.css ya que se descolocaba al haber puesto en conmutador de estilos.

Para poner este conmutador de estilos, me he basado en las transparencias de ejemplo del moodle de la asignatura y aunque costo un poco al final conseguí que funcionara correctamente pero algunas cosas en el segundo css variaron.

A la hora de modificar el css de la plantilla original también me he basado en las transparencias de clase y buscando el google todas las dudas ya que hay muchas páginas webs sobre estilos css, html, jQuery, etc.

La plantilla me la he descargado de htttp:www.free-css.com.
Elegí esta entre todas las que hay ya que me parecía una web sencilla y que se adaptaba a la idea original que tenía para mi web.

Las imágenes las he creado con el pixlr.com y con el gimp. Todas las imagenes usadas las he buscado en google imágenes, solo las he modificado.
Como comentario, decir que la imagen que mas me costo que quedara perfecta es la imagen de la cabecera del segundo estilo css ya que los lapiceros de colores debían cuadrar con las letras del menú. La pizarra es una imagen simple de google y las letras color tiza fueron creadas con el gimp.

Como conclusión quisiera recomendar esta asignatura optativa a todos los alumnos del Grado ya que saber hacer páginas web no algo muy complejo tener estos conocimientos es algo importante en el mercado laboral.

jueves, 24 de noviembre de 2011

MEMORIA-3 TWEC

En el index.html tenemos la opción de ver la misma web con distinto css; el código html es el mismo, lo único que cambia es el código html.
He modificado el menú de arriba, en vez de ser horizontal, en este nuevo estilo es vertical.
También he cambiado los colores e imágenes.
El resultado a sido el siguiente:

Evidentemente las ofertas y demás son lo mismo que en el anterior css ya que es la misma tienda ;)

miércoles, 23 de noviembre de 2011

MEMORIA-2 TWEC

Finalmente he modificado el index.html, he cambiado el gif de ofertas por una imagen que dependiendo del momento del año irá cambiando, ahora mismo he puesto una de la vuelta al cole, en el periodo de Navidad se cambiará por otra típica de esa fecha, etc.

Este pantallazo muestra papeleria.html.

En la parte de librería queremos recomendar libros que en ese momento estén vendiendo mucho o sean novedosos por algún motivo.

Del mismo modo en la parte de ebooks queremos mostrar el ebook que en ese momento se encuentre en oferta.

Este pantallazo muestra jugueteria.html, queremos dar a entender que tenemos cualquier tipo de juguete, ya sea videoconsolas como peluches o juegos de mesa.

A continuación empezaré a desarrollar el otro css para el mismo html.
Iré comentando los cambios en este blog.

domingo, 20 de noviembre de 2011

MEMORIA-1 TWEC

A continuación iré comentando los avances en el desarrollo de la página web, con el fin de irnos aproximando a la idea final.

En este pantallazo podemos apreciar como he modificado la imagen principal, cambiándola por una más acorde al negocio (papelería. librería, juguetería).
También he modificado por completo el menú de arriba, apareciendo ya por completo todas las secciones que tenía pensado en un inicio.
Por otro lado se ha cambiado la imagen de abajo a la izquierda y el texto por el que aparece, consiste en pinchar la imagen y entrar en otra página donde poder hacer un pedido.

Todavía da unos cuantos errores al validar pero se solucionarán lo antes posible.

Ya podemos observar el index.html definitivo. Se han modificado los divs de debajo de la imagen.

La imagen de la mancha roja de OFERTAS es un .gif que se mueve para llamar la atención. Si pinchamos en ella nos redireccionado a oferta.html, donde podemos observar las ofertas de ese momento.

También tenemos la opción de ver la página con distinto css que todavía no esta desarrollado; y de poder entrar en este blog.

Se ha añadido una pequeña descripción del lugar físico de la tienda y el teléfono de contacto.

En el menú top si hacemos click en la pestaña contacto nos dirigimos a contacto.html donde encontramos esto:

Encontramos la dirección de tienda, el teléfono de contacto, el email y un google map de la dirección (código copiado de GoogleMaps directamente). Este mapa es muy útil y ayuda a la gente a saber situar la tienda rápidamente.

lunes, 10 de octubre de 2011

Proyecto del curso II

Esta es la plantilla escogida.
De momento sólo he modificado en el menú el cuadro de inicio.

Más adelante publicaré una nueva entrada con la plantilla más modificada todavía.

La plantilla es sencilla, no supone mucha complicación pero como ya dije en la primera entrada del blog, buscaba una web sencilla que sea fácil de manejar para cualquier usuario y se deje claro donde se puede encontrar cada cosa.