Posts Tagged ‘layouts

24
Jun
09

Day 17 and 18: I </3 Kompozer

El blog de hoy cuenta doble!

En  los últimos días me he dedicado a manipular los enlaces de mi proyecto, y vaguear en el salón ya que sigo en la espera de la información restante.  Ya he enviado varios recordatorios y hoy envie uno final.  No estoy 100% contento porque no me gusta terminar las cosas photofinish, pero hare lo que pueda…

Hoy nos hablaron del día de logros/exposición en la cual tendremos la oportunidad de hacer networking para nuestros servicios.  Estoy motivado en tener la oportunidad de “rub elbows” con varios negociantes a ver si algo cae =D.

jvv.

22
Jun
09

Day 16: Let’s play the waiting game… Who wants to play hungry hungry hippos!

El día de hoy complete el layout html en Kompozer del website, exceptuando por el banner. El cual no puedo completar hasta que reciba las ímagenes que mi cliente me va a proveer esten en mis manos.  Por ahora tengo el banner que habia creado para la demostración y se me ha notificado que si no se recibo lo necesario de mi cliente, pues el website se va como esta (Lindo se va a ver el website con el dummy text en latin lol)

Espero recibir lo que me falta pronto o me tendre que ir a molestar en la oficina de mi cliente.

jvv

11
Jun
09

Day 09: Prelude to the interviews!

Hoy continuamos traduciendo el diseño de Fireworks a HTML.  Completamos la barra de navegación y le incluimos las pestañas para que diera la impresión de ser un folder. Finalmente incluimos la navegación localizada en el footer.

Trabajamos con Gimp y Photoshop, los dos que son programas de manipulación de ímagenes bitmap.  La idea detrás de este ejercicio es ver que ambos programas hacen exactamente lo mismo en términos de cambair el tamaño de imagen y formatearlas para que se vean correctamente en el navegador.

Mañana son las entrevistas con los clientes no se que esperar! lol.

jvv.

A continuación ímagenes de lo que hice hoy :).

08
Jun
09

Day 06: Picture This

  • Hoy nos enfocamos en utilizar Fireworks, aplicación para la manipulación de ímagenes.
    • Hicimos una serie de figuras combinadas con efectos para recrear lo que habiamos logrado.
    • Creamos las ímagenes para hacer los botones que simulan las pestañas en un folder que se estan utilizando con frecuencia en websites .
  • Aprendimos la importancia de crear un boceto para nuestro website.
    • Dígital: Para que el cliente tenga una idea mas concreta de lo que va a tener.
    • Hecha a Mano: Para nosotros tener un guideline de lo que vamos a diseñar (tanto como sirve para hacer un representación abstracta en una reunion con el cliente a primera instancia)
  • Nombramos una serie de websites donde podemos conseguir stock photos para nuestro website.

jvv

p.d. 000Webshost, pon una opción que permita que sus clientes puedan solicitar una nueva copia del email de activación.

05
Jun
09

Day 05: Y mi cuenta de hosting dónde esta?

Hoy nos suscribimos al hosting para nuestro dominio, el cual todavía estoy esperando el email de confirmación. Pero como dice el dicho “A caballo regalao’ no se le mira el colmillo“.   Asi que sigo relatando los eventos que transcurrieron en el día de hoy.

Hoy terminamos el formato que comenzamos ayer, añadiendo las cajas de contenido (un contenedor, una columna a la derecha y otra a la izq.) y un footer.  Utilizando el stylesheet cambiamos como se veia cada bloque, inclusive logramos hacer que cada bloque luciera diferente, alterando el tamaño del texto, su color y el comportamiento de los enlances. Finalmente convertimos lista desorganizadas de texto para crear la navegación del website, logrando que estos parecieran botones de texto.  Una imagen de lo que hicimos hoy:

Picture 1

Bueno eso es todo por hoy, hasta el lunes.

04
Jun
09

Day 04: Styleapalooza

Hoy pasamos la mayoría del día discutiendo lo que eran domain names (los famosos .com, .net, etc.), la importancia que tienen al ser seleccionados, la relación y significado que tienen con el nombre del website al cual representan.  Básicamente uno puede seleccionar el nombre mas loco/cool que uno desee pero tiene que relacionarlo a la compañía, también hay que considerar que la combinación sea fácil de entender y redactar, tanto como que no tenga un significado negativo en otro lenguaje, tanto como un mensaje subliminal entre líneas. Hay algunos ejemplos en este gracioso artículo que encontre en la red mientras buscaba sugerencias en nombres de dominio.  Luego procedimos a seleccionar el nombre para el negocio que estamos montando, me quemé par de neuronas pensando en nombres que me agradaran, pero al fin al cabo quede contento con el que seleccioné.  Junto a la explicación sobre registro de domains viene el del hosting o alojamiento, que es el espacio que alquilamos de un proveedor para hospedar las páginas web.  Hay varios tipos de planes de alojamiento que proveen diferentes beneficios (a diferentes precios) de acuerdo a lo que querramos hacer con el proyecto que estemos desarrollando.

Por la tarde continuamos trabajando con el css, esta vez nos enfocamos en definir los div tags que organizarán el contenido de nuestro website para evitar que parezca un sendo rebolú. La manipulación de los div tags se lleva a cabo al añadirle un id (wrapper, header, footer…)  a cada tag, que este relacionado con un conjunto de instrucciones en la hoja de estilo para determinar su comportamiento.  Discutimos los tamaños que tenemos que considerar al diseñar el website, el cual en la actualidad debe ser con un ancho de 955px, tomando como base la resolución de 1024 x 768.

jvv

04
Jun
09

CSS Layouts: enlaces a websites con ejemplos y tutorías

Hola!

Aquí les dejo una lista, que seguiré actualizando, de enlaces a websites con mucha información, ejemplos y tutorías para diseñar y crear la diagramación (el layout) de su website.

CSS layouts
http://www.glish.com/css/

The Layout Reservoir
http://www.bluerobot.com/web/layouts/

Layout Gala
http://blog.html.it/layoutgala/

CSS Drive
http://www.cssdrive.com/index.php/examples/

Dynamic Drive CSS Layouts
http://www.dynamicdrive.com/style/layouts/

Cada uno de estos websites tiene enlaces a más información.

Saludos,
James Lynn