EL CANCER DE LOS "REALITY SHOWS"

Todos sabemos que son basura. No creo que exista alguien que opine que hay algo rescatable en estas situaciones "improvisadas" completamente banales y superficiales que llegana componer horas de "entretenimiento" para rellenar la programacion diaria de muchos canales.

Si me permiten hacer una analogia, yo lo veo de la siguiente forma:

Pensemos en los programas "tradicionales" de television (escojamos los mas ordinarios de los shows regulares como Friends, Grace Anatomy, That 70's Show, The Big Bang Theory, Two and Half Men, etc) como obras de Teatro.
Una obra teatral requiere de meses, a veces años de preparacion. Se escoge un guión, el cual incluso ha pasado por toda una depuracion, o incluso, ya son obras consumadas de literatura por si solas, como digamos algunas cosas escritas hace tiempo ya por un chavalillo de apellido Shakespeare.

Los mas respetables de los montajes teatrales, requieren todo un proceso para escoger los actores que llenaran los papeles de la obra. Y luego, se lleva a cabo toda la produccion de crear escenarios, como se trabajara la iluminacion, los vestuarios, la musica (si lleva) y tienen ensayo tras ensayo. Son profesionales en cada uno de los campos detras de estas producciones. Gente que toma muy en serio lo que hace, que se preocupa por el resultado de su trabajo y que tiene a parte de experiencia, estudios, carreras, vocacion, en fin, son gente muy preparada y son producciones muy en serio con el enfasis en calidad y en resultados que esten a la altura de los guiones, de las obras que se escogieron para ser puestas en escena.


El publico llega a la espectativa de algo de ese nivel. Paga su tiquete. Se arregla con atuendos para la ocasion. Sacan su propia gala, para honrar el momento. Rien, lloran, aplauden o abuchean, pero al final, es todo una experiencia que gira alrededor de las mejores intenciones que tuvieron todos los involucrados en el espectaculo.

La gente que llena los asientos, van en busca de ser inmersos en una realidad alterna. Por un par de horas, viviran las experiencias de los personajes que interactuan en frente de ellos. Es ficcion. Se sobre entiende que lo es. Y el publico puede discernir y apreciar los matizes y picardias que hicieron de esta obra una realidad llevada mas allá de lo banal, una realidad sublime u oscura, pero para nada ordinaria. Ya sea por el dramatismo, el humor o lo que sea que se planteara como el ambiente emocional alrededor del desemvolvimiento de las escenas, no se relaciona con el diario vivir de los espectadores, pues aun obras on personajes cotidianos, estos siguen teniendo dialogos interesantes, y las situaciones tienen un ritmo y un sentir que hace que al final de la noche, pagar el tiquete valiera la pena.

Ahora bien, talvez comparar los programas tradicionales con obras teatrales, que incluyen cualquier cosa que NO SEA un Reality, sea idealizar ingenuamente mucha programacion que de todas formas no es de buena calidad y muchas veces gira alrededor de solamente el lucro, los ratings faciles y hasta la manipulacon de masas No digo que programas que no sea Realities por defecto seran de calidad y siempre una mejor alternativa. Solo dejenme terminar con mi analogia.

Entonces, las obras de teatro serian mi analogia de lo que es una produccion televisiva que trata de dar una realiad alterna, con guiones, ensayos, escenografias, y mucho mucho trabajo y profesionalismo detras de las producciones. Tienen que ofrecernos algo especial. Pensemos en un show que de todas formas se sabe que es de humor superficial e inofensivo, incluso tonto. Pero que cualquiera tiene que admitir que involucra aparte de mucho talento para cada miembro del equipo, desde actores hasta el mas basico de los puestos, hay mucho trabajo y esfuerzo por cumplir con las espectativas que demandan tanto el publico como los que tienen dinero invertido en el asunto. El show de Friends.

Ahora bien, en mi analogia con qué compararia un Reality?

Seria que en vez de ir al Teatro a ver una obra. Fueramos a un Mall. Y en cada mesa del "Food Court" pusieramos una camara. Para ver de que habla cada familia, cada pareja, cada grupo de amigos o compañeros de trabajo. Que a cada una de estas mesas les hubieran dado escrito en una servilleta, hoy fulanito se va a molestar porque usaron su ipod sin permiso, porque se le comieron una barra de chocolate que tenia guardada o porque lo pusieron a juntar las bandejas de comida de la mesa. Los actores improvisados no son profesionales, nunca estudiaron teatro. Son gente comun y corriente, a veces mas corriente y ORDINARIA que otros. Pero esto funciona perfectamente para cada uno de estos realities.

El efecto MIRON es lo que cuenta aqui. El morbo. El poder espiar en la vida de otras personas. Es como el bajar la velocidad del auto para poder ver a la gente muerta en un horrible accidente automibilistico.

La premisa es, realidades fuera de la nuestra. Poder mirar sin ser afectado. Quemar el tiempo viviendo la vida de otras personas, por mas falsa o superficial que esta sea.

Qué NO se vende en estos programas? Privacidad, respeto, metas, heroes y ejemplos de vida, madurez emocional, ideas, inspiracion, creatividad, humor inteligente, dignidad, discrecion, etc.

Qué SI se vende? Chisme, morbo, inmadurez emocional, anti heroes, superficialidad absoluta, situaciones completamente banales y sin transcendencia, conflicto sin solucion, falta de metas y un norte para la experiencia, etc.

Porque entonces son TAN populares?

Hay mas Realities que cualquier otro tipo de programa hoy en dia. Hay realities para TODO. Desde un concurso de canto a policias y prostitutas. Desde quien es el mas gay de todos, a el que pierda mas peso de un grupo de personas obsenamente obesas.


A veces es que simplemente no hay otra cosa que ver, o sera el hecho de que requiere el menor procesamiento mental y la TV finalmente ha logrado convertir nuestros cerebros en gelatina gris inerte?

Somos ganado vacuno que abre la boca y recibe lo que nos alimenten con miradas perdidas y saliva chorreando hacia el piso.

Ganaron la batallas las televisoras? Simplemente ya no pedimos nada especial? Ahora cualquier imbecil que quiere ser famoso simplemente se filma haciendo estupideces y logra su sueño?






Hace años ya, una pelicula que figuraba a Jim Carrey fue toda un planteamieno profetico de como la gente puede ser consumida por su morbo. The Truman Show.

Antes de que saliera cualquier reality, esta pelicula ya nos avisaba de lo popular que puede llegar a ser simplemente filmar a alguien viviendo su vida con las cotidianidades mas banales, como lavarse los dientes, dormir, etc.


Los primeros avisos de lo que nos esperaba en este presente oscuro del "entretenimiento televisivo, los dieron programas como Survivor con todas sus variaciones y cambios de tematica principal.

Luego vimos ejemplos tropicalizados que incluian a grandes "actrices" de nuestro propio terruño.





(JUA JUA!)







Hoy en dia las televisoras hasta hacen dinero mas directo aun, con nuestros ingenuos envios de mensajes para "decidir" el ganador de importantes competencias que tienen absolutamente NINGUNA trascendencia en nuestras vidas.


Existe un Reality para cada gusto y sabor. Tenemos todo tipo de BASURA de donde escoger. Solo tenemos que decidir, moviendo perezosamente nuestros dedos sobre el control remoto, para escoger el veneno que preferimos esta noche para perder unas cuantas horas mas de nuestra vida.

Mi esperanza es, que como todo en esta vida, llegue a quemar su atractivo o evolucione hacia otra cosa y que se cnvierta simplemente en un embarazoso ejemplo para nuestros hijos de lo que nos llamaba la atencion en la decada del 2000-2010 (que ya ha terminado por cierto).


Dios se apiade de nuestras almas pecadoras y mentes debiles, consumidas por el cancer de los programas de Reality.

HOW TO ALMOST F#©k up your car in ten seconds

It's been a long drive.
You and your wife are hot and sweaty. You both just want to get to your hotel cabin, take a refreshing bath and change to go to the pool or whatever.
You insist on going to take a look at the butterfly farm enclosure at the end of one of the car paths in this forest garden-like cabin area.
You get there, take a look and trying to avoid any brusque comments from a increasingly more uncomfortable partner, who had already pleaded that you go look at the butterfly thingy AFTER you unload your stuff into the cabin and let her get to her bath, you quickly back the car, turning it to the right so you can get back to your cabin and start your weekend holiday in paradise.

Now tell me, do you see anything here? I mean, do you actually see a deep ditch? Something that can fit part of an SUV in it?


Neither did I.
As I'm quickly backing and turning, the car suddenly goes thump. I break.
And here where my stupid gland steps in.
Instead of stepping out and taking a look at just what the thump meant, I assume it's just a small depression, something I can quickly ride back up again (sidewalk height), I try to get the car out, but is skids and doesn't move forward. So more stupid gland fluids to to my brain, and I decide backing up completely is the solution.
This time a harder THUMP!
Now the car won't move backward or forwards.
And here's why:





As you can see, perfectly wedged! My biggest concern as I cursed at how stupid I had been was that the weight of almost all he car was resting on the front right tire axle!
I had always thought that the hydraulic jack with capacity for 4 tons was maybe a bit too much. I did take up almost half of the back storage space in my Grand Vitara. This car is heavy (for a small SUV), almost 2 tons, but a 4 ton jack maybe was a bit too much (I thought).
Well, THANK GOD I had that jack! I put a small log under it, and with the help of some of the gardeners from the hotel, we where able to get the car out in less than 15 minutes. We used other logs to create a ramp for the car, and there is no damage anywhere.
One thing I was really lucky with, was that the rear, even though it wedged tightly on the depression, only did so on the right side. If it had done so on the left side, the exhaust would have been compromised. Also, that the car wedged exactly into the ditch, avoided it having moved farther back and then the front fender (plastic) would have been torn off... lucky, lucky, lucky, even if STUPID!

My wife and I got on with our weekend holiday, and I injured my knee (ACL) again in the Ultimate Frisbee tournament (I probably won't play Ultimate anymore - sigh), but that, is another story :)

Defensoria del Consumidor? Comision del consumidor? La verdad, en Costa Rica: NO ESTAMOS PROTEGIDOS!

A mediados del año pasado (2009), mi televisor una vez mas sufrio las consecuencias de una sobrecarga debido a una tormenta con relámpagos. Simplemente estaba muerto.

Siendo de una marca que ya no tiene soporte en el pais (Panasonic), y ya conociendo la historia de que a practicamente todos los talleres de reparacion donde lo llevase seria rechazado vehementement por los tecnicos o dueños, recurri al taller que ya me habia cumplido una vez con un servicio que me dejó satisfecho y contento. TELE RAPIDO (recuerden ese nombre! Estan en las paginas amarillas por DIOS, y siguen ahi, pese a lo que les voy a contar, que no es historia unica).
El televisor era un CRT (cajon grandote), pero de los ultimos de esa generacion antes de la llegada del plasma y el LCD y todo lo que les ha seguido a esas tecnologias. De pantalla plana, o sea, no delgado, pero digital y de pantalla sin la tipica curva de televisores mas viejos. Comprado en Pricesmart, a muy buen precio. Un buen televisor.

La primera vez que recurri a TELE RAPIDO (recuerden el nombre!), como dije, quede feliz. Llegan por el aparato hasta la casa en su carrito, se lo llevan, lo arreglan y lo vuelven a ir a dejar al domicilio. Super, pensaran, bueno, asi fue LA PRIMERA VEZ, con TELE RAPIDO (recuerden el nombre!).

La segunda vez cambiaron las cosas.

Llegaron por la TV. Eso fue igual. Me dijeron del daño que resulto ser exactamente el mismo del año anterior y por el mismo precio! Wow! me dije en el momento, han mantenido la tarifa!..
Bueno, me dijeron que en un par de semanas me devolverian el aparato reparado.
PERFECTO!

Pasaron las dos semanas, el dia que tenian programado llegar ese Sabado, no llegaron y no llamaron. Me molestó un poco, porque hice mis planes alrededor de la hora de visita y nisiquiera tuvieron la decencia de llamar. En fin, a veces pasan imprevistos y en todo caso, al llamar me dijeron que tuvieron una situacion con un repuesto y que seria el siguiente Sabado.
El siguiente Sabado, no aparecian, asi que decidi llamar. Me atendieron y me dijeron que habia un problema con un repuesto que hasta ese dia consiguieron y que seria la semana siguiente.
La semana siguiente decidi no esperar hasta el sabado para llamar, lo hice y me dijeron que ya el repuesto estaba, que estaban terminando el televisor y que me lo tendrian para el Sabado.
Perfecto, problema resuelto pense.

El Sabado llego y se fue la hora de entrega, y esta vez, nadie me respondia en TELE RAPIDO (recuerden el nombre!).
Muy molesto llame el Lunes siguiente, me atendieron y me dijeron que habia un problema con un repuesto. Ahi exploté. "Cómo?!!" pregunte en tono alto "pero si me dijeron que ya lo estaban terminando ya a mediados de la semana pasada y que me lo entregaban el Sabado!!"
"Lo siento señor, no está el técnico, si quiere cuando vuelva le digo que le devuelva la llamada..." Como pueden suponer, aqui empieza el jueguito de perseguir a algun responsable que me de respuesta y el que le den a uno siempre ese tipo de respuestas.

Cada vez que lograba localizar al "técnico" que en realidad es el DUEÑO de TELE RAPIDO (recuerden ese nombre!) me explicaba que era una parte dificil de conseguir, o me decia que ya la tenia, o me aseguraba que ese siguiente Sabado yo ya tendria mi TV en casa.

Me harté (como es lógico) y simplemente les dije.
"YA NO ME LO ARREGLEN! SOLO DEVUELVANMELO!"
Quedaron de dejarmelo el siguiente Sabado...

Saben que sucedió?
NUNCA LLEGARON.

Entonces ya caimos en la siguiente parte: Voy por mi TV, y como sé si me llevo lo mismo que se llevaron de mi casa? (que no le falten partes, si de todas formas no encendia antes, asi que no tengo forma de probar nada) o los demando?

Colerones, gasto de celular, etc. Ya no valia la pena seguir. Decidi recurrir a la Defensoria del Consumidor.

SORPRESA!!

Para los que no lo sepan. La Defensoria del Consumidor, la entidad publica de la que escuchamos hablar, en realidad existe solo para resolver casos relacionados unica y exclusivamente con los SERVICIOS PUBLICOS. En otras palabras, AyA, CNFL, ICE, etc.
No le atañe cubrir situaciones entre consumidores y cualquier empresa privada.

Para eso existe otra entidad, la Comision Nacional del Consumidor, de un caracter que aun no entiendo si es gubernamental o no. Su sitio http://www.consumo.go.cr/ tiene el go.cr al final, uno asume entonces que SI es gubernamental.
Pero veamos cómo funciona la Comision del Consumidor, y qué cubre realmente su servicio:

Dentro de un maximo de 30 dias habiles del momento de inclumplir un proveedor con su contrato, uno debe poner la denuncia (http://www.consumo.go.cr/denuncia/ComoPlantearDenuncia.html). Perfecto, entonces uno pone la denuncia, provee los documentos y pruebas necesarias y le arreglan a uno la cosa?
Bueno...
La Comision Nacional del Consumidor en realidad lo que hace es de MEDIADOR.
Qué significa eso? Bueno, invita y motiva a ambas partes a llegar a una conciliacion. Un final "feliz" para ambas partes. En otras palabras, lo mas que iba a hacer la Comision Nacional del Consumidor era pedirle a TELE RAPIDO (recuerden ese PUTO NOMBRE!) que me reparara el televisor y me COBRARA lo que correspondia y que yo pagase y aceptara mi TV reparado! (pinche solucion!) o que se me devolviera la TV en el estado que estaba cuando la recogieron.
Yo poseia mi papelito de recibido por parte de TELE RAPIDO (ya saben...) como prueba, pero no tenia (y cómo iba a tenerla?) una lista exacta de TODAS las partes del TV. Asi que incluso en esa situacion TELE RAPIDO (AAARRRGGGHH!!!) podria salirse con la suya, y el técnico/dueño podria siempre usar mi TV de fuente de repuestos antes de devolverme un televisor que aun no funcionaria de todas formas.
Pregunté sobre la posibilidad de que incluso no me devolvieran el televisor, que sucederia entonces?
Me explicaron muy amablemente en la Comision Nacional del Consumidor, que en ese momento debia conseguirme un abogado y entablarle una demanda entonces a TELE RAPIDO por incumplimento de contrato.

Pausa con boca abierta.

JAJAJAJAJAJAJAAAAAAAAAAAAA!!!!

Mis disculpas por lo siguiente:

ENTONCES PARA QUE PUTAS HACER TODAS LAS VUELTAS CON LA MIERDA DE LA COMISION NACIONAL DEL CONSUMIDOR!!!!!??????????

Para NADA, sencilla y claramente.

Y Uds diran, talvez caso aislado con TELE RAPIDO?

En el mismo recidencial donde vivo en Heredia, un vecino habia entregado su SAMSUNG (CASI NUEVO) y paso por EXACTAMENTE LO MISMO!!! SI, con TELE RAPIDO!!! (ya se lo aprendieron el puto nombre?)

Mi vecino fue mas "cabezon" y siguio todo el proceso. Ahi esta todavia, y me ha pedido que le haga de testigo cuando por fin TELE RAPIDO inclumpla, como es obvio que va a hacer segun lo que me cuenta el vecino. Y la verdad, ni eso quiero hacer.
Le hice caso a mi esposa y usé lo que me hubiese costado el arreglo de aquel tele, se lo adjunte a otros dineros, y me compre un LCD nuevo en el Hypermas.
Eso lo hice cuando decidi no seguir perdiendo el tiempo y comiendome las paredes internas de mi estomago con acido de la bilis, practicamente la misma semana que supe como funciona realmente la Comision Nacional del Consumidor y lo que cubre.

Porque seamos realistas, si yo decidiera pasar por todo eso y luego incluso ir a juicio. Cualquiera que conozca las leyes de este pais, sabe que es un caso perdido.
Las leyes de este pais, protegen a este tipo de personas. Aqui nadie va a la carcel por negligencia, deudas o incumpliento de contratos.
Hay todo tipo de salidas y triquiñuelas.

EN COSTA RICA NO TENEMOS PROTECCION!

ME RIO DE JANEIRO

I just started a new blog for a comic strip with a character called Janeiro. It's called Me Rio de Janeiro. A word play with the name of the famous beach spot in Brazil, that translates as: I laugh at Janeiro. Janeiro is the average Tico (Costarican) and the experiences I put him through are the sometimes ridiculous and outrageously stupid things that happen in my country, regarding public services, laws, taxes, etc.

In spanish, sorry. From a Tico for Ticos:

ME RIO DE JANEIRO

Tutorial maquetacion sitio web (css) Parte 2

Antes de empezar quisiera invitarlos a que analizen si vale la pena pensar en sitios optimizados para buscadores (SEO) utilizando CSS (hojas de estilo) para darle apariencia a su sitio web.
Tomemos como ejemplo mi propio sitio personal: oscarblanco.net

Abran una ventana adicional, y en google.com prueben estas combinaciones de palabras clave:


"3d design illustration"
"illustration costa rica"
"illustrator costa rica"
"freelance illustrator costa rica"
"3d character design"
"3d costa rica"
"3d design costa rica"
"caricature portrait" salgo mejor en busqueda de imagenes que texto, pero igual no salgo tan mal
"corporate image design"
"promotional design"
"print press design"
"traditional illustration"
"object 3d renders"
"water splash photography"
"digital illustration costa rica"
"landscape photo costa rica"
"3d animation costa rica" tomemos en cuenta que yo no me dedico a eso y tengo pocos ejemplos de las cosas tan sencillas que he hecho.
"3d multimedia cd"
"multimedia costa rica"
"flash design costa rica" jajajaja y yo que ni action script sé!



No es por hecharme flores... pero si, me estoy hechando flores. Vieron el ranqueo de oscarblanco.net? En algunos casos está bastante bien! en otros decente :)

Ahora si, a la segunda parte del tutorial. Como resultado final de este ejercicio tendremos esta página:

RESULTADO FINAL DEL EJERCICIO

Hechenle un vistazo desnudando el html de su hoja de estilos usando el sistema que les mostré en el tutorial anterior.

Verán un contenido "chorreado", constituido de h's, listas y texto en párrafos.

Vean el source de la página también.

Veran un source limpio y sencillo.

Bien, empezemos.
Lo primero que necesitan es el "kit" para trabajar este sitio.

Bajenlo AQUI

En el kit encontraran un html llamado "menu.htm" una hoja de estilos llamada "principal.css" y una carpeta llamada "images" que contiene todas las imagenes usadas para este tutorial.

Descompriman en alguna carpeta y estamos listos para empezar a configurar el css. Verán que "principal.css" en este momento solo contiene las clases y ID's ya establecidas pero sin parámetros.
Entonces el html, que ya tiene adjuntada esa hoja de estilos en realidad no despliega nadamas que el texto desnudo. Tal y como lo va a leer cualquier buscador como google, altavista o yahoo.

De ahora en adelante no vamos a tocar mas que la hoja de estilos, el html ya está con sus objetos definidos y las imágenes estan recortadas y a tamaño. Sin embargo tambien los invito a que hechen un vistazo a la carpeta de imágenes. Contiene dos imágenes verticales delgadas, que se repiten horizontalmente para fondos. una imagen grande que es meramente decorativa, un logo y un par de imágenes para el area de menú.

Viendo el source del htm en detalle observaran que existe una estructura de jerarquias, igual que encontrariamos en una de tablas con sus td's y tr's. Tenemos un DIV principal que se llama "alrededor", ese es solo un contenedor que nos ayuda a flotar todo el contenido centrado, por el tipo de diseño que escogí, pero casi siempre es bueno trabajar con contenedores principales y sus respectivos nested div's, o div's encajados. En realidad este div llamado "alrededor" fué un agregado extra que metí a última hora tan solo para poder acomodar la foto grande que flota a la derecha del diseño y que uds pueden ver se encuentra al puro final del html, inclusive despues de un texto que visualmente se encuentra luego de ella. Esto es simplemente porque siempre debemos buscar que el texto/contenido de nuestro html, sobre todo aquello es está cargado de palabras clave se encuentre antes que cualquier imagen, flash u otro elemento gráfico que cumple mera función decorativa y no ayuda a nuestro sitio con su SEO (ya antes expliqué que es esto).

Como decia, el DIV "alrededor" fué algo agregado a última hora por el capricho estético de poner esa imagen. El DIV llamado "principal" era el contenedor principal, y el cual tenia todas las características para determinar el área principal de información. De una vez aclaro la diferencia entre un ID y una Clase:

ID's son usados más que todo para elementos únicos en la página, esto ayuda mucho si lo combinamos con programación, ya que los ID"s son utilizados por los programadores precisamente porque son nombres únicos y así se puede dar comportamiento a un objeto específico (como por ej. variables). Las clases en cambio son utilizadas más para elementos que se repiten varias veces en una página, por ejemplo, una clase para todos los anchors (links) de una página o sección determinada.

Si ya estan usando TopStyle (lo mencioné en la parte 1, y donde bajarlo) para abrir la hoja de estilos notaran en la lista de clases a la izquierda que existen tres categorias principales, clases, ID's y otra llamada elementos. Ahi en este caso solo estan "body" y un "*". Elementos son componentes o tags que por si solos ya existen como parte de la marquetación básica de un html. Ahí también caerian los h's, pero como notaran, los h's que he usado en este caso, estan subordinados a ID's.

A qué me refiero con subordinados?. Una clase, ID o elemento, pueden tener subclases subordinadas. Esta es una de las caracteristicas que da tanta flexibilidad a la marquetación por hojas de estilos. Tambien se pueden tener varias clases asignadas a un elemento (yo las llamo "clases hermanas"), por ejemplo hacer una clase que determina tamaño, ubicacion, tipo de fuente y otra que solo modifica color. Si cambio la que solo modifica color por otra con las mismas caracteristicas, nadamas que asignando un color diferente, no tengo que crear toda una clase que con cada uno de los parametros de despliegue que se repetiria para cada elemento que la utilize. Serian mas como clases modulares, que armo y desarmo a placer.

Un ejemplo en el html seria:
<div class="menu big">HOME</div><div class="menu small">ABOUT US</div>

Como ven, varia la segunda clase "hermana", y a esa le asignariamos talvez solo que cambie el tamaño de la letra. La que se llama "menu" tendria todas las demas caracteristicas.

Mi sistema de preferencia viene siendo parecido, solo que se logra por subordinacion. O sea, un contenedor madre tiene la clase (o ID) que determina las caracteristicas generales) y un contenedor anidado (subordinado) tiene a su vez una clase que por su posicion tambien es subordinada y solo maneja caracteristicas puntuales. Veamos un ejemplo de clases subordinadas en html:


<div ID="principal">
<div class="rojo">
HOME
</div>
<div class="rojo">
ABOUT US
</div>
<ul>
<li><a href="http://www.randomsite.com/">ITEM 1</a></li>
<li><a href="http://www.somethingelse.com/">ITEM 2</a></li>
<li><a href="http://www.whatever.com/">ITEM 3</a></li>
</ul>
</div>



En este caso las clases "rojo" y "azul" estarian subordinadas a "principal", asi mismo elementos propios de html como las listas no-ordenadas "ul", los elementos lista de estas listas "li" e incluso los anchors (links) tambien funcionan como clases subordinadas.
Entonces en una hoja de estilos puedo incluso darle caracteristicas diferentes a estas clases si estan subordinadas o independientes de una clase o ID superior.
O sea, por ejemplo, puedo decirle a la hoja de estilos que cuando un elemento lista "li" este debajo de "principal" tenga unas caracteristicas, pero cuando no es subordinada de este ID, que tenga otras. Igualmente lo puedo hacer con anchors (liks).


Por ejemplo uds veran en la página que hay varios estilos de "hover" o sea, comportamiento de un hipervínculo al tener el puntero del ratón encima.

Si se fijan en la hoja de estilo (principal.css), veran que hay varios "a" y "a:hover" subordinados a ID's (los estilos que empiezan con un simbolo de "#") en este caso.

Verán que el ID "arriba" o el ID "medio" se repiten varias veces con subclases a su lado: ul's li's p's e inclusive veran hasta un "a" "a:hover" y "strong" subordinados a su vez a una subclase.

Debo mencionar que una ventaja que yo veo sobre usar clases hermanas (las que

O sea, hay un "strong" "subordinado" a un p del ID "medio".

A ver a ver.. respiren, cuenten a 3 y vuelvan a leer hasta acá otra vez jeje. Y si mi forma de explicar es muy confusa espero perdonen, pero trato de irme mucho al detalle y esto tiene muchos detalles.

Ok, listos? seguimos...

Es importante tener mucho cuidado a la hora de trabajar estilos, en la medida de lo posible, eviten las mayúsculas, revisen siempre que los nombres tengan al principio su identificador si lo necesitan: "#" y "." para ID's y clases respectivamente.
Nunca olviden el punto y coma al final de cada parámetro.
Nunca olviden cerrar llaves para cada estilo.
Si es necesario comentar alguna linea o varias lineas abran el comentario con: /* y cierrenlo con */
Comentar es una buena forma de desactivar un parámetro sin tener que borrarlo.
A veces por un pequeño descuido podemos pasar horas golpeandonos la cabeza porque algo no funciona cuando deberia hacerlo... recuerden, creando hojas de estilo y teniendo un adecuado desarrollo de html's más limpios (o sea, no generados automáticamente por Image Ready o algo parecido) nos parecemos más al proceso que siguen los programadores. Por consiguiente, debemos ser mas cuidadosos y ordenados, para evitar "pulgas" en nuestro código.

Otra cosa que hay que tratar de hacer es evitar redundancias en nuestras hojas de estilo, o repeticiones innecesarias de parámetros en varias clases aplicados a DIV's "hermanos", pues cada linea de parametros en nuestra hojas de estilos es una línea más de código que debe leer el buscador cuando indexa una página. Las hojas de estilos tienen la ventaja de centralizar despliegue de imágenes, para evitar que cada vez que se abre una página el explorador tenga que volver a cargarlas desde el html, sinembargo, las hojas de estilo tambien deben ser optimizadas, ya que muchas lineas de codigo hacen un documento lento de leer y pesado.
Una buena forma de evitar esto es tratar de descomponer el despliegue total en jerarquias y grupos. O sea, van a existir DIV's "padres" y estos tendran sus propios DIV's "hijos". Esto lo que significa es que tendremos DIV's contenidos dentro de otros DIV's (como ya vimos en el html), y los DIV's que a nivel de jerarquia se encuentren al mismo nivel, seran "hermanos". Hablo en este momento de DIV's pero en realidad a lo que me refiero es contenedores, los cuales tambien pueden ser SPAN's, H's, anchors, p's, li's, etc.
Una vez que hemos determinado esta jerarquización, entonces empezamos a analizar qué parámetros pueden heredarse de "padres" a "hijos".
Por ejemplo, en el BODY, que podriamos considerar el elemento "padre" para todos los contenedores de nuestra página, podemos colocar parámetros que vamos a heredar en todo el sitio, como por ej. la familia de fuentes, el tamaño default que queremos usar para fuentes, el alineamiento de texto, el color de texto, etc.
Hay parámetros que no se pueden heredar y otros que si. Por ejemplo, padding y margin, no son heredables, pero existe un "hack" para tambien poder generalizar este tipo de parámetros.
Creamos un estilo llamado "*". Al usar un asterisco como nombre para un estilo, el explorador va a entender que por defecto a CUALQUIER estilo los parámetros que determinemos en la clase "asterisco" serán aplicados como suyos, esto se vuelve nulo al poner un parámetro específico en ese estilo único.

Veamos:


* {
margin: 0;
padding: 0;
}

.vaca {
color: #ff00ff;
margin: 2px 3px 1px 2px;
}



En este caso, "asterisco" esta diciendo que todos los estilos por defecto tendran un margen de cero y un alcochonamiento de cero (esto es una buena práctica por cierto), pero a su vez, "vaca" como estilo único que es, aparte de determinar un color único para textos dentro del contenedor que tengan la clase "vaca" aplicada, tambien tiene características únicas de márgenes, sinembargo, como no ha determinado sus parámetros de padding, va a tener por defecto los que ha pre-determinado "asterisco" (margin = espacio alrededor de un contenedor, padding = espacio marginal de contenido a los bordes de su contenedor).
Otra cosa que aprovecho para mencionar, relacionado con optimización de estilos, es que en la medida de lo posible se use el "shorthand" (abreviacion de parámetros en una sola línea).

Veamos:


.vaca {
margin-top: 2px;
margin-right: 4px;
margin-bottom: 3px;
margin-left: 5px;
border-width: 2px;
border-color: #BC6A47;
border-style: solid;
}

podría optimizarse así:

.vaca {
margin: 2px 4px 3px 5px;
border: 2px #BC6A47 solid;
}



Al usar shorthand en el parámetro margin por ejemplo es importante saber que el orden en que los pongamos es escencial, el primero es el margen superior, le sigue el derecho, luego el de abajo y por ultimo el izquierdo, o sea, empezando del de arriba se sigue a favor de relog, así:



En el caso del borde, el orden en que determinemos grosor, color y estilo no es importante. Si quisieramos un borde con grosores varibles, entonces tendriamos que hacer un parámetro por aparte para "border-width" y podemos usar un shorthand igual al de "margin" siguiendo las manecillas del relog, lo mismo va para el "padding".

Para más información de shorthand en estilos, les invito a hacer un googleazo.

Bien. Empezemos a llenar la hoja de estilos. A estilo asterisco, vamos a ponerle padding y margin de cero. Así:


* {
margin: 0;
padding: 0;
}



Por cierto, "0" equivale a cero de cualquier tipo de medida, sean pixels u otro, por eso un shorthand se puede ver así: margin: 1px 0 1px 0;
Inclusive, si luego del primer valor todos son iguales, digamos, todos de cero, entoces se podría ver así: margin: 3px 0; Aquí estamos diciendo que los márgenes de derecha, abajo e izquierda todos tienen un valor de cero.

Bien, como ya vimos antes, al poner estos valores para margin y padding en "asterisco" hemos pre-determinado que todos los estilos tendran padding y margin de cero por defecto.

Ok ok... un respiro, cuenten a 3 y vuelvan a leer lo que tengan que re-leer. Los espero.
Listos? Ok, seguimos.

En orden de jerarquía, vamos al estilo para el BODY.


body {
background-color: #AE491D;
background-image: url(images/fondo-principal.jpg);
background-position: top;
background-repeat: repeat-x;
color: #646464;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
text-align: center;
}



Veamos, traduciendo dice esto:

color de fondo: #AE491D.
Imagen de fondo: fondo-principal.jpg (incluyendo su "path").
La posicion de la imagen de fondo es "arriba".
La imagen de fondo se repite en "x" ("x" y "y", ejes.. etc, eso ya lo deben saber).
El color usado por el texto es: #646464;
La familia de tipografias es: Arial, con equivalencias a Helvetica y es san-serif (tambien deben saberlo).
El tamaño de las tipos por defecto es de 12px;
El alto de este estilo es de 100% del área visible del buscador.
El alineamiento por defecto del texto será centrado (esto incluye objetos flotantes como DIV's).

Bien, asignen este estilo a su BODY, guarden y ahora refresquen la página en su buscador. Ya va tomando forma, aunque hay muchas cosas tiradas por todo lado

Seguimos con el DIV padre de todos. El que tiene el ID llamado "alrededor".
Este es el que nos va a permitir que el rectángulo de este diseño de página flote siempre al centro del área visible de nuestro buscador. Ah, un detalle importante. Cross-browser... han escuchado esa fatídica palabra compuesta antes? Significa, mi página será vista por la mayor cantida posible de buscadores (Internet Explorer, Firefox, Netscape, etc) y plataformas y los usuarios veran exactamente lo mismo o al menos casi la misma cosa. Para garantizarse esto, es bueno que se acostumbre a trabajar con el firefox como buscador por defecto, y el internet explorer como secundario (esto es solo un consejo a nivel personal).
Existen "hacks" para solventar esto, pero para eso tambien los invito a usar google

Bien, veamos el estilo "alrededor":


#alrededor {
height: 545px;
margin: 10px auto;
width: 720px;
float: left;
}



Traducción:

Altura del contenedor es de 545 pixels.
Márgenes alrededor del contenedor: 10pixels arriba, y el resto automático. Aquí tenemos un "hack" pero es para el firefox en este caso, si no ponemos el auto como segundo valor, nuestro div no le va a dar la gana de flotar centrado.
Tiene un ancho de 720 pixels.
Y por último este contendor va a flotar a la izquierda. O sea, si tuviesemos por ejemplo 10 contenedores de 100 pixels de ancho cada uno, todos con float:left, todos se acomodarian lado a lado flotando hacia la izquierda. (imaginense que inclinan el monitor hacia la izquierda y todos esos divs caen en esa direccion lado a lado).


Ahora vamos con el ID "principal"


#principal {
background-image: url(images/fondo-areachica.jpg);
background-position: top;
background-repeat: repeat-x;
border: 1px #FFFFFF solid;
height: 545px;
width: 720px;
}



Todos los parámetros acá ya los hemos cubierto antes, solo cambian medidas y colores...

Sigamos para abajo en la jerarquía, existen tres divs hermanos: Arriba, Medio y Abajo. Los he nombrado así debido a que como cualquiera que había trabajado en su obscuro pasado con frames, me ha quedado esa costumbre de nombrar así para dividir páginas... aunque pensandolo bien, es lógico ese uso de nombres no les parece?

Veamos "arriba" en el html, este DIV contiene un h1, un h2, un h3 y una lista ordenada (ul, li's). Aquí tenemos oportunidad de heredar si fuera el caso de el div contenedor a todos sus sub-elementos.
En este ejemplo sinembargo, no lo hice.

Observemos "arriba" con todas sus subclases de una vez (tomense su tiempo):


#arriba h1 {
color: #A80506;
float: left;
font-size: 34px;
font-weight: normal;
height: 29px;
left: 37px;
letter-spacing: -3px;
line-height: 26px;
position: relative;
text-align: left;
text-transform: uppercase;
top: 3px;
width: 340px;
}

#arriba h1 strong {
color: #A30468;
}

#arriba h2 {
background-image: url(images/logotipo.jpg);
color: #494846;
float: left;
font-size: 4px;
height: 41px;
left: 74px;
position: relative;
top: 5px;
width: 265px;
}

#arriba h3 {
clear: both;
color: #807C7D;
float: left;
font-size: 22px;
font-weight: normal;
height: 22px;
left: 37px;
letter-spacing: 6px;
line-height: 18px;
margin: -12px 0;
position: relative;
text-align: left;
width: 340px;
}

#arriba li {
display: block;
float: left;
height: 25px;
width: 144px;
}

#arriba li a{
color: #403F3D;
display: block;
float: left;
height: 27px;
letter-spacing: 2px;
padding: 6px 0;
text-decoration: none;
width: 144px;
}

#arriba li a:hover {
background-image: url(images/menu-on.jpg);
background-repeat: repeat-x;
color: #FFFFFF;
display: block;
}

#arriba ul{
background-image: url(images/menu-off.jpg);
background-repeat: repeat-x;
clear: both;
display: block;
float: left;
height: 28px;
position: relative;
top: 12px;
width: 720px;
}



Traduzcamos los parámetros que aún no hemos visto.

En #arriba h1 vera aparte de cosas obvias como tamaño de letra y estilo de letra (normal), un parámetro llamado "position" (position: relative;). Este parámetro permite que el contenedor que ya le dimos características de flotabilidad (float:left) además pueda posicionarse en un lugar específico. Posición relativa significa que estará relativa a los margenes superior e izquierdo de su contenedor padre. O sea, h1 se posicionará relativo con las medidas de "left" y "top" (left: 37px; top: 3px;) definiendo a cuanto se encuentra h1 de los márgenes superior y izquierdo de "arriba".
Otros parámetros nuevos que tenemos acá son "text-transform: uppercase;" que en este caso convierten todo el texto en mayúsculas y "letter-spacing: -3px;" que en este caso aplica una distancia de -3 pixels entre cada letra.(por eso se ven todas pegaditas).

Podemos ver que al STRONG del h1 (el estilo que sigue) le aplicamos otro color, por eso la palabra "titular" tiene otro tono. Fijense en el html, ni h1 ni strong tienen clases ni ID's aplicados, esto es porque sus propios nombres de elemento son subclases del ID llamado "arriba"

Lo mismo sucede con los otros h's y con la lista ordenada.

Pueden bajar ya la hoja de estilos llena de AQUI.

Otros parámetros nuevos que pueden buscar ahí son "display" y "text-decoration".
El primero lo uso para cuando quiero que un link se trate como un objeto que puede tener alto y ancho.
Por ejemplo los links dentro de los li's de la lista ordenada (fijense). "text-decoration: none;" es la forma de eliminar la rayita abajo para un link.

Creo que con la información que les he suministrado pueden hacer ingenieria inversa de la página ejemplo y su respectiva hoja de estilos. De hecho creo que es la mejor forma que aprendan como funciona todo esto.
En todo caso posteen preguntas aquí, y de esa forma se volverá más completo el tutorial.

Espero que todo esto les sirva.

Tutorial maquetacion sitio web (css) Parte 1

I apollogize to all english speaking readers.
I haven't translated this tutorial yet, so for now, here's the original version in Spanish.


Existen muchas fuentes en el web para buscar información de cómo montar una marquetación basada en CSS (Cascading Style Sheets) que es la más eficiente forma de hacerlo ya que la estructura del sitio se monta en base al contenido textual del mismo, o sea, se centra alrededor de la información. Esto a su vez dá la mejor estructura posible para que los logaritmos de análisis de las herramientas de búsqueda (entiendase google.com, yahoo.com, altavista.com, etc) de un sitio web y su subsecuente indexado a estas mismas herramientas de búsqueda sea lo mas efectivo.

Traduciendo: que nuestro sitio aparezca dentro de los primeros 100 resultados, si lo hicimos muy pero muy bien (incluyendo otras triquiñuelas de elementos a colocar dentro del sitio) dentro de los primeros 10 resultados.

Existen incluso machotes (templates) con los que se puede trabajar una estructura ya hecha, aplicaciones que montan hojas de estilo automatizadas e incluso opciones en linea como Wordpress para montar sitios tipo BLOG en forma rapida y eficiente.

Este tutorial va a retomar un html desde su estructura más básica, re-entendiendo elementos que la mayor parte de los diseñadores que montan sitios usando aplicaciones como dreamweaver nunca se preocupan por utilizar adecuadamente. Dejemonos de tapujos, la mayor parte de los diseñadores, si no tienen ya una escuela en el buen desarrollo de sitios, no enfrentan tales sitios como lo que son: APLICACIONES WEB (incluso los mas estáticos de los sitios - para los no conocedores, estático significa: que no tiene bases de datos, actualizaciones automáticas, registro de usuarios, carrito de compras, etc).
Su forma de trabajar en tales sitios se limita a un diseño en Photoshop o Fireworks, el cual una vez que sale del proceso de creación conceptual gráfica y estética es recortado de la forma menos complicada (pero definitivamente no la mas eficiente), dandose libertades con el uso de imágenes en lugar de texto para poder trabajar con fuentes que no sean las standard utilizadas por navegadores.

Tales textos normalmente son los titulares y botones de menu de sus sitios y estos a su vez son casi siempre palabras claves que podriamos estarle alimentando a una herramienta de búsqueda para el indexado de nuestro sitio. En otras palabras, digamos que nuestro sitio es de para una compañia que vende lacteos. Los botones de menú y submenus pueden decir:


•Leche / Descremada / etc
•Quesos / Queso Amarillo / etc
•Ganado Vacuno / etc
•Etc



Y los titulares de la página principal y subpáginas a su vez también pueden contener un sin número de palabras clave adicionales...
Entonces para qué usar imágenes en vez de texto?
Creanme el famoso "ALT" (texto alternativo para imágenes) es por mucho secundario al texto presente tal cual dentro del html.
Pero esto significa que nuestras páginas tienen que ser aburridas, siempre con las mismas tipografias dentro del html?
NO!
El uso de CSS para marquetación nos permite jugar con eso, y al final siempre desplegar imágenes como la opción visual para un texto presente dentro del html.

Pero qué otras ventajas tiene la marquetación con CSS además de la tan importante colocación dentro de las herramientas de búsqueda (que es de lo que MAS le importa a nuestros clientes, pues si no apareces en una búsqueda, nadie visita tu sitio de todas formas, por mas LINDO que esté )

Otra ventaja es la facilidad de integración de elementos en una forma completamente controlable dentro del despliegue de nuestro html. Para aquellos que han usado los famosos "layers", les aviso que esto se basa en el mismo principio de colocación absoluta o relativa que se trabaja en CSS.

Tambien podemos tener texto con scroll, recurso que se resuelve erroneamente con iframes o frames comunes. Texto dentro de un frame, es texto NO leido por una herramienta de búsqueda, ya que está en OTRA página. De hecho, de una vez entiendan aquellos que aún no lo saben: El uso de frames para contruir un sitio es la peor práctica que pueden tener (preguntenle a cualquier programador o alguien involucrado en seguridad de un sitio).

La actualización de un sitio en CSS es también muy eficiente.. pero eso lo verán cuando esten metidos de lleno en la práctica, ya que al inicio, como cualquier cosa que involucre una curva de aprendizaje, nos parecerá tedioso y lento. Con el tiempo se vuelve algo completamente natural y bastante rápido.

Hay muchas más ventajas, pero dejaré que uds mismos las vayan descubriendo, ya que este tutorial no es para venderles una idea, sino para mostrarles como empezar a hacerlo.

Primero que todo, aquellos que ya saben hacer sitios usando dreamweaver y conocen un poquito de html, pero aun ven CSS solo como un medio para dar algunas características a un texto, quitense su sombrero de expertos por favor y sientense al lado de los novatos que nunca han hecho un sitio, porque vamos a trabajar a la vaca de los huesos para afuera y no al revés que es como siempre lo han hecho.
O sea, uds primero diseñan el aspecto y luego meten el contenido.
Acá vamos primero a pensar en el relleno (contenido) y luego decoramos el pastel como quien dice.

Con css, hay que ser mas cerebrales. Planear mejor. Visualizar todo, no solo como se ve, sino cómo funciona. Esto solo puede darnos mejores prácticas de trabajo, no creen?

No mal entiendan, no es que vamos a ciegas al asunto, sin diseñar nada.
Igual, primero se diseña, tomando en cuenta eso si, el haber tomado nota primero de cuales son las palabras clave que queremos trabajar y haberlas integrado en nuestra propuesta grafica en menus, titulares, etc.
Y a la hora de montar el sitio, NO "partimos" el photoshop, más bien montamos el html desnudo, dejando todos los elementos necesarios para empezar a asignar apariencia a estos mismos elementos. Luego los recortes que hagamos en PS seran puramente para tener imagenes lo mas reducidas posibles para integrarlas por medio de las hojas de estilo, no dentro del html.
Estamos armando un sitio en base a su CONTENIDO. Esto es una práctica que se conoce como SEO (Search Engine Optimization), bueno, al menos es parte de la misma. El contenido de todas formas YA tiene que haber sido optimizado, y esto requiere otras cosas como medir factibilidad de palabras claves y otras cosas que tampoco vamos a ver en este tutorial y muchas veces es mejor dejarselo de todas formas a los expertos en el tema.

Para aquellos que se estan mordiendo los dedos y viendome con ojos de desprecio pensando "pero este tipo me esta diciendo que mi sitio ya no puede ser hermoso porque lo que mas importa es el texto??" "donde queda la estética? Me voy a convertir en un programador?" les invito que tomen un descanso de este largo bloque de texto y visiten sitios como:



www.cssdrive.com

www.csselite.com

www.cssheroes.com

www.bestcssgallery.com

www.css-website.com

www.divinecss.com

www.webcreme.com

www.cssbeauty.com



Adelante, los espero.. jeje

Estan de vuelta? Vieron??? Bello verdad? y no solo eso, EFICIENTE!
Pero que hay diferente?? Bueno, pueden primero ver el source de las páginas, y en vez de los siempre presentes TABLE, TD, TR de los sitios montados a la antigua, veran muchos DIV's, SPAN's, H's y otros elementos.
Pero qué significa esto???
Bueno, veran que dentro de esos tags de DIV's y demás aparecen classes y ID's. Por ejemplo:

<div class="vaca">algun texto</div>

Esa clase llamada vaca, es el estilo que dice las caracteríticas del div. O sea, su tamaño, sus colores, imágenes que contiene, su posición, el tipo de letra que contiene, el color de la misma, o de esta cuando es un link, etc, etc.

La lista completa de clases, ID's y elementos (BODY, H's, STRONG, etc) usados se llama una hoja de estilos. Una pagina html puede llamar varias hojas de estilo, los estilos los podemos subdividir en varias hojas de estilo (vacas.css, quesos.css, etc) para asi no forzar al buscador que lea TODOS nuestros estilos cada vez que abre una página, cuando solo va a ocupar unos cuantos. Aprovecho tambien para recalcar NO USEN ESTILOS LOCALES!
Estilos locales? Si, son los estilos que estan propiamente en nuestro html, ya sea en el HEAD o el algún lugar del BODY. Porqué? porque es código innecesario, y una de las funciones principales de usar CSS es limpiar nuestro código, además, un estilo local, no puede ser usado por otra página, y tendremos que volver a copiar y pegar para usarlo localmente en esa otra página, en sí una práctica muy poco eficiente y sucia. Traten de trabajar todo en hojas de estilo externas que son llamadas al principio de nuestro html en el HEAD.

Quieren ver esas mismas páginas tan hermosas de los sitios galería que antes les mencioné desnudos, o sea sin sus hojas de estilo?
Esto es para que realmente entiendan a lo que me refiero a un contenido limpio, y que las hojas de estilo son meramente PIELES aplicadas al contenido.

Si tienen FIREFOX como su buscador de preferencia (espero que no usen Internet ExploTER, y si lo usan, vayan cambiandose a FIREFOX o mejor aun, Google Chrome - pero recuerden que cuando prueban sus sitios, siempre tienen que verlos en TODOS los exploradores para asegurarse que esta bien hecho el trabajo para TODOS) dirijanse al menu de View, luego en Page Style busquen No Style (creo que en español es ver/estilo de pagina/sin estilo o algo por ahi).
Si usan Google Chrome pueden instalar esta extension que ofrece ademas una regla y un color picker (para capturar colores de la ventana de su explorador: http://www.chromeextensions.org/webmaster-seo/pendule/ Una vez instalado aparecera un icono con un engranaje blanco, le hacen click y escogen "Disable CSS" para quitar las hojas de estilo y lo le quitan denuevo la seleccion para activar las hojas de estilo otra vez.

En ambos casos es como si estuvieramos desnudando/vistiendo un sitio de sus hojas de estilo a nuestro gusto.

Haganlo con cualquier sitio, puede ser uno de los que les habia nombrado (que son galerias) o incluso uno de los sitios listados en esas galerias, entre mas lo hagan mejor, asi captan mas la idea.

Que sucedió??? Se convierten en PURO TEXTO "CHORREADO"!!!!

Bueno, el asunto es que el sitio en realidad es eso, texto "chorreado", sin acomodo visual, solo orden de aparición dentro del html. De hecho, este orden de aparición tambien es muy importante para SEO, junto con el uso de mayúsculas y links, pero eso es otra historia.
Sí tenemos imágenes presentes, esto tampoco es pecado capital, pero notaran que en una cantidad mucho menor a los sitios normalmente construidos con tablas.

Qué interesante verdad? Esos increibles japoneses!...

Bueno, ya vamos emocionandonos espero jeje.

Ok, empecemos por ver una estructura html en su estado más básico, así como contruiamos un sitio en aquellas épocas prehistóricas cuando aun no existian programas como dreamweaver o frontpage, donde todo era a puro texto (o hipertexto que es el caso de los html's).

Abran su block de notas (notepad). No, no el que tienen en su maleta ejecutiva, el que tienen en su windows u otro sistema operativo (ok ok sorry, no mas chistes tontos).
Y peguen este texto:


<html>

<head>
<title>
PAGINA WEB
</title>
</head>

<body>
<h1>
HOLA!!
</h1>
<h2>
Cómo estan?
</h2>
</body>

</html>



Ahora guarden con el nombre de pagina.txt , cierren el notepad y cambien la extensión de dicho archivo de txt a htm.
Denuevo un aviso de windows diciendo que si estamos seguros de cambiar la extension, pos si guon!

Ok, doble click al documento...

Listo! ya hicieron un documento html desde cero!! jajaja
De hecho ni el tag de title ni el h1 ni el h2 eran necesarios, con solo definir el inicio y final del html, el head y el body, ya está.
Pero agregamos el title para que tenga un título dentro del buscador y el h1 y el h2 por defecto tienen características de tamaño y negrita y hasta espaciado entre ellos para los textos que los mismos definen.

Ahora bien, diran los que ya saben del asunto y son expertos dreamweaverianos, y esto QUE CARAJOS??

Bueno, esta parte era para novatos, asi que SHHHHH

Ok, ahora vamos a hacer una hoja de estilo super sencilla, y le vamos a dar características a lo que pareciera es un documento sin gracia alguna.

Abran otro documento de texto en notepad. (tranquilos dreamweaverianos, yo trabajo con dreamweaver y una aplicacion llamada topstyle, que ya pueden ir bajandoAQUI pueden probar con la version lite que es gratis) hay otras aplicaciones para editar estilos, tanto para PC como para MAC, pero eso se los dejo de tarea).

Ok, en ese otro documento de notepad, vamos a pegar esto:


body {
background-color: Black;
font-family: "MS Sans Serif", Geneva, sans-serif;
text-align: center;
}

h1 {
font-size: 25px;
color: #FCE070;
width: 200px;
background-color: #A28303;
height: 40px;
border: #ECBE05 dashed 3px;
margin: 0;
}

h2 {
font-size: 17px;
color: #FEF3C5;
width: 400px;
background-color: #58843E;
height: 22px;
border: #8BB579 solid 2px;
margin: 0;
}





UY DIOS QUE ES TODO ESO???? bueno, ya les explico, por ahora guarden eso como estilo.txt. Ahora cierren el notepad, y cambien la extension a css

Ok aun falta que el html entienda que va a usar esa pagina de estilos como su piel.

Cambiamos denuevo la extension de pagina.htm a pagina.txt, lo abrimos otra vez y en el head pegamos:

<link href="estilo.css" rel="stylesheet" type="text/css">

O sea, nuestro html ahora se ve asi:


<html>

<head>
<title>
PAGINA WEB
</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>
HOLA!!
</h1>
<h2>
Cómo estan?
</h2>
</body>

< /html >



Bien, guarden y renombren a pagina.htm

Doble click, VOILA! Ahora su pagina tiene una hoja de estilo aplicada.

Ok, entendamos que es todo eso encerrado por llaves que tenemos en la hoja de estilos:

Primero que todo entendamos que cada estilo tiene un nombre, ya sea un elemento como body, una clase como la que habiamos mencionado antes (vaca) o un ID.
Y luego de su nombre, encerrado por llaves { } estan todas las características de este estilo.

Por ejemplo:


body {
background-color: Black;
font-family: "MS Sans Serif", Geneva, sans-serif;
text-align: center;
}



En este caso le dijimos al body, o sea toda la parte visible de nuestro html que tiene un fondo negro, la familia de tipografias sera la Geneva y el texto está alineado al centro (en el head van cosas referentes a programacion, los metas - luego averiguan de eso - llamados a documentos externos como hojas de estilos, javascripts, etc o tiene su presencia localmente en el html tambien).

Veran que cada comando está separado por un punto y coma.

El H1 es más complejo:


h1 {
font-size: 25px;
color: #FCE070;
width: 200px;
background-color: #A28303;
height: 40px;
border: #ECBE05 dashed 3px;
margin: 0;
}





Aquí le dijimos al H1 que el tamaño de letra será de 25 pixeles (las medidas en hojas de estilo pueden ser tambien en puntos, milimetros, porcentajes, tamaños predefinidos, etc). Tambien le dijimos que su color tendra el valor hexadecimal de #FCE070 que es ese tono limon verde que tenemos ahi. El ancho del area del h1 que tiene tambien su propio fondo de color, es de 200px y su alto de 40px. Tambien tiene un borde de un color especifico, que a su vez es en rayitas y de un grosor de 3px. El objeto H1 como tal, tiene un margen alrededor suyo de 0px.
Ahora analizen el H2 y vean las diferencias.
Hagan la prueba en la hoja de estilos (conviertanla denuevo a txt, o si prefieren abranla ya en topstyle), ahi intercambien los nombres de los h's al h1 ponganle h2 y a su vez al h2 renombrenlo h1.

Guarden y abran denuevo el htm.

Les mencioné el uso de TopStyle u otras aplicaciones incluyendo Dreamweaver tambien funciona, pero por efectos de entender esto mejor, lo estamos haciendo a la antigua. SI, en tiempos prehistoricos (inicios de los 90) asi era como se hacian las paginas. (soy suficientemente viejo para acordarme de HOTDOG HTML, una aplicacioncilla que era para trabajar paginas a puro codigo, casi como usar un block de notas).

Les invito a "travesear" esta hoja de estilo que hicimos, agreguen lineas, topstyle les da opciones automaticamente de características que pueden agregar. Si de pronto algun cambio que hicieron causa algo que no entienden o no les gusta en la pagina, tan facil como quitar la linea culpable.

En el siguiente tutorial de esta serie, empezaremos a trabajar ya composiciones mas complejas de marquetacion por css, y entenderemos las formas apropiadas de acomodar contenido para SEO.

Tambien haremos nuestro primer menú a punta de estilos, y tocaremos esas cosas llamadas DIV's y SPAN's y otros.


Suerte y que disfruten...

What is 3D Design?

3D Design... what can be said about it?
One of the latest manifestations in the digital world. Born out of the need for the virtual creation of objects, mostly in the engineering and architectural world, from buildings to bridges, to natural disaster simulations, to vehicles and mechanical parts. The artistic applications of 3D, where then not easily tackled by the likes of one such as I, or any of my fellow non highly technical savvy professionals. It required mostly a lot of programming know how, a lot of 3D abstract thinking if you will, that went into a process that only gave the pleasure of viewing the results after a lot of math and physics where applied in order to place a X,Y,Z 3D object in a THREE DIMENSIONAL VIRTUAL SPACE.

So, what's the deal with these three letters "X, Y, Z" ?
These are well known coordinates for anyone that works in the three dimensional virtual space. In fact, two of them are already well known themselves by anyone who works two dimensional media, in programs such as Adobe Photoshop, Adobe Illustrator, CorelDraw, Adobe Indesign, and so forth. "X" and "Y" are the horizontal and vertical coordinates respectively for position in the two dimensions. A Zero point is given for where these two coordinates meet, and from there you either move in a positive summation of units or a negative one. And unit measurements are handled in pixels, inches, centimeters or whatever is required. This also applies to even what you're seeing on this webpage, things are placed with a specific vertical and horizontal coordinate, and even though a lot of 2d professionals don't know it, they already do a little of 3d on a daily basis.

By placing one item over another one on a 2d canvas, you're doing 3D of sorts.
The "Z" coordinate is all about Depth. Objects on a web page are also bound by this placement, a lot of web designers have heard of the infamous "layers" (which is also a well known term with many 2d applications, like Photoshop, Illustrator, CorelDraw, etc), and all who work with Cascading Style Sheets (CSS) have at some point learned about positioning, floating and how block items interact with and over each other on the browser view port. Actually there's one specific css parameter called: "Z-index". See? :)

So, honestly, understanding how 3d works is not all that hard.
What IS hard is learning to use each one of the 3d applications out there. From freeware ones like Blender or Terragen to mid range ones (mid-range defined by pricing) like 3ds Max and Lightwave, to the High End expensive ones like Maya and Softimage (which lately have had mayor price cutbacks - luckily for all of us users). So like I said, the hard part is understanding the concept behind each tool, each part of what is involved in the process of creating 3D content.

3D is not only modeling, there are many other things involved.
That's why whenever a mayor motion picture 3d production is being made, lots of different specialist from the 3d technical world are hired on to the project. For instance you have to involve professionals who dedicate themselves just to create concept art. This means they are the ones first responsible for how things will actually look. They are the creative minds that determine how a spaceship will look, what style a suit will have, what a monster looks like, and so on.

Then there are the ones who take those concepts and turn them into 3D models. But is doesn't stop there, for like the Tyrannosaur character you see as a background for this page, once I've made the 3d geometry and volume definition for it, it still needs basically COLOR and TEXTURE. So as a third step in the creation process, you will find experts just in skinning the 3d models (nope, it's not about taking off the skin, actually the other way around). They will define coordinates and render a flattened skin of the model (much like the flat version of a world globe that looks like sliced orange skins spread out flatly) and then pass it on to the fourth group of people involved in the creation chain: The digital painters. These again are more of the 2D realm (not necessarily, but all they really need to do well is paint with applications like Photoshop and Painter), and so their responsibility is creating the superficial appearance of what ever part their working on, like skin, metal, leather, etc. They're also involved in working on backdrops for movies, and not only of the 3D kind, you will find these experts making backgrounds for even live footage film, or a combination of both 3D and live footage, where making a maquette or a 3d environment is much more time consuming and costly than just painting the whole scene on a canvas, these professionals are called matte painters.

Then there are also the guys who RIG the 3d model. Meaning, that they set up skin, "bones", "muscle" systems, joints, moving parts, and anything else that is involved in the functionality of the 3d character, vehicle, or whatever it might be. Then you will have the animators. They are the guys who run around in parking lots pretending to be Velociraptors or imagining how in the hell a dragon would do the Tango or how would a Centaur fight while at full gallop. There's also the lighting crew, they decide how to best light the scene, the character, the girl's face in contrast to the villain's, the creepy hallway, and so forth. And lastly there are all those involved in the additional special effects like smoke, fire, water, ect. Gasp gasp... yes many many specialists as you can see, and trying to do it all by yourself could be considered crazy, understandably. There are those who try, and you can follow their painstakingly slow process, and admire their patience, dedication and obvious talent like for instance Bryan Taylor and his creation RUST BOY and you will notice there are no more news in the site diary after January 2006! (mention of a large scale movie version is made, so probably in the end, it will be a whole team like the one I mentioned before). So as you can see, I do bits here and there of the whole process, being firstly an illustrator and secondly an amateur 3D designer (I still can't consider myself at the level of professionals I've seen out there) I like to dip my nose in the whole range of interesting sides the 3D Virtual World has to offer. (hint hint, look at my stuff by means of the top left menu).

So, what's the point of using such complicated 3d technology?
It has many benefits! For instance animating and generating this animation into video a 3d character compared to the antique stop motion process, you will get much more natural and smooth results. You have no limitations as to what an object or character can do, since it's a Virtual Universe, this Universe can be subject to realistic physical laws or your own version of them. Things created in 3D are very very neat (not in the "cool" context, but meaning clean and sharp), to the point that you actually have to add wear, dirt, grime, scratches and such in order to fool the eye when your purpose is realistic 3D renders. It's just a matter of having access to things you would otherwise might not, from a long ago extinct Dinosaur, to an ancient building, to super giant spaceships and anything else your imagination might require. Realistic or intentionally non-realistic 3d is all a realm onto itself, and it's a very gratifying journey getting there I might add. I highly recommend it to anyone willing to get into a steep learning curve and a passion for making dreams into realities. Virtual 3D realities that is (wink).

All well and good, but are there commercial benefits at a smaller scale?
So, when we're not talking about mayor film studio productions, or just something that's not bound to be on TV is there still a reason to take advantage of 3D?

The answer most definitely is YES! One good example is the football helmet I made for the sports book I used to work for (along with other sports gear) or the 3d versions of coffee accessories I was making for the coffee company I also worked for. These 3d objects solved a sometimes complicated and expensive issue, of the problem it represented every time you needed a depiction of iconic items in various marketing solutions, that if approache by either photographing original real items, or trying to photomanipulate existing images, adding backgrounds, other real world objects into the environment or brand logos and colors, in most cases it would be a lot more work, with none of the clean cut and controlled aesthetically pleasing effects you could get from a 3D Render.

In other words, once I had put in the time to create the 3D representation of one of these reusable items, textured them, and set up initial lighting and virtual camera views, I could easily work what is simply the virtual representation of a real life photo or filming studio. Where you have cameras, lighting, backdrops and props at your disposal. If you go and see the football helmet for instance, you will find it taken from different angles and with various logos and colors. All I had to do, was change the texture applied, change the camera angle and lighting (just the same as a real life studio), then hit render. When doing a real life photo-shoot, you are limited by the capacity of your gear, how far you can push it (tripod, lenses, lighting filters, diffusers and anything else at your disposal) and most of all, WHAT you are trying to shoot. Props get dusty, scratched, opaqued by time, and most of the time, you can't even really find what you need for the shot. 3D solves all this, and much much more. For instance, I could render if needed a thousand football helmets together (of course render time would increase dramatically), which is not the same as putting them together in Photoshop, because remember, having each of them as a spherical reflective surface, each on has a different angle of refraction in relation to the camera (view) angle, and you simply can't replicate that by using a 2D application. And after you have invested the time necessary for creating all these virtual 3d props, all you have to do is import them to your work area (virtual photo or film studio) and simply render the image you need for your marketing campaign.

Please feel free to see what I have done myself in 3D up to now.
Just go to my page and use the top left menu (3d Design), and if you have questions, observations or suggestions on my 3d accomplishments, please feel free to contact me!

My Rant is open for business.

No thoughts here yet... for now I'm going back to my own site at oscarblanco.net to a long overdue redesign and restructuring of my personal online work profile.

So until I do that, I'm not really going to be adding stuff to this my personal rant page :)