Mythology1

¿Qué tienen en común las hormigas recolectoras con el protocolo TCP? De acuerdo a una profesora de biología y a un profesor de ciencias de la computación de la Universidad de Stanford, mucho más de lo que parece a simple vista. Después de estudiar muy de cerca los métodos de las hormigas recolectoras a la hora de salir de sus nidos para obtener comida, se llegó a la conclusión de que su comportamiento se asemeja en gran medida a los controles de congestión aplicados en el protocolo TCP para determinar el ancho de banda disponible. Se estima que existen unas 22 mil especies de hormigas, de las cuales se ha clasificado poco más de la mitad. Las diferencias entre una especie y otra pueden ser muy llamativas, por lo tanto, no quedan dudas de que hay mucho para aprender de ellas. Deborah Gordon es una profesora de biología en la Universidad de Stanford que ha estudiado a las hormigas por más de dos décadas. Cualquiera que visite su página personal bajo el dominio de la universidad encontrará toneladas de información sobre hormigas, pero su último trabajo se concentró sobre la actividad de recolección de las propiamente llamadas “hormigas recolectoras”(Pogonomyrmex barbatus), y su regulación de acuerdo a la cantidad de comida disponible. Esto la llevó a contactarse con Balaji Prabhakar, profesor de ingeniería eléctrica y ciencias de la computación en la misma universidad. Como podrán imaginar, Prabhakar sabe una cosa o dos sobre protocolos de comunicación y controles de congestión de redes. Al principio, no parecía haber una relación entre ambos campos, pero al final llegó la respuesta. Las hormigas alteran su frecuencia de salida de acuerdo a la comida disponible, algo similar a lo que hace el protocolo TCP para establecer el ancho de banda disponible De acuerdo a Prabhakar, dicha respuesta está en el protocolo TCP, reconocido por ser uno de los protocolos elementales que le dan forma a Internet como la conocemos hoy. El protocolo TCP cuenta con varios mecanismos para evitar un cuadro de congestión. A la hora de transferir datos, ambos lados coordinan el envío y recepción de paquetes a través de “ACKs”, nombre derivado de “acknowledge” (reconocer). Si los “ACKs” regresan a la fuente a alta velocidad, se establece que hay ancho de banda disponible, y en consecuencia, se aumenta la velocidad de transferencia. Caso contrario, el protocolo se encarga de hacer todo un poco más lento para evitar una congestión. Al ser enviadas a obtener comida, las hormigas recolectoras utilizan un procedimiento similar: Cuanto más rápido regresan con alimento al nido, mayor es la cantidad de recolectores que son enviados, pero si comienzan a regresar sin nada comestible, el ritmo se reduce drásticamente. El profesor Prabhakar procedió a escribir un algoritmo que simula el comportamiento de las hormigas de acuerdo a la cantidad de comida disponible, utilizando como inspiración a lo que ya se conoce del protocolo TCP. Con la ayuda de la estudiante Katie Dektar, descubrieron que los datos generados por este nuevo algoritmo eran prácticamente idénticos a los resultados que Gordon había obtenido con sus experimentos. Dicho de otra manera, las hormigas recolectoras utilizan su propia “anternet” para determinar la intensidad con la que deben ir a buscar comida. Prabhakar agregó que de haberse descubierto esto en los primeros años de la década del ‘70, las hormigas recolectoras hubieran tenido una gran influencia en el desarrollo de Internet, lo que al mismo tiempo hace que nos preguntemos qué otra clase de mecanismos quedan por descubrir en las hormigas, que llevarían a nuevos y avanzados algoritmos. Fuente: Universidad de Stanford

Recientemente mencioné que la versión 15 de Firefox ya estaba lista para su descarga, y entre sus mejoras aparecían optimizaciones para WebGL. Bien, al parecer en la red de desarrolladores de Mozilla no tuvieron mejor idea para poner a WebGL a prueba que trasladar a todo un motor gráfico basado en C++ y crear un shooter en primera persona llamado BananaBread. Su demo no necesita de ningún plugin adicional, y claramente deja en evidencia que con la optimización suficiente, tanto WebGL como JavaScript pueden lidiar con juegos de esta clase. Hemos visto una importante cantidad de proyectos basados en WebGL. Incluso algunos desarrolladores crearon títulos muy interesantes, sin embargo, la misma sensación permanece en el aire. Las aplicaciones WebGL aún no han abandonado ese perfil de “demo técnica”, lo que nos hace pensar que todavía no está del todo listo. Por supuesto, no todo recae sobre WebGL: La mayoría de los usuarios suele tomarse un buen tiempo antes de actualizar los controladores de vídeo en su ordenador (sin mencionar la posibilidad de que probablemente no sepan hacerlo), y la implementación de WebGL sobre los navegadores no está unificada. Cada desarrollador tiene su forma de hacer las cosas, por lo que puede haber importantes diferencias de rendimiento. Aún así, el potencial de WebGL es enorme, y para tener una mejor idea de ello, ¿qué ejemplo más elaborado que un juego FPS? link: http://www.youtube.com/watch?feature=player_embedded&v=mIYmxPdtsl4 Los desarrolladores de Mozilla han publicado en su blog información sobre BananaBread, un juego que hace uso de todas las mejoras sobre WebGL y JavaScript presentes en Firefox 15. Con el objetivo de exhibir el progreso que han hecho hasta aquí, los desarrolladores tomaron al motor abierto utilizando en el juego “Cube 2: Sauerbraten”, y lo llevaron de C++ a JavaScript a través de Emscripten. Aunque había dudas de que la conversión fuera viable en un juego que demanda tanta velocidad de respuesta (si has estado en un deathmatch en cualquier FPS, sabes de lo que hablo), el resultado que se puede visualizar en la demo es realmente impresionante. Al mismo tiempo, BananaBread es un excelente elemento que representa al concepto de juego HTML5, por lo que cualquier navegador que tenga las funciones requeridas puede ejecutarlo (Chrome es el único navegador confirmado aparte de Firefox), y esto no se limitaría a plataformas de escritorio. He dedicado algunos minutos a BananaBread, y más allá de que el bot juega pésimo (gané yo, eso lo dice todo) o de que hay algunos detalles de superficies para ajustar (como saltar sobre el agua), definitivamente me gustaría ver a BananaBread convertido en todo un FPS disponible en nuestros navegadores. Como no podía ser de otra manera, ya hay usuarios solicitando el soporte multijugador, y aunque no existe un compromiso oficial para ello, están esperando a que el API WebRTC madure un poco más. Para obtener el mejor rendimiento en BananaBread, recomendamos utilizar la última versión de Firefox junto al último controlador para tu solución de vídeo. Una alternativa sería forzar la aceleración de vídeo (visita “about:config”, y cambia los comandos “webgl.force-enabled”, “layers.acceleration.force-enabled” y “gfx.direct2d.force-enabled” a “true”), y si el navegador presenta problemas, sólo bastará con deshacer esos cambios. Prueba BananaBread: Haz clic aquí

Ya no quedan dudas de que algunas empresas del Gigante Rojo de Oriente tienen la capacidad de copiar cualquier cosa. Los personajes de acción de Occidente ylos teléfonos móviles se han vuelto particularmente populares en estos días, pero ni siquiera Android ha podido resistir el proceso. Así es como apareció Aliyun OS, desarrollado por el grupo detrás del portal Alibaba. Aliyun está basado en código Android, pero no ha sido“homologado” por Google, aunque eso no le ha impedido ganar tracción en un mercado al que todos critican abiertamente, y que en realidad desean entre sueños. ¿Por qué es tan difícil para algunas empresas de Occidente hacer buen pie en territorio chino? Estoy seguro de que un experto en finanzas podría tener una opinión más profesional al respecto, pero en general todo parece tener influencia, desde lo económico hasta lo cultural. Aunque hay chinos con la capacidad (y la autorización gubernamental, dicho sea de paso) de adquirir productos que se pueden considerar “de lujo”, las reglas son marcadas por lo barato y popular. Y como pueden imaginar, la copia es un recurso tremendo. Sólo se necesita algo relativamente apreciado entre los consumidores para que crezcan clones debajo de las piedras, desde muñecos de Angry Birds hasta el mismísimo iPhone. Y en el caso de sistemas operativos, ni siquiera uno de postura abierta como Android ha podido evitar esta situación. Oficialmente no es compatible con Android, pero puede ejecutar sus aplicaciones El sistema en cuestión es conocido como Aliyun OS, desarrollado por el Grupo Alibaba, el mismo Alibaba que plaga los resultados de Google cuando buscamos el precio de algún componente o accesorio. El sistema lleva poco más de un año de desarrollo, pero ha llamado mucho la atención la velocidad con la que ha ganado terreno, algo que se puede atribuir al hecho de que “está donde los otros no”. Los caminos oficiales para que una empresa puede utilizar a Android y acceder a elementos oficiales de Google como Google Play pueden ser complicados, y muchas empresas han optado por usar a Aliyun como alternativa. Incluso hubo algo parecido a un escándalo a mediados de septiembre cuando Google impidió que Acer lanzara al mercado un smartphone con ese sistema. Google esgrimió los compromisos de laOpen Handset Alliance (grupo del cual Acer es miembro desde 2009), y apeló al“acuerdo de no fragmentación” para realizar el bloqueo. La OHA no impide que un miembro desarrolle productos basados en otros sistemas, pero con variantes no compatibles y/o fragmentadas de Android, es diferente. Aún así, la historia llega un poco más profundo. En mayo pasado se calculaba que había cerca de un millón de dispositivos con Aliyun OS preinstalado. Y aunque Aliyun carece de la certificación del programa de compatibilidad de Android, puede ejecutar aplicaciones de ese sistema operativo. Hasta el mismo Andy Rubin, previo CEO de Android Inc. y actual Vicepresidente de Contenido Móvil en Google ha dicho que la tienda de aplicaciones de Aliyun contiene aplicaciones pirateadas de Google. Por su parte, los desarrolladores de Aliyun dijeron en su momento que el sistema “no tiene porqué ser compatible” con Android ya que no es parte de su ecosistema, algo que técnicamente no deja de ser cierto, porque Android es una marca registrada y tiene condiciones de uso establecidas, pero parte del código se mantiene bajo licencia Apache, lo cual da otras libertades. El punto más delicado de todo esto se concentra en la disponibilidad de aplicaciones piratas, sin embargo, del lado de Aliyun no parecen tener ninguna prisa... Fuente: Apps Shopper

La saga Resident Evil ha tenido ejemplares excelentes, y otros que definitivamente no han estado a la altura de las circunstancias. Sin embargo, también tiene un “elemento perdido”, aunque relativamente bien conocido: Lo que todos conocemos como Resident Evil 2 es en realidad el reemplazo de una versión previa bautizada como “Resident Evil 1.5”. Este build especial nunca salió a la luz, pero fue cancelado en un estado bastante avanzado de desarrollo. En consecuencia, un dedicado grupo de fans ha estado trabajando en restaurar Resident Evil 1.5, y recientemente decidió (con escándalo de por medio), colocar a disposición del público una versión incompleta de su trabajo. La historia indica que un mes después del lanzamiento del primer Resident Evil en marzo de 1996, comenzó el desarrollo de su secuela. La primera idea que flotó en los pasillos de Capcom fue crear una especie de “spin-off” conocido como “Biohazard Dash”, una aventura en las ruinas de la Mansión Spencer, con monstruos en forma de plantas, y dos nuevos personajes. Dash fue rápidamente descartado, y así fue como surgió lo que hoy se conoce como Resident Evil 1.5. La trama general en Resident Evil 1.5 era similar a lo que finalmente se vio en Resident Evil 2: Raccoon City infectada y Leon S. Kennedy liquidando zombies. Sin embargo, también existía el personaje de Elza Walker, y aunque ambos eran personajes principales, las historias de Leon y Elza no se cruzaban. Ahora, ¿por qué Resident Evil 1.5 quedó en el camino? Su estado de desarrollo era muy avanzado (se habla del 80 por ciento), pero varios indicios apuntan a serias diferencias entre el director Hideki Kamiya y el productor Shinji Mikami (quien ocupó ambos puestos en el primer Resident Evil). Sin estar convencidos de la calidad del proyecto (incluyendo su potencial de “continuación”), y sabiendo que no cumplirían con la fecha original de lanzamiento, Capcom le bajó el pulgar a Resident Evil 1.5. Con la inclusión de Noboru Sugimura (quien terminó escribiendo todo el guión de RE2), se decidió comenzar casi desde cero, y para cubrir el agujero, Capcom lanzó el Director’s Cut del primer Resident Evil, hasta que Resident Evil 2 llegó en enero de 1998 (mayo en Europa). Resident Evil 1.5 probablemente se hubiera perdido en el tiempo de no ser por los esfuerzos de un grupo de fans que ha estado trabajando en la traducción, estabilización y creación del contenido faltante. La idea era que Resident Evil 1.5 llegara al público en forma restaurada, completa y gratuita, pero hubo un problema: Algún “elemento” se hizo con una copia inestable del juego, y trató de venderla a través de eBay. El proyecto es sin fines de lucro (especialmente para evitar los misiles legales de Capcom), por lo tanto, los desarrolladores se han visto forzados a publicar una versión más o menos estable, anulando cualquier posibilidad de reventa. La imagen ISO está en el primer mensaje del thread que encontrarás en el enlace más abajo, y luego deberás grabar dicha imagen en un CD y ejecutarla en una PlayStation 1 con su “mod” correspondiente, o utilizar un emulador en combinación con una imagen del BIOS, que puedes encontrar en la Web. Foro "no oficial" y descarga:

La idea era buscar un título tanto o más sensacionalista que nuestra otra saga. No lo logramos, pero lo que sí lograremos es hacer de esta nueva saga una tan buena y completa o más aún que la anterior. Empezaremos a cubrir un tema tan importante e interesante como las hojas de estilo a contar de hoy, algo realmente fundamental cuando trabajamos en diseño Web o bien queremos aprender una nueva tecnología que nos permita ampliar nuestro set de herramientas. Hoy comenzaremos con algunos conceptos básicos y un ejemplo que nos permita ir entendiendo de la mejor manera las hojas de estilo, esperando adentrarnos en números próximos y llegar a cubrir temáticas que nos conviertan en todos unos amos del universo entendedores de la materia. Todos aquellos libres de temor y con sed de aprendizaje, sigannos después del salto bajo su propia responsabilidad, pues no hay reembolsos. Cómo dominar CSS sin salir del escritorio Antes de comenzar: Nota 1: Tal como indicamos en “Cómo aprender a programar y no morir en el intento”, en este caso es bueno decir que no soy experto en CSS ni el diseño Web es nuestra profesión, sino que la intención es ir cubriendo las temáticas de la manera más sencilla posible para un mejor entendimiento de la tecnología, por lo que si lo que interesa es ir aprendiendo de cero, esto es lo ideal. Nota 2: Es preferible, aunque no esencial, contar con algunos conocimientos de HTML antes de embarcarse en esta aventura. De cualquier forma, cada vez que incluyamos contenidos de ese lenguaje, los iremos explicando. Para comenzar, siempre es bueno indicar: Implementos necesarios: A pesar de que como en todo tipo de programación (las hojas de estilo podrían considerarse programación), no es necesario contar más que con block de notas para desarrollar, utilizamos en el 99% de nuestros desarrollos Web un editor como Adobe Dreamweaver, el cual pueden descargar en su versión de prueba desde este enlace. Con eso claro, veamos, los contenidos de hoy: Contenidos: ¿Qué son las hojas de estilo? Ventajas y desventajas de usar hojas de estilo. Estilizando en HTML individualmente. Estilizando en HTML a nivel de página. La modalidad de esta saga, será bastante similar a como hemos operado durante otras. En cada nueva guía iremos cubriendo algunos contenidos y dando algunos ejemplos para mejor entendimiento. A medida que vayamos avanzando, iremos dando algunos ejercicios propuestos y resueltos. Estando claros con los contenidos de hoy, vamos, manos a la obra: 1.- ¿Qué son las hojas de estilo? Cuando hablamos de hojas de estilo, o CSS (Cascading Style Sheets o Cascade Style Sheets según la definición que encuentren) nos referimos a una tecnología de lenguajes de estilo (también definido en algunos casos como un lenguaje de programación de estilos), utilizado principalmente para controlar la apariencia de documentos escritos en lenguaje HTML o XHTML, aunque también puede ser utilizado para documentos escritos en XML. Cuando hablamos de documentos escritos en lenguaje HTML nos referimos principamente a páginas Web. Este lenguaje HTML, el más utilizado y combinado con lenguajes dinámicos de programación como PHP o ASP entre otros, tiene como finalidad principal estructurizar el contenido de un sitio Web mediante la aplicación de marcas o etiquetas (<HTML>, <HEAD>, <TITLE>, <BODY>, etc.) y es definido en los estándares de la W3C de esa forma. Sin embargo, dentro de HTML además de contar con etiquetas o marcas de estructura, también contamos con algunas etiquetas que nos permiten controlar el formato o apariencia de los contenidos desplegados. Algunas de las marcas más utilizadas son: <i>: Define un formato de cursiva para el texto. <b>: Define un formato de negrita para el texto. <u>: Define un formato de subrayado para el texto. <font face=”…”>: Define la tipografía a usar. <font color=”…”>: Define el color a usar en el texto. Si bien con ese tipo de etiquetas, junto a otras, podemos controlar practicamente todo lo relacionado al estilo y apariencia de una página Web, se comenzó a notar que HTML empezaba a perder las características estructurales que lo definían y se convertía ya en un lenguaje mucho más híbrido. Por esto, la W3C (entidad encargada de definir los estándares relacionados a tecnologías Web), decidió definir un nuevo estándar, conocido como CSS1 (luego vendría el CSS2), orientado exclusivamente a estilización y apariencia de sitios Web, intentando devolver a HTML a su naturaleza habitual. Es así como nacen las hojas de estilo. Con la aparición de este estándar, nos encontramos con la posibilidad de definir la apariencia de nuestros sitios Web de 3 formas distintas: mediante la estilización individual de etiquetas HTML, estilizando un HTML como definición de página de forma interna, y mediante la utilización de un archivo externo .CSS. Hoy veremos las 2 primeras y luego empezaremos a trabajar con archivos externos, la forma más conveniente en mi opinión. Hoy, los estándares de hojas de estilo son tan poderosos que ya no sólo se remiten al estilo o formato de textos, si no que podemos realizar controles de imágenes, opacidad y realizar efectos visualmente impresionantes, por lo que usar esta tecnología supone una potenciación importante de nuestros sitios Web. 2.- Ventajas y desventajas de usar hojas de estilo. A pesar de que a primera vista el uso de hojas de estilo pudiése verse como algo únicamente conveniente, existen algunas desventajas a tener en consideración. Claramente cuando hablamos de ventajas, tal como mencionabamos en la lección anterior, está el poder realizar una separación limpia y completa entre lo que es estructura y contenidos (HTML + lenguajes dinámicos de lado cliente y de servidor) y lo que es apariencia y estilos. Esto sin duda que nos otorga un orden importante a tener en consideración y mayor claridad, tanto en la planificación como en el diseño y desarrollo de la Web. Además, cuando utilizamos archivos externos, y estos son solicitados por muchas páginas que tengamos a nuestra disposición, se presenta la facilidad que cuando necesitamos realizar modificaciones de estilo, sólo modificamos 1 archivo, mientras que si nuestros estilos estuviesen definidos a nivel de página o mediante marcas HTML, estaríamos realizando cambios en cada página que se despliegue a nuestros visitantes. Pero el uso de hojas de estilo también presenta algunos inconvenientes, aunque no del lenguaje propiamente tal, si no que gracias al software que la interpreta (navegadores Web). Hoy se encuentran disponibles en el mercado una multitud de navegadores (Internet Explorer, Firefox, Safari, Opera y Chrome solo por nombrar algunos), los cuales a pesar de cumplir con los estándares de la W3C, tienen distintos métodos de interpretación de los contenidos descargados de la Web, por lo que es común que una forma de definir una hoja de estilo pueda presentar fallas de compatibilidad en distintos navegadores, un punto al que hay que tener mucho ojo, pues a pesar de que hay navegadores que son preferidos por la mayoría de los usuarios en perjuicio de otro, nuestros sitios Web nunca deberían discriminar a ningún tipo de usuario y deberían estar preparados para todo tipo de eventualidades. 3.- Estilizando en HTML individualmente. La forma más básica de controlar la apariencia de nuestras páginas Web mediante estándares CSS es la estilización individual a nivel de marcas en HTML. Cuando hablamos de marcas o etiquetas, nos referimos a una estructura en particular para definir el contenido que desplegamos en nuestras páginas Web. Como mínimo nuestras páginas siempre deben contener las etiquetas <HTML> <HEAD><TITLE> y <BODY> con sus respectivos cierres </HTML> </HEAD> </TITLE> y </BODY> en los espacios que corresponden. Además, dentro del cuerpo o body de nuestra página Web, podemos utilizar otras marcas para definir contenidos, como es el caso de los <H1> <H2> <H3>, etc para definir encabezados u otras que iremos viendo. Pues bien, a estas etiquetas se les puede aplicar estilización utilizando estándares CSS los cuales solo se aplicarán a todo lo contenido dentro de la etiqueta y no más alla que esta una vez que se cierre. Para que todo quede más claro, veremos un ejemplo: Ejemplo: Definir un estilo para un texto contenido en una etiqueta H1, el cual debe contener texto rojo y letra Arial. Veamos primero si lo hubiésemos hecho con etiquetas estándar de HTML: <html> /* Etiqueta HTML para iniciar el documento */ <head> /* Etiqueta valida para el encabezado de la página*/ <title> Ejemplo 1 </title> /* Etiqueta valida para el título de página */ </head> /* Cerramos la etiqueta para el encabezado */ <body> /* Iniciamos el cuerpo del documento */ <h1><font face=”Arial” color=”#ff0000″>Texto de ejemplo</font></h1> /* Iniciamos el encabezado 1 mediante <h1> y luego ajustamos las propiedades del texto mediante la etiqueta <font>, utilizando face para la tipografía y color para bueno.. el color, el cual es definido en HTML mediante la combinación hexadecimal, para este caso ff0000 para rojo */ </body> /* Cerramos el cuerpo del documento */ </html> /* Cerramos el documento */ Recordemos que en HTML las etiquetas debemos irlas cerrando en el orden en que las abrimos, cerrando primero la última que abrimos. Si bien nosotros creamos este archivo y le damos una extensión .html o .htm y lo ejecutamos en un navegador, obtendríamos el resultado solicitado, lo estaríamos realizando mediante etiquetas HTML lo cual no sería lo apropiado. Ahora veamos si este ejemplo lo realizamos estilizando la marca mediante CSS: <html> <head> <title> Ejemplo 1 </title> <body> <h1 style=”color:#ff0000;font-family:Arial”>Texto de ejemplo</h1> </body> </html> Para visualizar el ejemplo, lo guardamos con extensión .htm o .html y lo abrimos en nuestro navegador. Si nos fijamos, la definición es distinta. Aplicamos una estilización a la marca <h1> mediante el estándar “style” de CSS, definiendo el color (rojo, igual que en el anterior) y la propiedad font family, que se refiere directamente a la tipografía utilizada, en este caso Arial. Este estilo se aplicará a todo lo que este contenido antes de que cerremos la marca de la forma </h1> por lo que si ingresaramos más texto entremedio, también sería en Arial y de color rojo. Esta es la forma correcta de estilizar individualmente una marca HTML. Este método lo podemos aplicar a todas las marcas HTML que lo permitan, por lo que los incentivamos a probar en distintos casos y cambiando parámetros. Tengamos en consideración que este método de estilización sólo se aplicará a la marca en particular y no a otra o al uso de la misma en otras partes de la página, lo cual es bueno si queremos individualizar mucho una marca en particular, pero poco conveniente cuando necesitamos aplicar el mismo estilo a varias partes del documento. 4.- Estilizando en HTML a nivel de página. El método de estilización que veíamos en la lección anterior es bastante sencillo de utilizar. Sin embargo, puede volverse bastante incomodo, ya que si utilizamos una misma marca (por ejemplo <h1> en distintos lugares de nuestra página Web, se vuelve engorroso tener que redefinir el estilo cada vez que lo vayamos a utilizar. Para esto es que existe este segundo método, que es realizar definiciones de estilo a nivel de página en vez de marca, para lo cual realizamos una definición general de una marca al principio del documento y cada vez que la utilicemos contendrá ese estilo por defecto. Para comprender mejor este método, veamos el mismo ejemplo anterior, pero ahora estilicemos a nivel de página: <html> <head> <title> Ejemplo 2 </title> <style type=”text/css”> /* Esta etiqueta es por defecto para definir estilo de tipo CSS */ h1{ color:#ff0000; font-family:Arial; } /* Definimos el estilo para la etiqueta h1 */ </style> /* Cerramos la definición de estilos */ </head> <body> <h1> Texto de ejemplo </h1> <h1> El mismo encabezado con otro texto </h1> </body> </html> Como ahora hemos realizado la definición de estilo a nivel de página no es necesario que incluyamos la definición en la marca. Ahora cada vez que encerremos el texto en etiquetas <h1></h1> se aplicará el estilo definido arriba, sin importar cuantas veces la utilicemos. Como podemos ver, eso nos ahorrará trabajo y no tendremos que preocuparnos de aplicar el estilo individualmente, lo cual es bastante útil, sobretodo si necesitamos actualizar la información con respecto al color o tipo de letra, solo modificamos arriba y se aplicará automáticamente. En la sección de definición de estilos podremos definir muchas marcas, todas las que utilicemos en nuestra página (incluso <body>. Sin embargo tenemos que tener en cuenta que cada instancia de esa marca incluirá ese estilo por defecto. A pesar de lo útil de este método, aun se presenta una problemática importante. ¿Qué pasa cuando queremos aplicar este estilo a muchas páginas que poseemos?. Lamentablemente tenemos que incorporar el código a todas y cada una de ellas, por lo que debemos fijarnos que cada vez que hagamos un cambio, lo realicemos en todos los documentos, lo cual puede ser engorroso. Para esto existe la solución de utilizar un archivo externo, lo que veremos en nuestros próximos números. Por ahora daremos por terminada esta lección, hemos cubierto los contenidos introductorios y fundamentales para entrar de lleno al uso y manipulación de hojas de estilo, en el cual buscamos potenciar lo más posible nuestros sitios Web y utilizar todos los estándares de accesibilidad y usabilidad que existen, para mayor comodidad.

Hola amigos, tratando de sorprenderlos día a día me empeño en poder crear nuevos tutoriales y ayudarlos en adquirir un mayor conocimiento como también desenvolverse dentro de un nuevo tipo de desarrollo. Esta vez será la ocasión de crear un Gadget el cual nos puede servir para una infinidad de cosas dependiendo del uso que le queramos dar, en este caso veremos como hacer uno con alimentacion RSS de los tutoriales que se hacen en CómoLoHago. Partiendo por una cosa, es muy importante recalcar que no hay que ser programador para poder realizar este tuto, pero sí tener harta paciencia para darle al clavo. Los invito a seguir en este entretenido tuto como siempre despues del salto… Cómo hacer un gadget en Windows 7 1. ¿Qué necesitamos? Sistema operativo Windows 7 Aprender un poco de HTML + CSS. Para esto puede recurrir a los siguientes tutoriales Aprender HTML Aprende CSS 2. ¿Cómo lo hago? 1. Manos a la obra, primero a buscar donde tenemos nuestros Gadgets los cuales se encontrarán siempre por default en Archivos de programa>Windows Sidebar>Gadgets. Una vez ubicados en esta carpeta procederemos a crear la carpta contenedora de nuestro futuro Gadget por desarrollar. Es muy importante que la extensión del nombre sea así: NOMBREDEMIGADGET.Gadget 2. Una vez creada nuestra carpeta contenedora necesitaremos algunos archivos indispensables para poder personalisar y a la vez desarrollar: MiGadget.html: Contiene el código principal para los ajustes de color, fondo, letras, links, feeders, etc. <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> <title>ComoLoHago mi primer gadget</title> <!– Para llamar a nuestros Settings.js del gadget –> <script type=”text/javascript” src=”MiGadget.js”></script> <style type=”text/css”> /*/ El cuerpo de nuestro Gadget /*/ body { width: 330px; height: 450px; font-family: verdana; font-weight: lighter; margin:0px; font-size: 10px; overflow-x:hidden; overflow-y:auto; background-color:#333333; scrollbar-face-color:#444444; /*/ Color del cuadro /*/ scrollbar-arrow-color:#999999; /*/ Color de la flecha de nuestro scroll /*/ scrollbar-track-color:#333333; /*/ Color de la vía donde se mueve el scroll /*/ scrollbar-highlight-color:#444444; /*/ Si queremos color desde un ángulo /*/ scrollbar-darkshadow-color:#444444; /*/Color opuesto al lugar al Highlight-Color /*/ scrollbar-shadow-color:#444444; /*/ Si queremos sombra /*/ scrollbar-3dlight-color:#444444; /*/ Si queremos color de luz 3d /*/ } #ContenidoDeMiGadget /*/Aqui se encuentra parte del contenido que se alimentará dentro de nuestro gadget/*/ { width: 318px; margin-left:1px; height:100px; vertical-align: middle; text-align:center; background-color:#333333; } /*/ Este es el codigo especial para poder editar todo dentro del contenido rss /*/ /*/ ya sea colores de letras, colores de fondo, bordes, etc/*/ /*/1-Con esto le indicamos al contenido el ancho que ocupará/*/ .rssxpresschannel { width:318px; font-family: Verdana; } .rssxpresstable {height:200px; width:318px;} /*/2-Con esto le indicamos al subtitulo “Sí se puede, te lo enseñamos” lo que queremos/*/ .rssxpresschdesc {font-size:10px; background-color:#333333; color:99BBFF; font-style:italic;} /*/3-Con esto le indicamos al título “Como Lo Hago” lo que queremos/*/ .rssxpresschtitle {font-size:12px; font-family:Arial; color:#99BBFF; background-color:#333333; background-position:right; background-image:url(logo.png); background-repeat:no-repeat; height:69px; width:88px;margin-top:10px;} /*/4-Con esto le indicamos al título de cada tema lo que queremos/*/ .rssxpressittitle {font-size:10px; margin-right:5px; background-color:#333333; border-top-style:inset; border-top-color:#999999; border-width:thin; } /*/5-Con esto le indicamos a la descripcion de cada contenido lo que queremos/*/ .rssxpressitdesc {font-size:10px; background-color:#333333; color:#FFFFFF; margin-top:5px; margin-bottom:5px; font-weight:lighter; } A:link {text-decoration:none;color:#99BBFF;} A:visited {text-decoration:none;color:#99BBFF;} A:active {text-decoration:none;color:#99BBFF;} A:hover {text-decoration:none;color:#00BBFF;} </style> </head> <b style=”margin-left:210px” style=”color:#555555″>ComoLoHago v1.0</b> <body> <!–Contenido de mi gadget–> <div id=”ContenidoDeMiGadget”> <!–Script alimentador del contenido Rss–> <script src=”http://rssxpress.ukoln.ac.uk/lite/viewer/?rss=http%3A%2F%2Fwww.comolohago.cl%2Ffeed”></script> </div> </body> </html> Settings.html: Contiene el código para los ajustes de nuestro Gadget. <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> <style type=”text/css”> body { /*/ ancho y alto de nuestro menu de ajustes /*/ width:300px; height:250px; } /*/un poco de CSS /*/ #L_settingsTitle { font-family:Arial; font-size:15px; color:#FF0000; } #L_settingsTitleLabel { font-family:Arial; font-size:8px; font-style:italic; color:#000000; } </style> <script type=”text/javascript” src=”MiGadget.js”> </script> </head> <body> <p>Aqui agregan su contenido</p> </body> </html> MiGadget.js: Contiene el código especial para poder tener ajustes en nuestro Gadget. // Importantisimo para poder tener los ajustes de nuestro Gadget System.Gadget.settingsUI = “Settings.html”; System.Gadget.onSettingsClosing = SettingsClosing; Gadget.xml: Contiene el autor, nombre, descripción, ícono, logo. En sí es lo necesario para aparecer en el menú para seleccionar el Gadget. <?xml version=”1.0″ encoding=”utf-8″ ?> <gadget> <name>CómoLoHago – Novedades</name> <version>1.0</version> <author name=”CómoLoHago Team”> <info url=”www.ComoLoHago.cl” /> </author> <copyright>&#169; CómoLoHago 2010</copyright> <description>Novedades acerca de tutoriales nuevos en tu escritorio</description> <icons> <icon height=”48″ width=”48″ src=”icono.png”/> </icons> <hosts> <host name=”sidebar”> <autoscaleDPI>true</autoscaleDPI> <base type=”HTML” apiVersion=”1.0.0″ src=”MiGadget.html” /> <permissions>Full</permissions> <platform minPlatformVersion=”1.0″ /> <defaultImage src=”imagenarrastrada.png”/> </host> </hosts> </gadget> 2. La flecha blanca indica el ícono que aparecerá en el menú de Gadgets. Este ícono (icono.png) se direcciona desde nuestro archivo XML, en este caso Gadget.xml. También podemos agregar otra imagen para cuando arrastremos nuestro Gadget al escritorio (imagenarrastrada.png). 3. Finalmente nos podemos dar cuenta que nuestro Gadget va adquiriendo la forma que le damos con CSS y HTML ademas de las programaciones que cada uno le dé en javascript. Para poder mostrar el contenido RSS, tuve que recurrir a la página http://rssxpress.ukoln.ac.uk/lite/include/?t=1 para obtener el script feeder el cual va inserto en MiGadget.html: Espero les haya gustado, les motive para hacer sus propias creaciones y así poder compartirlas con los demas. Me despido

Volviendo a la vida después de unas extremadamente cortas vacaciones, al llegar a los cuarteles generales de CLH tuve la oportunidad de revisar nuestro siempre lleno buzón de peticiones. A medida que pasaba por los distintos correos, cartas, botellas de bebida vacías y postales que han echado ahí, nos fue posible ver un denominador común en el cual mucha gente nos preguntaba sobre el proceso de creación de sitios Web desde cero. Si bien hemos cubierto distintos aspectos para diseñar sitios Web (como tutoriales de CSS, buenas prácticas y tips o funcionalidades específicas), a la fecha nunca nos habíamos sentado a redactar una guía sobre la base de todo: HTML. Pues bien, hoy daremos comienzo al que esperamos que sea un largo camino de tutoriales en los cuales veremos desde los conceptos más básicos de este lenguaje, pasando por todo lo necesario para poder codificar como un campeón. El detalle, como siempre (o ‘as usual’ para nuestros amigos ángloparlantes), después del salto. Cómo convertirse en un campeón de HTML – Parte 1 Al igual que en otras sagas que hemos hecho en el pasado como “Cómo aprender a programar y no morir en el intento” (la cual ya tendrá una parte 11, lo prometemos, paciencia) o “Cómo dominar CSS sin salir del escritorio” , este primer capítulo contendrá más teoría que práctica, algo que se irá revirtiendo a medida que vayamos avanzando. Sin embargo, intentaremos hacer algo distinto, que es fijar un ejercicio a modo de ejemplo al final de cada tutorial para que vayamos practicando desde el comienzo. Implementos necesarios: Un editor Web o en su defecto bloc de notas (ya entraremos en detalle en esto). Un navegador Web (idealmente más de uno, ya veremos porque). Contenidos: ¿Qué es HTML? Tipos, versiones y sabores. Estructura vs Estilo. Estructura básica de un documento HTML. Editores Web. Ejercicio: Primera página en HTML. Tenemos bastantes contenidos por delante, así que sin más que añadir, manos a la obra: 1.- ¿Qué es HTML? Ahh.. nuestro viejo, querido (y hace poco actualizado) HTML. Si tuvieramos que definir una base estructural para todo lo que hoy vemos en sitios Web sería este lenguaje, y ya podremos ir viendo porque. HTML (Hyper Text Markup Language – Lenguaje de marcas de hipertexto) es un lenguaje utilizado para la creación de documentos Web o páginas. Creado originalmente en la década de los 80 en el CERN (aunque sus primeras versiones vieron la luz recién en los 90), se define como un lenguaje de marcas que busca definir una estructura en los documentos Web que publicamos. Esto se hace mediante la definición de secciones dentro del documento (por eso define estructura), tales como encabezados, títulos, cuerpos, párrafos, etc. Adicionalmente cuenta con una serie de elementos para el ordenamiento correcto de la información como listas y bloques, así como permitir la inserción de elementos multimedia como imágenes, sonidos, animaciones, e incluso herramientas para interactuar con los usuarios como formularios. Uno de los objetivos principales con la definición de este lenguaje, ha sido no solo entregar herramientas para la confección de un documento en particular, sino que también funcionalidades que nos permita enlanzar este documento a otros mediante enlaces, hipervínculos o hipertextos. Desde su primera versión (1.0) hasta la más actual (HTML 5), se han ido incluyendo funcionalidades que permiten a este lenguaje interactuar con cada nueva tecnología Web que ha ido apareciendo a través de los años: desde inserción de hojas de estilo hasta incrustación de lenguajes de programación Web como PHP. Si bien HTML es un lenguaje de estructura y no de programación propiamente tal, cuenta con varios elementos similares que pueden ser reconocidos y facilitan el aprendizaje para quienes conozcan otros lenguajes, como la semántica y la estructura de sus partes, lo que podrá ser apreciado a medida que se van desarrollando nuevos documentos. La base de HTML radica en el uso de etiquetas para definir el inicio y término de una sección de un documento Web en particular. Estas etiquetas encierran el contenido que desplegaremos a través del navegador y cada una de ellas posee atributos y características que hacen que la información se muestre de cierta manera. A medida que vayamos desarrollando ejemplos podremos ver esto de forma más clara. Antes de continuar, es bueno aclarar algunas preguntas frecuentes: 1.- ¿Qué formato tienen los documentos HTML? Principalmente 2, aunque es 1 realmente ya que se trata del mismo. Los documentos HTML (que solo contengan este lenguaje y no otros incrustados) son de formato htm o html, el cual básicamente es el mismo y es reconocido de igual manera por los navegadores. La diferencia radica simplemente en que algunos sistemas operativos y sistemas de archivos más antiguos (como DOS y FAT respectivamente) no permitían extensiones de archivos de más de 3 letras. 2.- ¿Es necesario algún conocimiento previo antes de aprender HTML? No. Si bien siempre ayuda tener conocimientos o nociones de otros lenguajes o del funcionamiento propiamente tal de la Web, no es un requerimiento, ya que es posible aprender y dominar HTML sin haber estudiado nada relacionado anteriormente. En mi caso personal, cuando empecé a diseñar sitios Web hace más de 10 años, HTML fue lo primero que aprendí sin tener ningún otro conocimiento al respecto (con suerte lo que era una URL), por lo que puedo dar fé de que es posible. 3.- ¿Cuál es el nivel de dificultad del lenguaje? Relativamente bajo. Un alto porcentaje de las etiquetas que contiene el lenguaje son prácticamente autoexplicativas, y para las que no, con un poco de práctica y prueba/error basta para dominarlas. Dedicándole un poco de tiempo diario (nunca más de 1 hora), se puede tener un buen entendimiento y dominio del lenguaje en menos de 1 semana. 4.- Tengo mala memoria, ¿debo aprenderme todas las etiquetas? En lo absoluto. HTML cuenta con un gran número de etiquetas, cada una con funcionalidades y atributos distintos, por lo que recordar exactamente cada una es una perdida de espacio en la cabeza. Sin embargo, si bien no es necesario recordarlas al pie de la letra, es esencial saber que hace cada una para tener un entendimiento completo de la estructura de un documento en particular. A medida que vamos tomando más experiencia, nos vamos apoyando en herramientas como editores Web, los cuales mediante interfaces gráficos nos ayudan a codificar de manera más rápida y óptima, dejando la codificación “a mano” para casos más específicos y corrección de errores. 5.- ¿Qué necesito para visualizar un documento HTML? Un navegador Web. Los navegadores actuales están preparados para interpretar todas las etiquetas correspondientes a HTML, a excepción de versiones más antiguas que puedan no reconocer alguna funcionalidad de las versiones más recientes del lenguaje. Hay mucho más que podríamos decir sobre HTML y su historia, pero no es la idea alargarnos en este tema cuando hay tanto aún por delante. A medida que vayamos avanzando iremos viendo uno que otro concepto interesante que pueda servirnos. 2.- Tipos, versiones y sabores Si bien no hay en chocolate, vainilla ni Dr. Pepper, HTML cuenta con varias versiones, tipos y hasta una derivación que ya veremos. Tal como hemos comentado, la primera versión de HTML, la 1.0, vió la luz por allá por los inicios de los 90. A la fecha se han lanzado 4 versiones adicionales, siendo la 5 la más reciente, cada una de las cuales ha añadido nuevos elementos y quitado o depreciado algunos de versiones anteriores. Las adiciones más notables y/o renombradas tienen que ver con la integración de nuevas tecnologías Web que han ido apareciendo desde entonces y las eliminaciones con respecto a un punto que veremos más adelante, que refiere a la definición más estricta de HTML como un lenguaje de estructura de documentos Web y no tanto de estilo. Si bien ya vamos en la versión 5 de HTML, la más utilizada a la fecha sigue siendo la 4.01, ya que la primera fue lanzada hace poco tiempo y aún está en etapa de adaptación e integración por parte de los diseñadores y desarrolladores. Hoy es posible ver sitios en HTML 5, pero corresponden a la minoría, principalmente por lo indicado anteriormente y porque aún gente que posee navegadores más antiguos, los cuales no están preparados para interpretar algunas funcionalidades de la nueva versión. Adicionalmente, existe una derivación del lenguaje, conocido como XHTML, el cual corresponde a una mezcla entre XML y HTML, con lo cual se aplica una variación y se define un lenguaje mucho más estricto con respecto a ciertas reglas, como por ejemplo el cierre correcto de cada sección y el no omitir etiquetas, algo que en HTML a veces es permitido. En próximas ediciones entraremos más en detalle en este tema, ya que por ahora no es necesario y alargaríamos aún más esta primera etapa. 3.- Estructura vs Estilo Si bien es algo temprano para discutir esto, en lo personal lo considero un concepto tremendamente importante a aprender antes de entrar de lleno al lenguaje en sí. Siempre, cuando estamos aprendiendo a dominar una nueva tecnología, es de suma importancia entender cuales son los alcances reales y correctos de esta, especialmente porque es tremendamente común encontrar una serie de malas prácticas definidas que pueden llevarnos a errores más adelante. Cuando HTML fue definido en un comienzo, siempre se pensó como un lenguaje de estructura para documentos Web, tal como lo hemos indicado anteriormente. Sin embargo, a medida que fue pasando el tiempo y los requerimientos comenzaron a evolucionar, se fue haciendo necesario contar con funcionalidades que permitieran estilizar las página para entregarle al usuario una experiencia más agradable. Con esto, se empezó a hacer común el uso de etiquetas como font face para definir el tipo de letra a utilizar en un texto, font color para definir su color o b, i, u para el formato del texto (negrita, cursiva y subrayado respectivamente). A medida que estas etiquetas comenzaban a utilizarse más y más, se comenzó a apreciar que HTML dejaba de ser un lenguaje netamente de estructura y de a poco se convertía en un híbrido que mezclaba tanto la estructura como el estilo del documento, un propósito muy distinto para el que inicialmente se había ideado. Debido a esto es que lenguajes de estilo como CSS comienzan a potenciarse y las etiquetas antes mencionadas a depreciarse y dejar de ser soportadas por nuevos navegadores, devolviendo HTML a su propósito inicial, solamente preocuparse de la estructura y dejar que el estilo lo maneje un lenguaje específico definido para esto. Resumiendo un poco lo anterior, es de suma importancia entender el concepto de lo que es HTML, un lenguaje creado para definir la estructura de documento Web y no su estilo. Es por esto que no debemos esperar o apuntar a utilizar etiquetas que nos ayuden a configurar formatos de visualización o estilos gráficos. Para eso existen otras herramientas y debemos tener claro cual es el alcance y el correcto uso de cada una de ellas. 4.- Estructura básica de un documento HTML Un documento HTML tiene una estructura básica definida por etiquetas (encerradas entre los símbolos < y > para la apertura de una sección y </ y > para el cierre de la misma), cada una de las cuales demarca una sección del mismo: Inicio del documento. Cabecera. Cuerpo del documento. Cierre del documento. Viendo en detalle: a) Inicio del documento: Corresponde a la apertura oficial, donde le indicamos al navegador que se trata de un documento Web en formato HTML, por lo que debe proceder a interpretar las etiquetas para mostrar el contenido en pantalla. Este inicio se marca con la etiqueta <html>. b) Cabecera del documento: Indica toda la información relativa al documento, como su título y opcionalmente librerías externas y/o hojas de estilo que deseemos cargar de forma externa. La cabecera propiamente tal se encierra en las etiquetas <head> y </head>, llevando dentro de ellas como mínimo la correspondiente al título, la cual va entre <title> y </title>. c) Cuerpo del documento: Es la sección principal del documento, en donde incluiremos todo el contenido que se desplegará en pantalla. Corresponde a las etiquetas <body> y </body>. d) Cierre del documento: Tal como lo abrimos, debemos cerrarlo mediante la etiqueta </html>. O sea, un documento básico existe de la siguiente manera: <html> <head> <title>Titulo del documento</title> <body> Contenido del documento </body> </html> Cada documento que creemos es importante guardarlo siempre en su nombre con minúsculas, ya que los navegadores son sensitivos a las mayúsculas y por eso, al momento de enlazar (algo que veremos más adelante) no reconoceran http://www.misitio.com/ejemplo.html si el archivo se llama Ejemplo.html, así que mucho ojo con eso. 5.- Editores Web La gran manzana de la discordia, especialmente entre desarrolladores Web. Años atrás, cuando Netscape e Internet Explorer luchaban por el dominio entre los usuarios, Frontpage era el niño cool del barrio y comparábamos los modems de 33.6k y 54k, la mayoría de los editores Web que hoy conocemos no existían, y los que si estaban disponibles (como el maldito bendito Frontpage) eran bastante rudimentarios de utilizar, con una curva alta de aprendizaje y sin un beneficio real para quienes diseñaban o desarrollaban sitios Web. Es por esto que muchos (incluyéndome) hacían uso del buen y querido bloc de notas para codificar, ya que este permitía hacerlo de forma rápida, guardando en el formato necesario y sin utilizar muchos recursos (algunos luego empezaron a utilizar Word, pero ese ya es otro tema). A medida que pasaron los años, grandes aplicaciones de edición Web comenzaron a aparecer, como es el caso de Dreamweaver, KompoZer, Nvu y Coda por nombrar algunos, los cuales comenzaron a integrar interfaces gráficos realmente amigables y simples de usar, lo que terminó por entregarle la posibilidad a los diseñadores de crear documentos Web de manera rápida y sencilla solo presionando algunos botones. Hoy la oferta es amplia, hay para todo gusto y es algo realmente recomendable de usar, a pesar de que muchos desarrolladores acostumbrados a la época de antaño lo reprueben. Por eso nos tomamos el tiempo de entregar el consejo de buscar un buen editor Web que nos asista en la tarea y tomar provecho de todas las ventajas que nos ofrecen. Sin duda que hacen la tarea más fácil y nos permiten quemar pestañas en interfaces algo más agradables que simples editores de texto. Si la posibilidad está a su alcance, hagan uso de esas herramientas. Asistan su proceso de creación y háganlo lo más sencillo posible, para que se preocupen de lo que realmente importa, que es la confección de buenos sitios y la generación de un aún mejor contenido. Sobre cual elegir en particular, va en cada uno, lo que más nos acomode y esté a nuestro alcance. En lo personal me agrada tanto Dreamweaver para Windows como Coda para Mac. Lamentablemente ámbos tienen un costo bastante elevado, por lo que a veces es mejor optar por alternativas más económicas o de código abierto como Nvu o KompoZer. Lo más importante es encontrar el que mejor sirva para nuestros propósitos. 6.- Ejercicio: Primera página en HTML Y llegamos a la sección con la que esperamos cerrar cada uno de los capítulos. Un pequeño ejercicio que nos sirva para aplicar todo lo que hemos aprendido en esta edición. Hoy veremos la creación de una sencilla primera página en HTML, para poder desplegarla en un navegador y empezar a experimentar a futuro con técnicas más avanzadas. Para eso, abrimos nuestro editor Web favorito (o un editor de texto como bloc de notas) y escribimos el siguiente código, el cual como siempre, va con los comentarios respectivos: // Abrimos el documento <html> // Declaramos la cabecera <head> // Agregamos el título <title>Mi primer documento Web</title> // Cerramos la cabecera </head> // Declaramos el cuerpo <body> // Llenamos con un párrafo <p>Un texto de ejemplo</p> // Cerramos el cuerpo </body> // Cerramos el documento </html> Como pueden ver, utilizamos una nueva etiqueta que no habíamos visto: <p></p>. Esta etiqueta sirve para encerrar un párrafo de texto normal, lo que veremos en detalle en una próxima edición. Por ahora con eso basta. Guardamos el documento con extensión .html y lo abrimos en un navegador para ver el resultado. Y luego de ver toda esta introducción, algo de conceptos y un pequeño ejercicio, damos por terminada la primera edición de esta saga, la cual esperamos sea de utilidad para todos Uds. y que podamos hacer una gran cantidad de números en el futuro, para que podamos ver todo el detalle de este grandioso lenguaje llamado HTML. Por ahora lo dejaremos hasta aquí, recordándoles que siempre es bueno comer chicle para la memoria y no masticar pasas, ya que hace muy mal… o bueno, algo así.

Ayer por la noche dejé grabando un CD mientras veía una película. Apenas terminó de grabar, sonó un mensaje de que el proceso estaba listo por lo que tuve que ponerle pausa a la película, apagar el computador. Con ello pensé que sería de gran utilidad el poder apagar el computador de manera remota, por lo que me puse a investigar y dí con una solución la cual les traigo a continuación. Para ver la solución los invito a ver un video después del salto. Link: http://www.youtube.com/watch?v=akFq7KkInFg&feature=player_embedded Bueno con esto me despido, espero que les haya gustado.

Hola Amigos de Como lo hago.cl Hoy les enseñaré como hacer su propia Lámpara China. Lo único que se requiere es de paciencia y ganas. Esta lámpara sirve para nada lograr un ambiente más ameno o como un excelente regalo. Bueno, menos palabras y más hechos. Los invito a leer después del salto. Como hacer una lámpara China Implementos necesarios: Para este Proyecto necesitaremos lo siguiente: Papel vegetal (Es como el papel mantequilla pero algo más grueso)Palitos para maqueta de 6×6x50 cm (ancho x alto x largo)Pegamento (Colafría u otro)Tip-top (cuchillo corta-cartón)Lija para maderaMolde de alguna letra China Comenzaremos tomando 2 varas de 50cm. y cortándolas por la mitad de tal manera que nos queden 4 varas de 25 cm. cada una. Luego tomamos otras 2 varas de 50cm. y las cortamos en 4 partes iguales, quedándonos así, 8 varas. Les recomiendo lijar un poco las varas ya que al cortar, las caras superior e inferior de las varas quedan con imperfecciones por lo que después de lijar y dejarlas todas del mismo tamaño, estas quedaron de 12cm. Ahora haremos la base superior e inferior de nuestra lámpara. Para ello tomamos las varas pequeñas y procedemos a hacer dos cuadrados. Pegamos con colafría y dejamos que seque bien. Por mientras tomamos las 4 varas de 25 cm. y cortamos 5cm. de madera de cada una. estos trozos pequeños servirán como patas de la lámpara mientras que los trozos de 20cm. restantes nos darán la altura de la lámpara misma. También debemos elegir nuestra letra china. En particular elegí la siguiente letra que significa “alma”. La imprimimos y la calcamos con nuestro papel vegetal. Atención!!! Recuerden de calcar este dibujo en una hoja del tamaño del cuadrado interior y de la altura que quedará entre la base, el cuadrado superior y las varas que dan la altura. En mi caso el papel que use lo recorte en un comienzo de 25cm. de altura y 16cm. de ancho, calcando la figura almedio y así poder recortar el espacio requerido a la hora de pegarlo en el armado de madera. Con ayuda del tip-top, recortamos el contorno de la letra para dar un efecto deseado cuando pongamos dentro de nuestra lámpara una ampolleta o vela. Una vez secos los cuadrados, pegamos las patas en uno de ellos, mientras que en el otro pegamos las varas que nos daran la altura. Una vez seco unimos las piezas y dejamos secar también. Como ven, aproveché de pegar un par de hojas de papel vegetal a los lados. El ancho les recomiendo que lo midan desde dentro y la altura también. En mi caso los papeles de los lados fueron de 11×21cm. mientras que los de las caras frontal y posterior fueron de 12×21cm. Solo falta pegar por la parte interior todas las hojas y listo!! Ponemos una vela dentro y vemos como quedó. Espero que les haya gustado y será hasta la próxima.

Se acerca el dia del niño y Como Lo Hago decidimos hacer un par de cosas para ellos. En esta ocasión vamos a ver como hacer un superheroe de papel para adornar sus repisas y para ponerlos a hacer guardia al regalo principal. Para ver Cómo Lo Hago, vamos después del salto. Agradecimientos a Fernanda Gutiérrez y Nishme Hananias por la ayuda en la realización de este tutorial. Cómo hacer un Superheroe de Papel ¿Qué necesitamos? - Un Corta Cartón o Tijeras - Cinta Adhesiva (recomendable) - Este modelo extraido de Cubeecraft. ¿Cómo Lo Hago? 1.- Con el corta cartón o tijera recortamos cada figura por separado. 2.-Además cortamos las líneas blancas que tiene cada uno, las siguientes: 3.- Para armar las piezas debes insertar los dobleces dentro del correspondiente a cada letra, de la siguiente manera: 4.- Como pueden ver, todos los dobleces van hacia adentro. 5.- Hecho este doblez, se recomienda asegurarlo con cinta adhesiva, fijándose siempre en que no taparán alguna ranura con esta. 6.- Armaremos las partes por separado, dejando el torso (cuerpo) para el final. Primero armaremos los brazos, luego de unir los dobleces como se mostró anteriormente, quedará algo así (me disculpo por el brusco cambio de escenografía entre las fotos, pero tuve que cambiar de lugar durante la realización): 7.- Ahora, la pieza del hombro (el semicírculo) la insertamos así: Fíjense que la parte curva queda hacia el lado de las garras. 8.- Una vez terminados lo brazos, vamos por las piernas. Estas son simples, es solo un pestaña dentro de otra. 9.- Con esto listo, vamos a armar la cabeza, dejando la parte de abajo de esta sin unir al resto, así: 10.- Con esto hecho, vamos a al torso. No hay que armarlo, lo que vamos a hacer es introducir los brazos en las ranuras correspondiente a sus letras, de la siguiente manera: 11.- Luego de introducir los dos brazos, los aseguramos con cinta adhesiva por detrás, así: 12.- Hecho esto, quedará algo como esto: 13.- De la misma manera, introducimos las piernas y las aseguramos. 14.- Ahora, armamos el torso y lo introducimos de igual manera en la parte de la cabeza que dejamos sin unir, así: 15.- Hecho esto, terminamos de armar la cabeza y tenemos nuestro super heroe hecho de papel! Con esto damos por terminado este sencillo tutorial, ideal para el día del niño que ya se acerca. Cualquier duda que puedan tener, los invitamos a dejar un comentario.