YouLoseTheGame

Si corrosiva te cansó con sus post Si tenés frio y no tenes leña Si estás aburrido y no sabés que hacer Si te gusta la ciencia... Este post es perfecto para vos! De lo contrario no sigas bajando por que You Lose se va a enojar... Un saludo enorme para mis amigos cientificos! Ahora sí, listos para la acción? Materiales: Agua en un vaso de vidrio Un gotero Jabón Papel Talco o pimienta Un hilo Procedimiento: Toma un vaso seco, llenalo de agua casi hasta arriba. Con el gotero añádele tantas gotitas como puedas, sin que se derrame. Verás que el agua llegará más arriba del borde (aprox. 0,25 cms.) y esto se debe a la tensión del agua que mantiene las moléculas unidas. A esto le llamamos la "piel" del agua. Por supuesto, el agua no tiene "piel" de verdad, pero tiene una tensión superficial, como lo veras en este experimento. Ahora prueba flotar diferentes objetos sobre esta piel. ¿Qué es lo que queremos hacer? Conseguir que un material arda... al añadirle agua Materiales: Mortero y espátula Tapa de hojalata Cuentagotas Cinc en polvo Nitrato amónico Cloruro amónico Nitrato de bario Agua destilada Cómo lo haremos? En primer lugar prepararemos en el mortero (ayudándonos de la espátula) una mezcla formada por el cinc, el cloruro y los dos nitratos. Cuando ya tengamos preparada esa mezcla, se toma una porción de ella con la espátula y se deposita en la tapa de hojalata dándole la forma de una pequeña montaña. A continuación (y separándonos prudentemente) se añaden unas gotas de agua destilada y se retira el brazo. El resultado obtenido es... Una bonita (aunque inofensiva, si se utilizan pequeñas cantidades) llamarada verde surgirá de la mezcla al explosionar ésta al contactar con el agua. Explicación: El agua lo único que ha producido es el medio acuoso necesario para que las sustancias de la mezcla puedan reaccionar químicamente. Lo hacen y lo hacen violentamente al tratarse de una fuerte reacción de oxidación del cinc por parte de los nitratos de bario y amónico. Estos nitratos se caracterizan por su facilidad para descomponerse y provocar reacciones rápidas de oxidación Todas las precauciones son pocas cuando “jugamos” con el fuego. Es recomendable realizar la experiencia en una campana de gases. Una experiencia similar a ésta es la que puede hacerse con ayuda de glicerina: echando unas gotas de este líquido en una tapa de hojalata, se producirá un fuego de color violeta tras espolvorearlo con una pizca de permanganato potásico. ¿Qué es lo que queremos hacer? Fabricar una espectacular, aunque inofensiva, humareda. Materiales: Un tubo de ensayo Peróxido de benzoilo Anilina ¿Cómo lo haremos? Verter una pequeña cantidad de peroxido de benzoilo y añadir una pequeña porción de anilina. Y a los pocos segundos... El resultado obtenido es... Una espectacular humareda se elevará hasta el techo Explicación: Lo que ha sucedido es una reacción de oxidación a cargo del peróxido de benzoilo. Los productos de la oxidación son los que constituyen la humareda en cuestión. Aunque no entrañe peligro, es recomendable (como en todas las reacciones violentas de oxidación) adoptar las consabidas precauciones en cuanto a distancias, guantes, campana de gases, etc. ¿Qué es lo que queremos hacer? Obligar a unas limaduras de hierro a que dibujen curvas y formas caprichosas Materiales: Imanes Frasco con aceite Limaduras de hierro ¿Cómo lo haremos? Verteremos unas limaduras en el frasco con aceite y agitaremos la mezcla, de manera que –gracias a la viscosidad del líquido- las limaduras queden esparcidas en el seno del aceite. A continuación aproximaremos dos imanes por dos zonas diametralmente opuestas del frasco. Los imanes los acercaremos al frasco por polos opuestos. El resultado obtenido es... Las limaduras se acercarán a las zonas de los imanes y lo harán dibujando una estructura tridimensional que simulará un huso que irá de imán a imán. Explicación: Simplemente hemos fabricado un espectro magnético tridimensional al obligar a las limaduras de hierro –que son imanes temporales- a orientarse según las líneas de fuerza que van de polo a polo de los imanes. Si la aproximación de los imanes al frasco es con los polos idénticos, observaremos que no se forma un huso continuo en el interior del frasco sino que las limaduras se agrupan formando estructuras similares a las fibras de una escoba, quedando sin limaduras el espacio central del frasco. Estas estructuras tienen un aliciente distinto –al ser tridimensionales- a los típicos espectros muy conocidos que se hacen espolvoreando limaduras sobre un papel debajo del cual se sitúa un imán o también dos imanes (estén éstos enfrentados por el mismo polo o no). También podemos conseguir figuras interesantes uniendo varios imanes, en forma de herradura por ejemplo, o simplemente linealmente: en este caso veremos que en la línea de unión de ambos imanes (los polos de cada uno) escasamente se depositan limaduras. Lo que ha sucedido es que hemos fabricado un solo imán con dos polos y no cuatro. ¿Qué es lo que queremos hacer? Conseguir una gama de luces de colores a partir de tres luces monocromáticas. Materiales: Tres retroproyectores (o focos potentes de luz) Tres filtros de papel común de celofán rojo, verde y azul ¿Cómo lo haremos? Se fabrican los filtros pegando cada pliego de papel a tres marcos de cartulina que tengan la superficie de la base del retroproyector y a las que hayamos recortado un círculo interno. Al conectar la lámpara veremos en la pantalla un círculo de luz del color del papel. Se sitúan los tres retroproyectores de manera que sus haces se crucen y sus imágenes se solapen en la pantalla. Se apaga la luz. El resultado obtenido es... En la pantalla nos aparecerán los tres círculos y, además, en las zonas de solapamiento veremos 4 colores más: el amarillo entre el rojo y el verde; el magenta entre el rojo y el azul; el cian entre el azul y el verde y, finalmente, el blanco en la zona central en donde se solapan las tres luces originales. Explicación: Lo que se ha hecho es la síntesis aditiva. Las zonas de solapamiento nos siguen reflejando los colores primarios, pero al llegar “mezclados” a nuestra retina, nos producen la sensación visual de ser unos colores nuevos. La experiencia puede completarse interponiendo cualquier objeto opaco entre la pantalla y las luces: se producirán varias sombras que nos aparecerán también de colores: en cada zona respectiva de cada color primario surgirá la sombra con el color complementario a dicho color. La tonalidad de cada uno de los colores dependerá, lógicamente, del matiz y grado de saturación del papel de celofán que se esté utilizando. Como complemento a esta experiencia puede efectuarse la síntesis sustractiva. Nos hará falta un solo retroproyector y sobre él iremos posando sucesivamente un marco de celofán, otro y otro. Ahora el resultado no será como el anterior sino que obtendremos los típicos colores de la paleta de un pintor. El resultado final al posar los tres papeles será el color negro o, mejor dicho, la ausencia de color. Si la experiencia de la síntesis aditiva se desea sofisticar más, puede hacerse con tres proyectores de diapositivas. En este caso, se utilizan marcos con filtros que tengan una tonalidad de una longitud de onda específica para cada color primario Bueno gente, acá termina el post. Espero que les haya gustado y recomienden para que sus seguidores se enteren de que este post existe y formemos inteligencia colectiva.

Si muchachos, hoy les voy a dejar la segunda parte Para que aprendan a tocar la guitarra de forma facil... para los que no saben que es una guitarra: sinceramente, si no sabias lo que es una guitarra este no es tu post. La Escala Pentatónica El primer paso para adentrarse en la guitarra solista es aprender la escala pentatónica.   Cuando escuchas los solos de gente tan distintas como ACDC, Pink Floyd o B.B. King, por nombrar algunos, estás escuchando fundamentalmente escalas pentatónicas. Son las escalas más sencillas, sólo tienen 5 notas, de ahí su nombre, y también las escalas a las que más rápidamente sacarás provecho. En poco tiempo podrás empezar a improvisar tus propios solos. Lo primero que tenemos que hacer es memorizar el siguiente esquema. La línea superior representa la primera cuerda, y la línea inferior representa la sexta cuerda. El número dentro de cada círculo nos indica con qué dedo debemos tocar cada nota. El “1” corresponde al dedo índice, el “3” al anular y el “4” al meñique. La nota marcada en negro es la nota tónica. Es la que nos dice en que tonalidad vamos a tocar la escala. Es muy importante que te fijes en ella. Pentatónica Aprender cada clase requiere de tiempo y paciencia, recomiendo que aprendas bién estas cosas antes de pasar al siguiente paso. Escala pentatónica lección 1 Escala pentatónica lección 2 Escala pentatónica lección 3 Escala pentatónica lección 4 Escala pentatónica lección 5 Escala pentatónica lección 6 Escala pentatónica lección 7 Escala pentatónica lección 8 Como tocar - Hey Joe - Jimi Hendrix Escala pentatónica. bueno muchachos, eso fue todo. Sé que no es facil aprender la guitarra pero tiempo al tiempo. Y si no aprendiste ni un poquito recomendalo que alguien puede aprender.

Clases de Guitarra 1: Palm Muting MANO DERECHA - Relajada. - Lateral apoyado sobre el puente de la guitarra (al comienzo de las cuerdas) - Golpe de púa tocando sólo la cuarta y quinta cuerda. (Se numeran de abajo hacia arriba) - Alternar los golpes de pua tapando/destapando con el lateral de la mano MANO IZQUIERDA - Relajada - Dedo pulgar apuntando al techo. - Resto de dedos perpendiculares al mástil y colocados pegados a los trastes (barritas metálicas) por su lado izquierdo. Clases de Guitarra 2: Shuffle blues regla general para todo lo que quieras aprender a tocar: Toca despacio y no aumentes la velocidad hasta que no te suene perfecto. Si aumentas la velocidad confiando en que poco a poco sonará mejor, te equivocas. Conseguirás crear malos hábitos, que te costará quitar. PRIMERO debe sonar bien, y LUEGO podrás aumentar la velocidad. La técnica tapar/destapar, de la mano derecha se conoce como "PALM MUTTING" Clases de Guitarra: "cuartas" Deep Purple "Cuartas": Smoke on the water Para tocar "cuartas" simplemente hay que pulsar una cuerda en un traste y simultáneamente la cuerda de abajo en el mismo traste. Eso es una cuarta. Se pulsan ambas cuerdas con el mismo dedo, y con la púa se tocan sólo las dos cuerdas que nos interesan. El mejor ejemplo del uso de cuartas... El Smoke on the Water de Deep Purple... Highway to Hell El LA el RE y el SOL, como nunca antes te los habían explicado. Angus es mucho Angus. Fíjate que no suenan todas las cuerdas. La técnica de la guitarra eléctrica, es muy distinta a la de la española. Cuando la guitarra está distorsionada, es muy importante tapar las cuerdas que no se van a tocar. Si no se tapan, y se dejan al aire, se producen acoples y "otros ruidos", que hacen que el conjunto suene a leches. Las cuerdas que no van a sonar se pueden tapar de dos maneras: con la mano derecha (palm muting) o bien con la mano izquierda, apoyando los dedos sobre las cuerdas y sólo haciendo fuerza con la yema en el traste que queremos tocar. El resto del dedo simplemente se apoya sobre las otras cuerdas, apagándoals. Ritmo Básico Ritmo Básico En este video se ven los tres primeros acordes que se suelen aprender, y un ritmo para la mano derecha. Te recomiendo que descargues el manual de acordes. Allí encontrarás los esquemas de los acordes básicos, algunos consejillos y un poco de teoría, que servirán de base para futuros vídeos. Recuerda que en el acorde de Re no debes tocar la sexta cuerda. Como interpretar tablaturas Dificultad 2 Round 1... fight! Acordes La idea es no tener que aprenderse los acordes, sino saber cómo se construyen, para que cuando nos topemos con uno que no hayamos puesto nunca, saber ponerlo sólo con ver su nombre. Parte 2 Tapping La técnica en cuestión consiste en usar los dedos de la mano derecha para hacer hammer on, es decir, golpear directamente sobre el mástil. De esta manera se consigue tocar notas muy rápido. Normalmente se suele utilizar con distorsión, y un compresor también ayuda bastante. Es importante la "limpieza", es decir, prestar atención a las cuerdas que no estás tocando. Taparlas y evitar que metan ruido de fondo. Por eso, una puerta de ruido también puede ser interesante... Nivel: Experto ... fight! Black Dog - Led Zeppelin Hey Joe - Jimi Hendrix Escala Pentatónica y Modos bueno muchachos, eso fue todo. Sé que no es facil aprender la guitarra pero tiempo al tiempo. Y si no aprendiste ni un poquito recomendalo que alguien puede aprender.

Clases de Guitarra 1: Palm Muting MANO DERECHA - Relajada. - Lateral apoyado sobre el puente de la guitarra (al comienzo de las cuerdas) - Golpe de púa tocando sólo la cuarta y quinta cuerda. (Se numeran de abajo hacia arriba) - Alternar los golpes de pua tapando/destapando con el lateral de la mano MANO IZQUIERDA - Relajada - Dedo pulgar apuntando al techo. - Resto de dedos perpendiculares al mástil y colocados pegados a los trastes (barritas metálicas) por su lado izquierdo. Clases de Guitarra 2: Shuffle blues regla general para todo lo que quieras aprender a tocar: Toca despacio y no aumentes la velocidad hasta que no te suene perfecto. Si aumentas la velocidad confiando en que poco a poco sonará mejor, te equivocas. Conseguirás crear malos hábitos, que te costará quitar. PRIMERO debe sonar bien, y LUEGO podrás aumentar la velocidad. La técnica tapar/destapar, de la mano derecha se conoce como "PALM MUTTING" Clases de Guitarra: "cuartas" Deep Purple "Cuartas": Smoke on the water Para tocar "cuartas" simplemente hay que pulsar una cuerda en un traste y simultáneamente la cuerda de abajo en el mismo traste. Eso es una cuarta. Se pulsan ambas cuerdas con el mismo dedo, y con la púa se tocan sólo las dos cuerdas que nos interesan. El mejor ejemplo del uso de cuartas... El Smoke on the Water de Deep Purple... Highway to Hell El LA el RE y el SOL, como nunca antes te los habían explicado. Angus es mucho Angus. Fíjate que no suenan todas las cuerdas. La técnica de la guitarra eléctrica, es muy distinta a la de la española. Cuando la guitarra está distorsionada, es muy importante tapar las cuerdas que no se van a tocar. Si no se tapan, y se dejan al aire, se producen acoples y "otros ruidos", que hacen que el conjunto suene a leches. Las cuerdas que no van a sonar se pueden tapar de dos maneras: con la mano derecha (palm muting) o bien con la mano izquierda, apoyando los dedos sobre las cuerdas y sólo haciendo fuerza con la yema en el traste que queremos tocar. El resto del dedo simplemente se apoya sobre las otras cuerdas, apagándoals. Ritmo Básico Ritmo Básico En este video se ven los tres primeros acordes que se suelen aprender, y un ritmo para la mano derecha. Te recomiendo que descargues el manual de acordes . Allí encontrarás los esquemas de los acordes básicos, algunos consejillos y un poco de teoría, que servirán de base para futuros vídeos. Recuerda que en el acorde de Re no debes tocar la sexta cuerda. Como interpretar tablaturas Dificultad 2 Round 1... fight! Acordes La idea es no tener que aprenderse los acordes, sino saber cómo se construyen, para que cuando nos topemos con uno que no hayamos puesto nunca, saber ponerlo sólo con ver su nombre. Parte 2 Tapping La técnica en cuestión consiste en usar los dedos de la mano derecha para hacer hammer on, es decir, golpear directamente sobre el mástil. De esta manera se consigue tocar notas muy rápido. Normalmente se suele utilizar con distorsión, y un compresor también ayuda bastante. Es importante la "limpieza", es decir, prestar atención a las cuerdas que no estás tocando. Taparlas y evitar que metan ruido de fondo. Por eso, una puerta de ruido también puede ser interesante... Nivel: Experto ... fight! Black Dog - Led Zeppelin Hey Joe - Jimi Hendrix Escala Pentatónica y Modos La Escala Pentatónica El primer paso para adentrarse en la guitarra solista es aprender la escala pentatónica. Cuando escuchas los solos de gente tan distintas como ACDC, Pink Floyd o B.B. King, por nombrar algunos, estás escuchando fundamentalmente escalas pentatónicas. Son las escalas más sencillas, sólo tienen 5 notas, de ahí su nombre, y también las escalas a las que más rápidamente sacarás provecho. En poco tiempo podrás empezar a improvisar tus propios solos. Lo primero que tenemos que hacer es memorizar el siguiente esquema. La línea superior representa la primera cuerda, y la línea inferior representa la sexta cuerda. El número dentro de cada círculo nos indica con qué dedo debemos tocar cada nota. El “1” corresponde al dedo índice, el “3” al anular y el “4” al meñique. La nota marcada en negro es la nota tónica. Es la que nos dice en que tonalidad vamos a tocar la escala. Es muy importante que te fijes en ella. Pentatónica Aprender cada clase requiere de tiempo y paciencia, recomiendo que aprendas bién estas cosas antes de pasar al siguiente paso. Escala pentatónica lección 1 Escala pentatónica lección 2 Escala pentatónica lección 3 Escala pentatónica lección 4 Escala pentatónica lección 5 Escala pentatónica lección 6 Escala pentatónica lección 7 Escala pentatónica lección 8 Como tocar - Hey Joe - Jimi Hendrix Escala pentatónica. bueno muchachos, eso fue todo. Sé que no es facil aprender la guitarra pero tiempo al tiempo. Y si no aprendiste ni un poquito recomendalo que alguien puede aprender.

Este breve tutorial está pensado para aquellas personas que quieren comenzar a utilizar CSS y nunca han escrito una hoja de estilos CSS. No explica mucho sobre CSS. Se centra en cómo crear un archivo HTML, un archivo CSS y cómo hacer que los dos funcionen juntos. Las secciones como ésta son opcionales. Contienen explicaciones adicionales del código HTML y CSS del ejemplo. El símbolo de “peligro”, situado al principio, indica que se trata de un material más avanzado que el resto. PASO 1: Escribir el código HTML Para este tutorial, te sugiero que utilices las herramientas más sencillas. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, serán suficiente. Una vez comprendido lo básico, probablemente se quieran utilizar herramientas más complicadas, o incluso programas comerciales como Style Master, Dreamweaver o GoLive. Pero para el desarrollo de una primera hoja de estilos, es mejor no distraerse con características avanzadas de otras herramientas. No utilices procesadores de texto como Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que los navegadores no pueden interpretar. Para HTML y CSS, lo único que necesitamos son archivos en texto plano. El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), comenzar con una ventana vacía y escribir lo siguiente: dijo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Mi primera página con estilo</title> </head> <body> <!-- Menú de navegación del sitio --> <ul class="navbar"> <li><a href="indice.html">Página principal</a> <li><a href="meditaciones.html">Meditaciones</a> <li><a href="ciudad.html">Mi ciudad</a> <li><a href="enlaces.html">Enlaces</a> </ul> <!-- Contenido principal --> <h1>Mi primera página con estilo</h1> <p>¡Bienvenido a mi primera página con estilo! <p>No tiene imágenes, pero tiene estilo. También tiene enlaces, aunque no te lleven a ningún sitio… <p>Debería haber más cosas aquí, pero todavía no sé qué poner. <!-- Firma y fecha de la página, ¡sólo por cortesía! --> <address>Creada el 5 de abril de 2004<br> por mí mismo.</address> </body> </html> En realidad, no es necesario escribir el código: puedes copiarlo y pegarlo directamente en un editor. La primera línea que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE significa DOCument TYPE - en español: TIPO de DOCumento). En este caso, se trata de la versión 4.01 de HTML. Las palabras que se encuentran entre < y > se llaman etiquetas (tags) y, como puedes ver, el documento está entre las etiquetas <html> y </html>. Entre <head> y </head> hay espacio para diferentes tipos de información que no aparecerán en la pantalla. Hasta ahora, el documento sólo contiene el título pero posteriormente también se añadirá la hoja de estilos de CSS. El <body> es dónde se sitúa el texto del documento. En un principio, cualquier cosa que se coloque ahí será mostrado, excepto el texto que esté dentro de las siguientes etiquetas <!-- y -->, las cuales muestran el contenido situado en ese lugar como un comentario de referencia para nosotros mismos. El navegador la ignorará. De las etiquetas del ejemplo, <ul> crea una “lista desordenada”, es decir, una lista en la cual los elementos no están numerados. La etiqueta <li> indica el comienzo de un “elemento lista”. <p> es un “párrafo”. Y <a> es un “enlace”, que es lo que crea un hipervínculo. (recomiendo sacar nota) Editor mostrando el código HTML. - “ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará nuestro “menú de navegación del sitio” con enlaces a otras páginas (ficticias) del sitio Web. Supuestamente, todas las páginas de nuestro sitio Web tienen un menú similar. - Los elementos “h1” y “p” componen el único contenido de esta página, mientras que la firma al final (“address”) será la misma para todas las páginas del sitio. Observa que no he cerrado los elementos "li" y "p". En HTML (pero no en XHTML), se pueden omitir las etiquetas </li> y </p>, que fue lo que hice aquí, precisamente para hacer el texto más sencillo de leer. Pero si se prefiere pueden ser añadidas. Vamos a suponer que va a ser una página de un sitio Web que tendrán varias páginas similares. Como es frecuente en páginas Web, ésta tiene un menú con enlaces a otras páginas en el sitio ficticio, un contenido único y una firma. Ahora, selecciona “Guardar como…” del menú Archivo, ve hasta un directorio/carpeta donde quieras guardar el documento (el escritorio puede ser una opción) y guarda el archivo como “mipagina.html”. No cierres todavía el editor, lo necesitarás otra vez. Después, abre el archivo en un navegador de la siguiente forma: encuentra el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) y haz clic, o doble clic, sobre el archivo “mipagina.html”. El archivo HTML debería abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo sobre él). Como puedes ver, la página tiene un aspecto bastante aburrido... PASO 2: Añadir algunos colores. Probablemente estés viendo texto negro sobre un fondo blando, pero esto depende de cómo esté tu navegador configurado. Para que la página tenga algo más de encanto podemos añadir algunos colores. (Deja el navegador abierto, lo utilizaremos más tarde). Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante, pondremos el HTML y el CSS en archivos diferentes. La separación de estos archivos es recomendable ya que facilita la utilización de la misma hoja de estilo para diferentes archivos HTML: sólo tienes que escribir la hoja de estilo una vez. Pero en este paso, vamos a dejarlo todo en el mismo archivo. Necesitamos añadir un elemento <style> en el archivo HTML. La hoja de estilo estará en el interior de ese elemento. Volvamos entonces a la ventana del editor y añadamos las siguientes cinco líneas en la parte de la cabecera del archivo: dijo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Mi primera página con estilo</title> <style type="text/css"> body { color: purple; background-color: #d8da3d } </style> </head> <body> [etc.] Las líneas que tienes que añadir están marcadas en rojo. La primera línea dice que eso es una hoja de estilo y que está escrita en CSS ("text/css". La segunda línea indica que hemos añadido estilo al elemento "body". La tercera línea establece el color del texto como morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso. Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes: 1- el selector (en el ejemplo sería: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la regla; 2- la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse; 3- y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad. El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades, por lo que podemos tener dos reglas separadas: dijo:body { color: purple } body { background-color: #d8da3d } ya que las dos reglas van a afectar al elemento body, sólo tenemos que escribir "body" una vez, y poner juntas las propiedades y valores. El fondo del elemento body será el fondo para todo el documento. A los otros elementos (p, li, address…) no se les ha dado ningún fondo en concreto, por lo que de forma predeterminada no tendrán ninguno (o serán transparentes). La propiedad 'color' establece el color del texto que se encuentra en el elemento body, pero los otros elementos que se encuentran dentro de body heredarán ese color, a no ser que se especifique lo contrario. (Más adelante añadiremos más colores). Ahora guarda el archivo (utiliza “Guardar” del menú Archivo) y vuelve a la ventana del navegador. Si haces clic en "Actualizar", la página "aburrida" que se mostraba al principio, pasará a ser una página con colores (pero aún sigue siendo muy aburrida). Aparte de la lista de enlaces que se encuentra al principio, el texto debería tener ahora el color morado sobre un fondo de color amarillo verdoso. Presentación de la página en el navegador tras añadirle colores. Los colores pueden especificarse en la CSS de formas diferentes. El siguiente ejemplo muestra dos de ellas: por el nombre (“purple”) y por el código hexadecimal (“#d8da3d”). Hay aproximadamente 140 nombres de colores y más de 16 millones de colores disponibles en código hexadecimal. PASO 3: Añadir tipo de letra. Otra cosa que es muy fácil de hacer es añadir diferentes tipos de letra para los diversos elementos de la página. Veamos el texto con el tipo de letra “Georgia”, excepto la cabecera h1, que irá con “Helvetica”. En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif. Añade en el editor de texto las siguientes líneas: dijo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Mi primera página con estilo</title> <style type="text/css"> body { font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> </head> <body> [etc.] Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberían aparecer tipos de letra diferentes para el encabezado y para el otro texto. Ahora el texto tiene un tipo de letra diferente al del encabezado. PASO 4: Añadir una barra de navegación. La lista que aparece al principio de la página HTML será más adelante un menú de navegación. Algunos sitios Web tienen un menú al principio o en un lado de la página, y éste debería tenerlo también. Pondremos uno a la izquierda, ya que es más interesante ponerlo ahí que arriba… El menú ya está en la página HTML. Es la lista <ul> que se encuentra al principio. Los enlaces que tiene no funcionan ya que nuestro "sitio Web", hasta el momento, sólo tiene una página, pero eso no es importante ahora. Por supuesto, en un sitio Web real no debería haber ningún enlace roto. Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la derecha, para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son 'padding-left' (para mover el texto del elemento body) y 'position' (para mover el menú). Hay otras formas de hacerlo. Si buscas “column” y “layout” en la página Aprender CSS, encontrarás algunas plantillas listas para ser utilizadas. Pero, por el momento, ésta está bien. En la ventana del editor, añade las siguientes líneas al archivo HTML: dijo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Mi primera página con estilo</title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> </head> <body> [etc.] Si guardas otra vez el archivo y lo actualizas en el navegador, deberías tener la lista de enlaces a la izquierda del texto principal. Ahora el resultado parece mucho más interesante. El texto principal se ha movido hacia la derecha y la lista de enlaces está ahora a la izquierda en lugar de estar arriba. 'position: absolute' indica que el elemento ul está situado independientemente de cualquier texto que esté antes o después en el documento. 'left' y 'top' indican cuál es la posición. En este caso, está a 2em de la parte de arriba de la ventana y a 1em del lado izquierdo. '2em' significa 2 veces el tamaño del tipo de letra actual. Por ejemplo, si el menú se muestra con un tipo de letra de 12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy útil en CSS ya que se puede adaptar automáticamente al tipo de letra que el usuario esté utilizando. La mayoría de los navegadores tienen un menú para aumentar o disminuir el tamaño de letra: puedes probarlo y ver la forma en la que el menú aumenta de tamaño a la vez que lo hace el tipo de letra, lo que no ocurriría si hubiéramos utilizado un tamaño en píxeles. PASO 5: Dar estilo a los enlaces. El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su aspecto. Quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la izquierda, donde estaban antes los puntos. También le daremos a cada elemento un fondo blanco y un cuadrado negro. (¿Por qué? Por nada en particular, sólo porque podemos hacerlo). No hemos especificado el color de los enlaces, vamos a añadirlo también: utilizaremos el azul para aquellos enlaces que el usuario no ha visitado todavía, y morado para los enlaces que ya ha visitado: dijo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Mi primera página con estilo</title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } </style> </head> <body> [etc.] Normalmente, los navegadores muestran los hipervínculos subrayados y con color. Los colores son parecidos a los que especificamos aquí: azul para enlaces a páginas que no has visitado todavía (o visitaste hace mucho tiempo), morado para páginas que ya has visitado. En HTML, los hipervínculos se crean con elementos <a>, por lo que para especificar el color, necesitamos añadir una regla de estilo para "a". Para diferenciar los enlaces visitados de los no visitados, CSS proporciona dos "pseudo-classes" (:link y :visited). Se llaman “pseudo-classes” para distinguirlas de los atributos de clase, que aparecen directamente en HTML, por ejemplo, class="navbar". PASO 6: Añadir una linea horizontal. El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea punteada encima del elemento <address>: dijo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Mi primera página con estilo</title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } </style> </head> <body> [etc.] Ahora, ya hemos terminado de darle estilo a la página. Lo siguiente es ver cómo se pone la hoja de estilo en un archivo diferente para que de esta forma otras páginas puedan utilizar el mismo estilo. PASO 7: poner la hoja de estilo en un archivo separado. Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio crece desearemos añadir más páginas que compartan el mismo estilo. Hay un método más adecuado que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de estilo en un archivo separado, haciendo que todas las páginas estén enlazadas a esa hoja. Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto, que esté vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una ventana vacía. Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del archivo HTML. No copies las etiquetas <style> y </style>. Éstas pertenecen a HTML, no a CSS. En la nueva ventana del editor, deberías tener la hoja de estilo completa: dijo:body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } lige “Guardar como…” del menú Archivo, comprueba que está en el mismo directorio/carpeta que el archivo mipagina.html, y guarda la hoja de estilo como “miestilo.css”. Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta <style> hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la siguiente forma: dijo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Mi primera página con estilo</title> <link rel="stylesheet" href="miestilo.css"> </head> <body> [etc.] De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en el que se encuentra el archivo HTML. Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo externo. Resultado final El siguiente paso es poner ambos archivos, mipagina.html y miestilo.css, en su sitio Web. (Quizá queráis primero cambiarlos un poco…), pero la forma de realizar esto depende de su proveedor de Internet. Eso fue todo, espero que hayan aprendido algo.

@YouLoseTheGame dijo:todos saben el problema que está sufriendo taringa en este momento. El tema ha revolucionado taringa en estos últimos días, pero Obama (actual presidente de EE.UU) comentó sobre la web como todo buén taringuero (? Ahora sí, el video que Obama opina.. VER EL VIDEO ES FUNDAMENTAL PARA ENTENDER EL POST! aclaro, la traducción de este video fué hecha por mí y si te fijás bién tiene certificación Espero que les haya gustado ya que me dio trabajo poder hacer este video. cualquier usuario nombrado en este post pudo ser vos, tal vez tengas suerte para la proxima... @YouLoseTheGame

Este post va dedicado a nuestro querido y conocido user @sodes Quién con mucha paciencia hace post para que todos nos riamos y pasemos un buén momento. Llegó la hora de que al fín sea un personaje en estos videos. Disfruten del post. Personajes@sodes @solcitosol19 @YouLoseTheGame ahora si el vidéo. eso fue todo, espero que les haya gustado ya que me costó bastante hacerlo. seguramente haga segunda parte y tal vez use otros usuarios, ese usuario podés ser vos... Les dejo el video original de la pelicula por si lo quieren ver. I am the number 4