Empezando con CSS parte 2

Publicado por A. G. viernes, 30 de octubre de 2009 comentarios (0)

Nuevamente vengo con las famosas CSS, pero esta vez haré una serie de entradas sobre el tema para ir aprendiéndolo poco a poco...tomen en consideración que soy una neófita por lo que puedo incurrir en algún error (conste que les advertí) si ven alguno, hagánmelo saber para corregir y seguir mejorando.

Empezaremos por explicar de una forma más amplia lo que son los estilos en cascada (CSS) basándome en lo que voy aprendiendo de la página web desarrolloweb.com. Espero les sea de ayuda (y a mi también).

Las CSS se crearón debido a las limitaciones que tiene el HTML, ya que sólo se podía montar las imágenes, el texto, etc. en tablas, lo cual no es recomendable porque no fueron hechas para ello teniendo así problemas para visualizar las páginas en distintas plataformas, más aparte la dificultad de modificar un sitio en el "río de etiquetas" utilizadas, haciendo más difícil el trabajo.

Las CSS precisamente ayudan a resolver estos problemas, entre sus ventajas está que podemos modificar todo un sitio web por medio de un sólo documento .css, podemos modificar sólo una porción de la página, se le pueden atribuir varios estilos a una sóla etiqueta, maneja varias unidades de medida (pixeles, pulgadas, centímetros y puntos) entre otros beneficios.

Para ejemplificarlo, les dejo un esquema en donde se puede ver sus formas de usarlo:

Bueno, eje...no podré poner el código fuente para que lo copien directamente de aquí, solo lo pondré como imagen porque si lo pongo, la entrada lo lee como código css y se modifica, y es así más complicado!

Espero que les haya quedado claro, como vieron hay cinco formas, los fui poniendo del más general a el más particular, cuando vaya avanzando les explicaré con más detalle :)

Les dejare los archivos de los ejemplos que puse en la imagen, incluyendo el primero que vimos en la anterior entrada.

Ya les diré después de que tratará la siguiente entrada.

Este es el archivo con los ejemplos subido en box.net:
http://www.box.net/shared/tz1k3n2df5

  Etiquetas: ,

La importancia del CSS parte 1

Publicado por A. G. lunes, 17 de agosto de 2009 comentarios (0)

Ahora veremos algo más práctico y elemental...y de lo que más me gusta investigar (porque realmente no conozco mucho), se trata del CSS. Quisiera yo misma explicar sobre todo lo que es el HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto) pero la verdad no tengo el suficiente tiempo para hacerlo porque en lo que verdaderamente me quiero enfocar y seguramente a muchos les va a ayudar más es sobre el CSS, el sofisticado y a veces complicado (en lo que respecta a mí un poco :S) lenguaje que aplica el CSS ( Cascading Style Sheets u hojas de estilo en cascada).

Antes de comenzar de hablar de ello, todos los que no conozcan bien como realizar documentos HTML, les daré una muy buena página por donde comenzar, es: HTML.net y hay muchos otros en el internet que pueden encontrar (lo mismo del CSS...)

¿Porqué es importante el uso de los CSS? Al principio no comprendía bien para que servía...pero ahora leyendo un poco más en la red es muy importante conocerlo porque de esta manera las aplicaciones y formatos que se le puedan dar a un documento HTML son muy amplias y es muy recomendable para cuando se le quiere dar un estilo a todo un sitio web sin tener que estar modificando cada una de las páginas.

Bueno, ahora que ya conocen las ventajas vamos a ver el componente de una CSS (de manera resumida :S) y como ponerla en un documento HTML, de hecho hay muchas maneras de hacerlo pero el que recomiendo es "llamarlo" de forma externa, es decir, hacer un documento aparte con el estilo que tenga la extensión .css

De forma general un documento HTML está estructurado de esta manera (muy básico...), si quieren lo pueden copiar en un bloc de notas, darle un nombre como "mipaginaweb" y ponerle la extensión .html y visualizarlo en un navegador.

<HTML>
<HEAD>
<TITLE> Mi pagina web</TITLE>
<LINK REL="stylesheet" HREF="estilo.css">
</HEAD>
<BODY>
<H1>Página con estilo</H1>
<P>Mi página con estilo
<P>Este...algo habrá que más ponerle...
</BODY>
</HTML>
Como notarán la parte que está en rojo es la forma de "llamar" al documento que contiene el estilo CSS que en este caso se llama estilo.css, esta etiqueta <LINK REL="stylesheet" HREF="estilo.css"> se coloca entre el y <HEAD> y el </HEAD>

Si guardaron la página en HTML se verá algo así cuando la publiquen:







Pero ahora ¿Cómo se hace un documento CSS? Voy a dar un sencillo ejemplo para que vean las propiedades del documento (guardenlo y pónganle "estilo.css", guárdenlo en el mismo lugar donde hayan guardado el archivo anterior html):
body {
padding-left: 10em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: #FAAC58;
background-color: #8A084B }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }

Explicación: Sólo se modificaron dos elementos importantes en el documento,que en este caso son el body y el h1, para poner las características de cada uno se encierran con {...} paddin-left se refiere a cuanto espacio hay al inicio de la información, el font-family es el tipo de tipografía que se va a usar, color el color de la letra y background-color el color de fondo. Los colores son manjeados en hexadecimal.

Cuando publican su documento HTML en un navegador les va a salir un resultado como el siguiente:







Espero que les sea de ayuda para aquellos que desean empezar a conocer el CSS, yo inicié con un tutorial que me pareció muy ameno, este el el link.

  Etiquetas: , ,

Web 2.0

Publicado por A. G. domingo, 9 de agosto de 2009 comentarios (0)

Ahora quiero hablar de un término que ha estado circulando por la red y que todo diseñador web debe conocer, se trata de la web 2.0, seguro se han de preguntar ¿Por qué 2.0? es justamente esto lo que quiero esclarecer en esta entrada..

Este término lo dijo por primera vez Dale Dougherty para una conferencia y se refiere a la evolución que ha tenido la web siendo ahora más dinámica y más compleja porque está enfocada a la interacción con el usuario, dándole control sobre sus datos, el servicio es más personalizado y la actualización se hace constantemente, al contrario de la web 1.0.

Un reflejo de ello son las redes sociales (myspace, hi5, etc.), sitios donde se suben fotos, dibujos, etc. (deviantart, flickr, etc.) y los blogs de distintas temáticas, lo importante en este tipo de webs es la interacción entre los usuarios ya que se da una retroalimentación constante.

Es importante considerar esta face importante en la web porque las empresas también están dentro de esta evolución, ya que no sólo tienen un sitio sino también blogs, redes sociales, etc. a los cuales se les tendrá que hacer un diseño acorde con esas características.

Voy a dar un ejemplo de ello, esta es un página que sigue el estilo de un blog divide por categorías, se pueden dar comentarios, se muestran las últimas entradas, etc. y trata sobre gastronomía, te enseñan recetas, tips, etc. para aquellos que son principiantes, avanzados, en general para todos los que tengan deseos de aprender, muy buena página, en especial me encanto su diseño porque de cocina no se mucho...este es el link: Gastronomia y cia

Por últimooo...solo para entretener :P encontré una imagen muy buena de como serían si fueran personas algunas webs que son consideradas 2.0 (fuente: Batcat)

  Etiquetas:

De que trata...

Soy Diseñadora Gráfica, apenas egresada. Lo que más me gusta es el diseño web y multimedia, porque se me da con facilidad y a la vez es un reto, el conocer los lenguajes que se manejan, como el html y el css, y otros tantos que faltan por conocer, es por ello que los temas de este blog estarán dedicados plenamente a ello para ofrecer mis conocimientos y también ampliarlos. Espero que sea de su agrado y esperar comentarios para ir mejorando :) Por cierto me llamo Alma G. (me pueden llamar Alma Panda je :D)

Seguidores

Copyright 2009 - Web y más web

Theme designed by: Raycreations.net, Ray Hosting