Posts Tagged ‘CSS



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

Anuncios
04
Jun
09

Referencias en español y más relacionadas al diseño web

Aunque no son tantos como los que encontramos en inglés, siempre aparecen websites en español con buena información de referencia para los diseñadores de websites.

Aquí les dejo enlaces a websites con información y recursos relacionados al diseño para la Internet en español.

Web Taller
http://www.webtaller.com/

Vitamina web
http://www.vitaminaweb.com/

Maestros del web – revista
http://www.maestrosdelweb.com/

Estas son en inglés:

WebMonkey
http://www.webmonkey.com/

Web Design Library
http://www.webdesign.org/

Bravenet: Herramientas para webmasters
http://www.bravenet.com/


James Lynn

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

03
Jun
09

Day 3: Its all in the Stylesheet

Hoy comenzamos discutiendo los distintos tipos de enlaces para manejar la navegación dentro y fuera del website, links para enviar emails.  Dentro de los links también se discutió sobre los anclajes que básicamente ayudan a regresar/acceder a algún punto especifíco de la página cuando tenemos mucho contenido.

A continuación seguimos explorando las maravillas del CSS, para modificar el look de nuestros enlaces y su comportamiento al poner el mouse encima del enlace. De ahi partimos a cssmania.com para ver y contrastar los distintos tipos de formatos o layouts utilizados por varios websites.  Encontrando que la mayoría cumple con la ley de los tercios para acomodar el contenido de forma organizada y visualmente placentera.  Proceguimos a utilizar (y jugar con) inkscape para la creación de un logo para nuestra página de prueba. Nuevamente a las Macs le dio el arrevato del teclado, pero compenzamos con nuestro buen amigo copy y paste (Donde se cierra una puerta, se abre una ventana). Procedimos a modificar el stylesheet para que cada vez que utilizamos el h1 saliera el logo que creamos y escondiera el texto.  Finalmente hoy añadimos una serie de herramientas para firefox para mejorar la experiencia.

Ahora es que se están poniendo las cosas interesantes, como había mencionado antes el stylesheet manipula los valores esteticos del website, y cualquier cambio que se quiera hacer a todo el website es simplemente cosa de modificar el stylesheet y darle save a los cambios.

jvv

02
Jun
09

Day Two: Romancing the Mac

Hoy fuimos introducidos a las tablas (¡Mis fieles enemigas!), las utilizamos para introducir una imagen con un comentario debajo.  Yo y las tablas tenemos una relación “love-hate”, debido que son la entidad mas práctica para organizar el contenido de un website, pero a la primera que te descuides se pueden descuadrar y hacerte la vida de cuadritos. Pero relacionado a lo que discutimos en el taller lo gracioso (y molestoso) es que Kompozer tiene una tendencia de alterar los arreglos que se hacen manualmente al código (en este caso era simplemente utilizar el comando align=”right” en el table tag) a lo que estaba establecido originalmente.   Al fin al cabo se logro alterar el código y lograr el resultado.  Además de las tablas cubrimos el horizontal rule, para crear divisiones entre secciones del website tal como Título del contenido, o separar la sección de Contacto de la Sección de Servicios en una página.

También comenzamos con la parte de diseño de la página web, o sea hoy comenzamos a bregar con el aspecto estetico de la página web.  El cual vamos a estar utilizando StyleSheets para facilitarnos la existencia, ya que de un stylesheet (el cual es un archivo externo el cual es llamado por cada webpage) podemos manipular el valor estetico de todo el website y ahorrarnos el trabajo de ir página por página a estar haciendo modificaciones (Hay que adorar los avances en la listería tecnología).  Utilizamos InkScape para crear un rectangulo en gradiente para poder crear un fondo para nuestro webpage.  Lo gracioso de este software fue que creo algún tipo de anomalía en las macs, que causaba que el teclado cambiara el valor de cada tecla por ejemplo si presionaba las teclas “moo” salia “css” (Escucho a los freaks de las Macs gritando Blasfemia por el mundo entero).

Lo que sigue adelante no tiene que ver con el taller sino relacionado a la comida del día de hoy.

Seguir leyendo ‘Day Two: Romancing the Mac’