Innovacion Acelerada
Este año se cumplen 150 años de la apertura comercial del puerto de Yokohama en Japón.
Fue sin duda un hecho que marcó la historia del país para siempre. Japón se encontraba aislado del resto del mundo atascado en una época medieval en un esfuerzo por mantener pura su cultura, pero llegó un momento donde se hizo evidente que quedarse atrasado con respecto al resto del mundo no era una buena idea. En 1853 una flota de buques de guerra norteamericanos desembarcaron cerca de Yokohama liderados por el Comodoro Matthew Perry el cual exigió al gobierno japones la apertura comercial de sus puertos. La diferencia de tecnología militar asustó a los japoneses que no les quedó otra opción mas que reconocer que mantener su política sería también su lecho de muerte.
En 100 años Japón pasó del medioevo a ser una pujante economía mundial. En 1954 presentaron la primera radio de transistores comercial y en 1964 el primer servicio de trenes de alta velocidad del mundo, en los años 70 y 80 el mercado ya estaba inundado de electrónica japonesa.
Como puede una nación en un par de generaciones dar un salto cultural tan grande?
No sorprendemos del avance de la tecnología pero muchas veces simplemente nos dejamos llevar por el avance que otros producen. La diferencia está sobre todo en la mentalidad, el conocimiento de las propias capacidades y la vocación de trabajo. ¿que hicimos en Argentina en 100 años? ¿Será muy dificil aprender de la experiencia de nuestros compañeros del otro lado del globo?. Probablemente sea dificil, pero sigue siendo posible, sigue valiendo la pena seguir luchando.
El quinto poder
Corria el año 1999, el mundo estaba preocupado por el Y2K, los medios de información (el cuarto poder, después del legislativo, ejecutivo y judicial, según dicen) gritaban a los cuatro vientos el fin del mundo y la debacle. Al final no ocurrio nada, pero todos lo recordamos y el suceso quedó en el recuerdo, se invirtieron millones, algunos justificados, la mayoría fueron desperdiciados en la histeria colectiva. Sin embargo aun desapercibido, desde el ultimo dia de Mayo del ultimo año de ese siglo existía 2ch.
2ch, abreviación de 2channel es hoy en dia el foro en internet mas grande del mundo. Creado por Hiroyuki Nishimura este sitio es visitado por miles de japoneses todos los dias y en el se puede hablar sobre practicamente todo: Cocina, películas, noticias, eventos sociales, etc. Está organizado en mas de 600 sub foros y una particularidad importante es que los usuarios mantienen su completo anonimato al participar. Los usuarios han constituido una sociedad de inteligencia colectiva, utilizando computación distribuida ayudan con el proyecto SETI y a encontrar una cura para el cancer. Incluso hubieron casos de crueldad animal o crímenes que fueron puestos de manifiesto en el foro y solucionados mas rápido gracias a la ayuda del mismo. Hoy en dia 2ch cuenta con tanto o mas poder mediático que un canal de televisión con el beneficio de que la opinión y la información es un reflejo mucho mas fiel de la opinión pública debido a que la misma es mantenida por sus millones de usuarios.
Algo similar ocurrio en Estados Unidos, la repercusión de 2ch llevó a un americano a crear 4ch, la versión angloparlante del foro nipon que estuvo envuelta en los casos de censura en internet (concretamente intentaron eliminar unos videos en youtube en los que se exponía publicidad interna que podia tomarse como lavado de cerebro) por parte de una secta religiosa que llevó también a la policía a investigar la misteriosa muerte de un miembro de la secta. Demostraron que nadie puede callar a los usuarios de internet, no pueden censurarse opiniones en un foro de dominio público.
Asi llegamos a la Argentina. En estos dias en Taringa, un sitio que nació para compartir información y enlaces, surgió una noticia que hace historia aunque pase desapercibida: Un usuario para hacer una broma sube a internet una foto trucada de una bandera con un mensaje en un partido de fútbol y a partir de ella un famoso medio periodistico de un gran conglomerado publica una mentira como verdad en primera plana. A pesar de buscar miles de excusas la realidad es inexcusable y la verdad sobre la manipulación de la información que hacen los medios queda puesta en evidencia por los usuarios de la red social. Algo similar ocurrió también en estos dias con la muerte del abogado Rodrigo Rosenberg en Guatemala, el abogado dejó un video antes de ser asesinado inculpando al presidente del país y a importantes personajes de la política. El video, censurado en los principales medios del país, fue subido a youtube y entonces ya no hubo forma de evitar que Guatemala y el mundo se enteraran.
Estamos ante un quinto poder: Los medios de comunicación ganaron poder para presionar gobiernos y las redes sociales gana poder para presionar a los medios y a los gobiernos. Quien podrá censurar a millones de personas? Por mas que lo intenten, como están haciendo en Francia con la ley HADOPI para prohibir el intercambio de información, no consiguen nada puesto que siempre hay una forma de retrucar las limitaciones, siempre hay una forma de darse a conocer en internet, siempre hay una forma de hacer llegar una opinión personal en este nuevo mundo tecnológico. Somos demasiados millones de usuarios y ya es demasiado tarde para prohibir la internet entera. Vamos a presenciar en los próximos años cosas que jamás pasaron antes en la historia de nuestra especie.
Tutorial: Estilizando las cajas
Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: El Modelo de Cajas para leer este otro.
En la entrada anterior lo último que se explicó fue a utilizar el modelo de cajas para crear una página a dos columnas. Era algo como esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div#cabecera { margin:5px; text-align:center; padding:10px; height:20px; width:375px; border:1px solid gray; float:left }^n div#barra {margin:5px; padding:5px; width:140px; border:1px solid gray; float:left;}^n div#contenido {margin:5px; padding:5px; width:223px; border:1px solid gray; float:left;}^n </style>^n </head>^n <body>^n <div id="cabecera">Bienvenidos a mi sitio web</div>^n <div id="barra">^n <ul>^n <li><a href="#">Inicio</a></li>^n <li><a href="#">Blog</a></li>^n <li><a href="#">Fotos</a></li>^n <li><a href="#">Contacto</a></li>^n </ul>^n </div>^n <div id="contenido"><p><strong>Bienvenidos</strong> a la portada de mi sitio web, queremos demostrarte como con un espíritu de <strong>colaboración</strong> y <strong>buenas ideas</strong> se pueden construir grandes cosas</p></div>^n </body>^n</html>
Cambiando solo el estilo podemos conseguir cosas muy bonitas, vamos con unos ejemplos simples. Algunas de las instrucciones nuevas que vamos a usar son: background:url(ruta_de_la_imagen); para poner imágenes de fondo,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style>^n body { background:url(images/tree.gif) no-repeat #c0dbbc; font-size:12px; font-family:Verdana,Arial }^n div#cabecera { margin:5px; font-size:16px; color:#41500d; font-weight:bold; text-align:right; padding:10px; height:20px; width:375px; float:left }^n div#barra {width:150px; height:150px; margin:5px; background:url(/images/leaves.gif) no-repeat; float:right;}^n div#barra a {color:#8c4317; font-weight:bold;}^n div#barra ul {padding-left:30px;}^n div#barra li {list-style:none; background:url(/images/item.gif) no-repeat; padding-left:22px;}^n div#contenido {margin:25px 0 0 20px; padding:5px; width:240px; float:left;}^n </style>^n </head>^n <body>^n <div id="cabecera">Bienvenidos a mi sitio web</div>^n <div id="barra">^n <ul>^n <li><a href="#">Inicio</a></li>^n <li><a href="#">Blog</a></li>^n <li><a href="#">Fotos</a></li>^n <li><a href="#">Contacto</a></li>^n </ul>^n </div>^n <div id="contenido"><p><strong>Bienvenidos</strong> a la portada de mi sitio web, queremos demostrarte como con un espiritu de <strong>colaboracion</strong> y <strong>buenas ideas</strong> se pueden construir grandes cosas</p></div>^n </body>^n</html>
Una muy poderosa herramienta para comprender y realizar CSS es Firebug para el navegador Firefox. Utilizando la opción Inspeccionar puede verse desde el navegador el código HTML y CSS y como se comportan entre si. No tengas miedo de explorarlo a fondo.
Espacio de pruebas
El miedo al cambio
El Sultan Abdul Hamid II que estuvo en el trono de Turquia desde 1876 a 1909 respondió a los ingenieros que le plantearon la instalación de una red electrica en la capital Constantinopla que no quería saber nada con la electricidad ya que para generarla necesitaban dínamos. A este inculto sultan la palabra dínamo le sonaba a dinamita y según sus palabras, le temía a sus explosiones.
El miedo al cambio suele llevar al no querer saber, al no querer ahondar en el problema para saber si lo que uno está haciendo está mal, bien o puede ser mejor. Incluso este instinto del miedo es tan poderoso que se ha tornado verso popular: "Mejor malo y conocido que bueno y por conocer"
En el mundo de hoy, mas aun en lo que tenga que ver con tecnología, mas aun en lo que tenga que ver con internet, esta actitud lleva sin lugar a dudas a la ruina.
A veces incluso entre ingenieros y profesionales se presenta esta actitud, es algo inherente a la humanidad, un miedo de conservación. No depende del conocimiento, ni los estudios, ni la capacidad intelectual: es una cuestion de actitud el enfrentar las dudas y miedos y ver que hay mas alla. Es una cuestión de inteligencia aprovechar esa actitud de algunos para contagiarla a los otros para que se sientan mas seguros, es una cuestión de sabiduría hacer grandes cosas con un grupo de gente motivada para mejorar y aprender.
En SiteUp queremos ofrecerte las vias, la comunicación, la seguridad, para que estes pronto al cambio, para que tu sitio web refleje esta filosofía: no hablamos por hablar, realmente lo sentimos asi, por que nos apasiona aprender y mejorar, y mas aun, poner eso a disposición de los demás para poder construir algo que nos sirva a todos. Entonces, estás listo para no volvera quedarte atrás nunca?
Tutorial: Modelo de Cajas
Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: Introducción al CSS para leer este otro.
Una forma muy extendida de maquetar es utilizar el modelo de cajas y hacerlas flotar. El modelo de cajar permite tratar elementos como rectángulos que se van acomodando a su entorno. Para ello debemos darles la propiedad display:block aunque algunos elementos ya la tienen por defecto, por ejemplo <div>. Vamos a utilizar dos propiedades nuevas: border y background para poder visualizar las cajas.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div { border:1px solid black }^n div#uno {background-color:red; height:100px; width:200px;}^n div#dos {background-color:blue; height:50px; width:50px;}^n div#tres {background-color:green; height:150px; width:150px;}^n div#cuatro {background-color:yellow; height:20px; width:200px;}^n div#cinco {background-color:black; height:200px; width:85px;}^n </style>^n </head>^n <body>^n <div id="uno">caja uno</div>^n <div id="dos">caja dos</div>^n <div id="tres">caja tres</div>^n <div id="cuatro">caja cuatro</div>^n <div id="cinco">caja cinco</div>^n </body>^n</html>
Aqui estamos armando cinco cajas con tamaños y colores de fondos distintos, quedarán una debajo de la otra.
La W3C propone entonces un modelo de cajas para definir tamaños, márgenes y comportamientos:
Vamos a probar entonces el comportamiento de Flotar. Esto es darle a las cajas una especie de "fuerza de gravedad" para que se acomoden segun entren en la página. Por ejemplo, para que las cajas se acomoden en la punta superior izquierda pondremos float:left y para que lo hagan en la esquina superior derecha usaremos float:right.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div { border:1px solid black; float:left; }^n div#uno {background-color:red; height:100px; width:200px;}^n div#dos {background-color:blue; height:50px; width:50px;}^n div#tres {background-color:green; height:150px; width:150px;}^n div#cuatro {background-color:yellow; height:20px; width:200px;}^n div#cinco {background-color:black; height:200px; width:85px;}^n </style>^n </head>^n <body>^n <div id="uno">caja uno</div>^n <div id="dos">caja dos</div>^n <div id="tres">caja tres</div>^n <div id="cuatro">caja cuatro</div>^n <div id="cinco">caja cinco</div>^n </body>^n</html>
Haz la prueba de cambiar el float:left; por float:right;
Para determinar el orden en el que caerán los elementos es importante el orden en el que estan puestos en el html. Vamos a ver un ejemplo donde se utiliza con mas claridad, también utilizaremos márgenes (margin) que es la distancia que debe dejar el elemento con los demás y rellenos (padding) que es la distancia entre el borde y el contenido:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div#cabecera { margin:5px; text-align:center; padding:10px; height:20px; width:375px; border:1px solid gray; float:left }^n div#columna_uno {margin:5px; padding:5px; width:140px; border:1px solid gray; float:left;}^n div#columna_dos {margin:5px; padding:5px; width:223px; border:1px solid gray; float:left;}^n </style>^n </head>^n <body>^n <div id="cabecera">Cabecera de la pagina</div>^n <div id="columna_uno"> Primera columna del sitio Primera columna del sitio Primera columna del sitio</div>^n <div id="columna_dos"> Segunda columna del sitio Segunda columna del sitio Segunda columna del sitio </div>^n </body>^n</html>
Expliquemos un poco los tamaños. En la cabecera hemos dejado 5px de margen, 5px de relleno, 1px de borde (todo esto de cada lado) y un ancho de 375px.
La cuenta da: 5+1+10+375+10+1+5 = 407px.
En las cajas de abajo, en la primera tenemos: 5px de margen, 1px de borde, 5px de relleno (esto de cada lado) y 140px de ancho: 5+1+5+140+5+1+5 = 162px
La segunda caja de abajo es lo mismo pero con 223px de ancho, entonces: 5+1+5+223+5+1+5 = 245px
y 152px + 245px = 407px. Que es lo mismo que mide la caja de la cabecera, asi es como quedan alineadas nuestras columnas
