miércoles, 30 de marzo de 2016

Creación de la Web: Plantilla para Bootstrap

Para la creación de nuestra Web haremos uso de el framework Bootstrap de código abierto, que nos brinda una manera fácil e intuitiva de diseñar sitios y aplicaciones Web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.

Una vez definida una imagen corporativa y un estilo acorde al logotipo empresarial, tendremos que buscar una plantilla que se adapte a lo que tenemos en mente para después poder construir nuestra Web a partir de ahí.

Podemos encontrar plantillas de Bootstrap (templates) gratuitas en sitios como www.bootstrapzero.comhttps://speckyboy.com o www.wpfreeware.com.

En este último enlace, hemos escogido para nuestro diseño web la plantilla de QUANTUM, producida por Pulsar media. Vamos a entrar a analizar en detalle esta plantilla. Podemos acceder a ella en http://projects.pulsarmedia.ca/quantum/.


En primer lugar, al abrir la plantilla, comprobamos que el estilo es un estilo sobrio y elegante, jugando con los diferentes tonos de azul para conseguir un efecto visual agradable en el cliente y que inspire confianza.

Vemos en la parte superior de la plantilla, una pequeña barra informativa con datos importantes tales como el teléfono de contacto de la empresa y los apartados de login, register y búsqueda. Esta barra desaparecerá al hacer scroll más abajo en la página.

El menú es un menú elegante, con opción a apartados desplegables y que contiene en su margen izquierdo el logotipo empresarial. Este menú estará siempre visible y se desplazará con nosotros a medida que naveguemos por la web. Para su implementación se hace uso del plugin JQUERY superfish que podemos ver en https://plugins.jquery.com/superfish/.

Existe un panel de bienvenida a la página, en el que se recoge el nombre de la empresa y un pequeño slogan debajo de él.

Podemos ver el uso de uno de los elementos más importantes de la página justo debajo. En repetidas ocasiones hace uso de un carrusel para dotar de dinamismo a la página. En este caso las últimas noticias de la empresa. Para implementar esta funcionalidad, se usa un plugin Jquery, denominado Owl Carousel. Podemos ver algunos ejemplos de funcionamiento y su documentación para su uso en su página Web: http://www.owlcarousel.owlgraphic.com/.


Vemos que la plantilla posee un mecanismo de búsqueda, cuando se pulsa en el icono de búsqueda situado en la barra de información. 



Seguimos viendo elementos de la Web, cabe destacar que se añadido una librería tipográfica denominada Font-Awesome, que incluye una gran cantidad de iconos que vemos a largo de toda la web. Podemos ver la documentación, las declaraciones de los iconos y las funcionalidades que ofrece en su página Web: https://fortawesome.github.io/Font-Awesome/.

Seguimos viendo además elementos dinámicos que aparecen a lo largo de la página cuando hacemos scroll hacia abajo, algunos de estos elementos son implementados haciendo uso del plugin wow.js del que podemos ver su documentación en http://mynameismatthieu.com/WOW/.



Podemos ver un ejemplo de cuestionario sencillo y elegante y algunos elementos Web más.




Observamos más ejemplos de dinamismo en la Web, así como un nuevo carrusel. El estilo se mantiene en toda la página web haciendo uso de los azules, grises y amarillo para destacar contenido.



Aquí podemos observar los pie de página, que ha sido expandido para poder albergar más información relevante. Observamos de nuevo el logotipo corporativo, alusiones a distintas redes sociales,etc.

En la esquina inferior derecha vemos un icono de una flecha apuntando en dirección ascendente, que nos permite en cualquier lugar de la página, volver a situarnos en el principio.


Una vez descargada la plantilla, vistas las distintas funcionalidades y entendido el código que la conforma, podemos pasar a editarla a nuestro gusto para conformar así nuestra página Web.

martes, 22 de marzo de 2016

Paleta de colores de nuestra página Web

Una vez  definido el logo corporativo, vamos a partir de él y vamos a crear la paleta de colores que vamos a utilizar posteriormente en nuestra web. Tenemos varias técnicas de uso de colores: Monocromático, Análogo, Complementario, Complementario abierto, Triadas y Tétradas.

Vamos a hacer uso en primer lugar de la herramienta de Adobe, Adobe Color que nos permitirá ver los colores presentes en nuestro logo y seleccionar una paleta de colores adecuada a nuestros requisitos.


Observamos que los colores predominantes en nuestro logo son distintas gamas de azul, tal y como habíamos definido en la creación del logo.

Vamos a pasar a definir la paleta de colores que usaremos en nuestra página Web. Vamos a usar una estrategia de colores complementaria, aunque el aspecto de nuestra Web en su mayoría va a ser monocromático, utilizando diversos tonos de azul y colores sobrios como negro o blanco, utilizaremos colores cálidos como el naranja para destacar contenidos. Podemos ver muestras de esto en diversas webs como IBM o HP:



La definición de la paleta de colores de nuestra web queda de la forma:



Podemos comprobar como varía una imagen que se ajuste a nuestra paleta de colores, como por ejemplo es el caso de nuestro logo, cuando variamos algunos parámetros como pueder ser la temperatura. Usaremos una herramienta online que nos permite jugar con estos parámetros como es Lunapic.

Temperatura fría:


Temperatura Caliente:



O por ejemplo a la exposición:

Oscuro:


Claro: 


Por último las texturas que usaremos en la página web pueden ir orientadas a actuar como fondo web, debido a que en nuestro logo hemos definido una textura mediante la herramienta "Líneas de Tv", nuestro fondo puede seguir el mismo patrón, un ejemplo de aplicación del mismo lo podemos observar a continuación: 







Creación De la Web: Paso 1: Creando el logo

Lo primero antes de empezar a diseñar nuestra página web es el diseño del Logotipo empresarial, ya que marcará la paleta de colores y buena parte del diseño de la web.

Como hemos definido nuestra web como una empresa ficticia de construcción Enessa.S.L, que podemos considerar "mirror" de Encofrados y Estructuras Salmantinas, vamos a partir de su logo y después de unos retoques con la herramienta Pixlr, ya anteriormente vista, obtendremos nuestro logo.

Punto de Inicio:


Paso 1: Quitamos las letras e invertimos el logo:


Paso 2: Elegimos los colores Corporativos: En este caso vamos a elegir el azul, en 2 tonos, uno mas clarito y otro mas oscuro. El azul en el logotipo de una empresa da una imagen de equilibrio, fuerza, confianza e inteligencia. Podemos ver ejemplos en otras compañías como IBM, HP, Twitter, Dell...

Hemos hecho un uso intensivo de las herramientas: Varita Mágica, Pincel y bote de pintura.


Paso 3: Añadimos texturas al logotipo.
Vamos a añadir unas lineas horizontales, al estilo del logotipo de IBM 

Vamos a hacer uso de las herramientas que nos proporciona Pixlr de Desenfoque de rectángulo y lineas de TV:



Paso 4: Añadimos el nombre de la empresa. Elegimos cuidadosamente la fuente, que marcará en gran parte la tipografía de la web, en este caso hemos elegido la fuente Algerian.


Resultado final obtenido:


Por tanto, ya tenemos definido nuestro logotipo corporativo.

martes, 15 de marzo de 2016

Retocando imagenes con Pixlr

Uno de los aspectos más importantes a la hora de que el diseño de tu página Web quede bonito y llamativo es hacer un buen uso de las imágenes y para ello muchas veces es necesario adaptar una imagen al diseño global de la Web.

Vamos a ver un pequeño tutorial paso a paso sobre como retocar una foto, en este caso, usaremos como herramienta Pixlr. Pixlr es un editor de fotografías online y FreeSoftware con un diseño sencillo y similar a otros software de pago como puede ser PhotoShop.

Vamos a realizar una actividad sencilla para ilustrar su uso:

Actividad: Yo estuve allí

Consiste en hacer una foto en la que se combinen:
  • foto de la escuela ETSIT
  • foto personal
  • foto con algún personaje famoso
Vamos a empezar eligiendo las fotos:

-Foto de la ETSIT descargada de la página de la escuela

- Foto Personal


- Foto del personaje famoso, en este caso, Pau Gasol


Vamos a empezar a editarlas:
  • Paso 1; abrir las imagenes en Pixlr
Vamos a la pagina de Pixlr, seleccionamos Launch Web App, abrir una imagen desde el ordenador (o desde un URL) y seleccionamos nuestras imágenes.

  • Paso 2: Recortamos las imágenes
En este caso, vamos a recortar la imagen personal y la de Pau Gasol, ya la imagen de la ETSIT actuará como fondo.

Para ello, seleccionamos la imagen sobre la que queremos trabajar y seleccionamos la herramienta lazo.


Con ella seleccionamos el contorno que queremos recortar (seleccionando el lazo poligonal nos puede resultar más fácil). Una vez seleccionado, cortamos nuestra selección (Ctrl+x o cortar) y la pegamos (Ctrl+v o pegar) en una nueva capa, obteniendo: 



Hacemos el mismo procedimiento con la imagen de Pau Gasol.

  • Paso 3: Unir capas y escalar
Para unir las capas que hemos obtenido a la foto de fondo, simplemente arrastramos las capas seleccionadas hasta la imagen de fondo:


Como vemos es necesario escalar las imágenes y recolocarlas a nuestro gusto. Para trabajar con la capa de interés, la seleccionamos en la parte derecha del editor, si no queremos que se vea una determinada capa basta con hacer uncheck en el tick de esa capa. Podemos escalar la imagen yendo a Imagen(parte superior) y a tamaño de imagen. Es importante guardar las proporciones para que no se deformen las imagenes. Para mover las imagenes, simplemente hacemos uso de la herramienta mover(encima del lazo) y las recolocamos.


  • Paso 4: Retoques finales
Por último, cambiamos los pequeños detalles que puedan hacer que nuestra foto tenga una mejor apariencia o parezca más realista.

En este caso, hemos difuminado un poco los contornos de las figuras, para que no parezcan tan "pegados", hemos hecho uso de la herramienta Difuminar, Selector De Color y Pincel.




Podemos dar una apariencia de "3D" haciendo como que parte del brazo está por detrás del personaje y la mano sobre su hombro. recortando adecuadamente como hemos explicado antes. 
Obtenemos:


  • Paso 5: añadir Texto 
Haciendo uso de la herramienta de texto que nos proporciona Pixlr, podemos agregar texto a nuestras fotos fácilmente.

Después de añadir un pequeño texto, el resultado final obtenido es:



Como vemos, haciendo uso de las funcionalidades básicas de Pixlr, podemos retocar las imágenes a nuestro gusto para poderlas colocar en nuestra página Web.