jueves, 9 de enero de 2014

Pagina Web Finalizada



La pagina consiste en un trabajo personal dedicado a la peluqueria Maikels en Almansa (Albacete). Tiene 6 apartados (inicio, historia, tarifas, galería, ubicación y contacto) y una vista inicial. Tiene 2 css distintos y bien diferenciados. El primero un estilo oscuro pero con un aspecto mas profesional con el navegador en la parte superior de la pagina. El segundo con tonos con mas luz y algún otro color (rojo), intercalándolo con otros elementos de la pagina para confirmar el fondo, navegador a la derecha. Ambos estilos pasan los controles de validación de css, html y accesibilidad.

El primer estilo esta más trabajado. He pensado en el hasta el ultimo momento y teniendo en cuenta el partir desde cero sin utilizar ninguna plantilla parece hecho por una empresa dedicada a la creación de paginas web. Partir desde cero no significa no haber mirado diversas paginas para tomar detalles (pagina tomada como referencia Aqui). Para algunas letras más estilizadas utilice una fuente de Google que me descargue y esta incorporada en el apartado de css, para así darle estilo a la pagina. Lo que pienso que menos me gusta, lo menos logrado, son las imágenes en galería. Cambie el estilo de las imágenes muchísimas veces y este fue el que mejor considere que me quedo, la imagen encerrada en un cuadrado con altura y ancho máximo y un comentario sobre la imagen pero abajo del todo comentando lo que es la imagen. Si hubiera tenido mas tiempo me hubiera gustado hacer el apartado de ubicación incorporando con javascript un mapa Google Maps con geolocalización o algo similar y también haberme trabajado mas sobre PHP en la parte de contacto-sugerencias. Personalmente, este ultimo punto, PHP, no considero que sea lo mejor de la pagina ya que me ha dado diversos problemas, como que no me llega a cargar la pagina inicial correctamente con su css, creo que es debido a la estructuración del almacenamiento de mis archivos.

El segundo estilo aun siendo ligeramente peor que el primero, utilizo cosas no dadas en clase, como el gradiente utilizado en la navegación y también como en el apartado anterior la fuente de Google.

En todo momento en ambos estilos he intentado que los colores tuvieran relación. En la primera al ser el logo blanco y negro, pero modificado para la pagina pensé que quedo bien en distintos tonos grisáceos para diferenciar partes, entonces elegí una paleta oscura, negro, grises y marrones y para destacar el blanco en las letras. En el segundo estilo, pensé en la contraposición entre un estilo y otro, por lo que busque un fondo claro y vi la imagen de fondo, pensé que quedaría bien y así fue, luego adapte la pagina a esos colores y di algún toque rojo (del mismo rojo que la imagen) al navegador.

Habiendo explicado todo, tanto lo que menos me gusta de la pagina como todas las innovaciones y fuentes de las cuales saque ideas, considero que es un buen trabajo, apropiado al contenido aprendido e impartido en clase que se pedía. Hasta el ultimo momento he intentado mejorar la pagina, pero la proximidad de los exámenes y la cantidad de ellos supone un lastre y no he podido mejorarla mucho respecto al 15 de diciembre. Espero que todo este bien explicado y que disfruten de la pagina.

viernes, 13 de diciembre de 2013

Por fin un estilo creado que me convezca para la entrega, pero mala representación de las fotos en recuadros por lo que tengo que pensar en modificarlo. Creación final de la historia y tambien de la cabecera de la pagina. Faltan retoques a la navegación. Cambiador de estilos listo y con imagenes para diferenciarlos sin recuadros. El 2 estilo un poco feo pero con los elementos importantes fijos para que siempre esten visibles y aumente su rapidez a la hora de encontrar información. Información actualizada. Y poca cosa mas.
Con las prisas no voy a ponerme a explicarlo bien y tengo muchas cosas que hacer aun XD vereis el resultado final.

miércoles, 6 de noviembre de 2013

Bueno, hoy pasaremos a realizar una practica con Pixlr. Dicha practica consiste en realizar una imagen combinando 3, una imagen de la Escuela, otra mia, y otra de alguien famoso. La imagen mia es cutre, es la de cualquier carnet, ya que no tenia a mano ninguna decente. La imagen de alguien famoso es la de Brad Pitt, por ejemplo. Ahora pasemos a describir el proceso:

1.- Imagenes seleccionadas antes de tocar nada:



2.- Luego hemos empezado con recortar la imagen de Brad. Para ello hemos copiado la imagen en un archivo .png transparente y luego seleccionando con el lazo bordeando la figura hemos borrado el fondo.
3.- Acontinuacion hemos puesto la imagen como capa arrastrando la imagen anterior a la de la Escuela. Como podemos comprobar nos queda una imagen de Brad muy grande, por lo que aplicamos transformacion libre para reducir la imagen, y luego hemos aplicado un poco de contraste y brillo. 


4.- Luego hemos pasado con la imagen mia. Hemos hecho lo mismo que con la imagen de Brad, pasarla a transparente y luego agregarla a la imagen de la Escuela. Era una imagen muy clara, por lo que hemos aplicado de nuevo contraste y brillo. Pero en este caso para adaptarlo a la ventana hemos aplicado primero transformacion libre y luego distorsion libre para que se pusiera dando un efecto inclinado.


5.- Despues de las imagenes lo único que hemos hecho a sido introducir los textos, pulsando en la barra de herramientas en la A. Con el nombre hemos utilizado una fuente llamada Hollywood aprovechando el hecho de imagen de un famoso y luego un comentario sobre el personaje famoso en la imagen unicamente por probar otro estilo.

 6.- Por ultimo para darle un efecto diferente he probado con distintos filtros, siendo el que mas me gustaba para esta foto el efecto de viñeta, haciendo parecida como a un imagen profesional.

Y aqui esta el resultado final, espero que os guste:





viernes, 25 de octubre de 2013

La pagina que he creado es desde cero y basicamente lo que queria era que quedara algo decente, cosa que no creo que haya quedado, y util. La pagina esta completamente validada.




En primer lugar habia que lograr unos botones que cambiaran de estilo cosa que he conseguido (arriba a la izquierda) y lo que he estado probando eran algunas funciones para posteriormente desarrollar la pagina bien. Una de estas funciones es el jQuery de la parte de los botones de navegacion para que cada vez cargue una pagina diferente teniendo la base y cambiando solo el contenido. Otra es la propia barra de la navegacion para que diera un efecto de pulsado y haciendo que ocupara toda la linea. Otro mas seria el efecto de arriba de la cabecera de efectos redondeados y sombras.

Analizando la pagina para que pareciera profesional encuentro varios fallos. Uno de ellos para mi es la propia cabecera misma, sin logo con colores que no combinan demasiado espacio desaprovechado, aunque me ha resultado curioso y util el utilizar sombras. Otro es la homogeneidad de colores en la pagina, no pegan para nada un verdoso asi con marron y menos aun con el negro de la navegacion y pie. El propio contenido esta sin terminar y en blanco, factor a mejorar.

jueves, 24 de octubre de 2013

Mas adelante subire la primera entrega y comentare lo que esta mal de ella ya que me he dado cuenta de muchisimas cosas pero en este ejercicio sera sobre los colores de una pagina cualquiera
Con kuler hemos analizado la imagen de la siguiente direccion: macarons. Hemos elegido un efecto muted para los colores de la pagina para que el fondo resalte y el contenido fuera mas homogeneo, un efecto triada.


Otra posible variacion es un efecto bright que mostraria un efecto mas monocromatico.



martes, 17 de septiembre de 2013


     La web que desarrollare será una basada en un peluquería. Considero oportuno realizarla sobre esta peluquería por la sencilla razón de que no posee aun una pagina web a la cual su clientela dirigirse en busca de información.

     El objetivo es dar a conocer la peluquería y ofrecer información ya sea sobre el sitio y sobre el personal. La pagina iría dirigida fundamentalmente a los habitantes de Almansa (Albacete) o alrededores, pero también a entidades que requieran conocer más sobre la peluquería y su historia.

     Enlaces:
        -Peluquería Le Flêr
        -Peluquería Marisela
        -Peluquería Cheska
        -Peluquería 7SEVEN
        -Peluquería Shangara
        -Peluquería Davi Rial
        -Peluquería Zenith
        -Peluquería SV
        -Peluquería María Paris

      Las 5 primeras son las mejor diseñadas y en las que nos apoyaremos para intentar dar un enfoque profesional, de las otras solo he cogido alguna idea puntual, ya sea sobre alguna sección o sobre algun detalle que debería incorporar pero no mas.

     La idea es que tenga 4 secciones: Inicio, Historia (biografía e historia de la peluqueria), Tarifas (corte y productos) e informacion (galeria, ubicación y contacto)