Los días de la semana son:

• Lunes
• Martes
• Miércoles
• Jueves, etc.

Existen dos tipos de listas: las listas numeradas y las listas con viñetas. La diferencia entre ambas es que la lista numerada indica sus elementos por números o letras, mientras que la lista de viñetas usa símbolos. En HTML se acostumbra llamar lista ordenada y lista desordenada a la lista numerada y lista de viñetas respectivamente. Eso como traducción de su nombre en inglés.

Listas ordenadas (numeradas) <ol></ol> y listas desordenadas (de viñetas) <ul></ul>

Las etiquetas para estas listas provienen de sus nombres en inglés. Para las listas ordenadas ol (de ordened list) y para las listas desordenadas ul (de unordened list).

Elementos de las listas <li></li>

Si haces la prueba y escribes un código como este:

1
2
3
4
5

<ol>
Lunes
Martes
Miercoles
</ol>

verás que el resultado no es una lista sino una línea continua. Esto se debe a que las etiquetas ol y ul solo indican el tipo de lista, su inicio y su final. Pero las listas tienen elementos, y estos elementos deben especificarse con la etiqueta li (de list item). Cada elemento debe encerrarse entre esas etiquetas. Por lo tanto, el código correcto para el ejemplo anterior sería:

1
2
3
4
5

<ol>
<li>Lunes</li>
<li>Martes</li>
<li>Miercoles</li>
</ol>

Y su resultado:

1. Lunes
2. Martes
3. Miercoles

Para una lista desordenada:

1
2
3
4
5

<ul>
<li>Lunes</li>
<li>Martes</li>
<li>Miercoles</li>
</ul>

Y su resultado:

• Lunes
• Martes
• Miercoles

Como habrás notado, una lista ordenada y una desordenada se diferencian en su código solo cambiando ol por ul pues en su interior son iguales (la etiqueta li se usa de la misma forma en ambos tipos de lista).

Listas anidadas

Una lista anidada es la que tiene subniveles. Como esta:

• Lunes
  • 8:00 am
    • Visitar al gerente
    • Mostrarle el contrato
  • 12:00 pm
    • Almuerzo con los clientes
• Martes
  • Cumpleaños del jefe
• Miercoles
  • Lanzamiento del nuevo producto

La manera de escribir el código para las listas anidadas es bastante sencillo, pero eso sí, requier tener el ojo atento porque es sencillo confundirse al inicio por todas las etiquetas que deben escribirse. El proceso es bastante lógico.

Si quiero tener subníveles, estos deben conformar una lista interna. Ahora bien, los subníveles son internos no a la lista principal completa, sino a un elemento de ella. Por lo tanto, las listas internas deben crearse dentro de un elemento li.

Veamos un ejemplo. Tengo la siguiente lista desordenada de dos elementos:

1
2
3
4

<ul>
<li>Lunes</li>
<li>Martes</li>
</ul>

Ahora, como en el ejemplo anterior, quiero introducir dos horas (8:00 am y 12:00 pm) dentro del elemento lunes. Para eso debo crear otra lista con dichos elementos:

1
2
3
4

<ul>
<li>8:00 am</li>
<li>12:00 pm</li>
</ul>

Y por último, debo introducir esta segunda lista como interna al elemento lunes. Para eso, coloco todo el código anterior después del contenido del elemento superior (después de la palabra lunes en este caso) pero antes del la etiqueta li de cierre. Fíjate:

1
2
3
4
5
6
7
8

<ul>
<li>Lunes
<!--Aqui debe ir tu lista interior, he puesto un salto de linea
para que sea mas sencillo de visualizar. Fijate que la etiqueta
de cierre queda al final-->
</li>
<li>Martes</li>
</ul>

Ahora anidemos una lista dentro de la otra:

1
2
3
4
5
6
7
8
9

<ul>
<li>Lunes
    <ul>
    <li>8:00 am</li>
    <li>12:00 pm</li>
    </ul>
</li>
<li>Martes</li>
</ul>

Y el resultado será:

• Lunes
  • 8:00 am
  • 12:00 pm
• Martes

Se pueden seguir añadiendo subniveles, usando el mismo principio. Pero como dije, ojos bien abiertos porque puedes enredarte entre tantas etiquetas. Te sugiero saltos de línea y tabulaciones para distinguir mejor el código. Este sería el código final para la lista anidada que usé como ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<ul>
<li>Lunes
    <ul>
    <li>8:00 am
        <ul>
        <li>Visitar al gerente</li>
        <li>Mostrarle el contrato</li>
        </ul>
    </li>
    <li>12:00 pm
         <ul>
         <li>Almuerzo con los clientes</li>
         </ul>
     </li>
     </ul>
</li>
<li>Martes
    <ul>
    <li>Cumpleaños del jefe</li>
    </ul>
</li>
<li>Miercoles
    <ul>
    <li>Lanzamiento del nuevo producto</li>
    </ul>
</li>
</ul>

Las tabulaciones son los espacios que se corre un código hacia la derecha. Se usan para indicar que un elemento está contenido en otro. No son obligatorios, pero facilitan mucho la lectura del código.

Además, las listas anidadas pueden combinar listas ordenadas y desordenadas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul>
<li>Lunes
    <ol>
    <li>8:00 am
        <ol>
        <li>Visitar al gerente</li>
        <li>Mostrarle el contrato</li>
        </ol>
    </li>
    <li>12:00 pm
         <ul>
         <li>Almuerzo con los clientes</li>
         </ul>
     </li>
     </ol>
</li>
</ul>

Y su resultado:

• Lunes
  1. 8:00 am
     1. Visitar al gerente
     2. Mostrarle el contrato
  2. 12:00 pm
     • Almuerzo con los clientes

En el próximo capítulo enseñaré a darle formato a las listas y manipularlas a nuestro antojo.

Si este artículo te gustó también puedes leer:

• Curso básico de HTML: 5 – Aplicar formato usando etiquetas (1 comentarios)
• Curso básico de HTML: 4 – El atributo “style” (2 comentarios)
• Curso básico de HTML: 3 – Atributos y valores (1 comentarios)
• Curso básico de HTML: 2 – Etiquetas básicas (1 comentarios)
• Curso básico de HTML 1 – Introducción a HTML (1 comentarios)

Bueno, volvamos a lo nuestro. El atributo style es genial para aplicar formatos como color, alineación, tamaño, etc. Sin embargo, a veces es bastante largo de escribir si lo que queremos es algo muy específico. Por ejemplo, si dentro de un párrafo queremos que solo una palabra esté subrayada, el método correcto sería:

1
2

<p>Este es un parrafo en el cual la palabra
que estara subrayada es <span style="text-decoration:underline">esta</span></p>

Debes haber notado una etiqueta nueva que no habíamos visto: span. Te cuento que la etiqueta span se usa para aplicar estilos a fragmentos de texto a los que no podríamos acceder de otra forma. Por ejemplo, si quiero poner en negrita solo una palabra, como esta, no puedo aplicar estilos al párrafo que la contiene, sino que debo tener una forma de separar solo esa palabra (a veces una letra o un grupo de letras) del párrafo para darel formato. En esos casos se usa la etiqueta span.

Sin embargo, sigue viéndose muy extenso escribir span y luego incluir los estilos solo para una palabra o una letra. En esos casos podemos apoyarnos en las etiquetas de formato. Sí, ya sé que he dicho que el formato se aplica con estilos, no con atributos ni etiquetas. Pero estas etiquetas en particular son ampliamente usadas y dudo mucho que queden obsoletas, incluso en años. Veamos:

Negrita <b></b> o <strong></strong>

Como lo dice el título, cualquiera de esas dos etiquetas puede usarse para  aplicar negrita; la etiqueta b (de bold, negrita en inglés) o la etiqueta strong (fuerte en inglés).

1
2

<b>Esta frase esta en negrita</b><br />
<strong>Y esta otra tambien</strong>

Cursiva <i></i> o <em></em>

En este caso, pueden usarse la etiqueta i (de italic, cursiva en inglés) o em (de emphasis, énfasis en inglés)

1
2

<i>Esta frase esta en cursiva</i><br />
<em>Y esta otra tambien</em>

Subrayado <u></u>

En este caso se usa la etiqueta de dos lados u (de underline, subrayado en inglés).

1

<u>Esta frase esta subrayada</u>

Superíndice y subíndice:  y 

El superíndice consiste en hacer pequeña la letra y elevarla sobre la base. El subíndice consiste en hacer pequeña la letra y bajarla de la línea de base. Por ejemplo:

En esta fórmula, los exponentes son superíndices:

x²-y² = 4

En esta fórmula, vemos subíndices:

O₂ + H₂ = H₂O

1
2

<p>Para elevar equis al cuadrado usamos un superindice: x<sup>2</sup><br />
Y para escribir la formula del agua usamos un subindice: H<sub>2</sub>O</p>

Cita textual <blockquote></blockquote>

Cuando copiamos un fragmento de un texto ajeno, es necsario indicar que se trata de una cita. En HTML, la etiqueta blockquote cumple esta función. Lo que hace es sangrar el texto hacia la derecha.

1
2

<blockquote>I have a dream. <br />
Martir Luther King</blockquote>

Tachado <del></del>

Se usa para tachar un texto con una línea horizontal. Suele ser útil cuando se cambia un texto y no se quiere eliminar el original para que los visitantes a la web. Como decir que  renunció botaron al Ministro de Justicia.

1

<del>Este texto esta tachado</del>

Preformateado <pre></pre>

Si queremos que el navegador muestre lo que hemos escrito tal como está en el código, respetando los espacios y saltos de línea, esta etiqueta se encarga de eso. Recuerda que el navegador ignora los saltos de línea y espacios en el código. Por ejemplo, el siguiente código:

1
2
3

<p>Este parrafo
tiene varias
lineas</p>

Genera una sola línea:

Este parrafo tiene varias lineas.

Pero este otro

1
2
3

<pre>Este parrafo
tiene varias
lineas</pre>

Genera tres líneas (aunque con letra monoespaciada):

Este parrafo
tiene varias
lineas

Si este artículo te gustó también puedes leer:

• Curso básico de HTML: 3 – Atributos y valores (1 comentarios)
• Curso básico de HTML: 6 – Listas (0 comentarios)
• Curso básico de HTML: 4 – El atributo “style” (2 comentarios)
• Curso básico de HTML: 2 – Etiquetas básicas (1 comentarios)
• Curso básico de HTML 1 – Introducción a HTML (1 comentarios)

¿QUÉ ES EL ATRIBUTO STYLE?

Es un atributo especial porque no tiene valores como los demás atributos, sino que contiene propiedades, y son las propiedades las que recién tienen valores.

¿CUÁL ES LA FUNCIÓN DEL ATRIBUTO STYLE?

Como su nombre lo dice, es un atributo de estilo (style es estilo en inglés), lo que significa que este atributo permite hacer lo que se hace con las Hojas de estilo CSS (especificar formato, color, tamaño, posición, etc.) aunque con algunas limitaciones.

¿POR QUÉ USAR “STYLE” Y NO OTROS ATRIBUTOS  O ETIQUETAS DE FORMATO?

Lo resumo en dos razones:

1. Los atributos y las etiquetas de formato (que veremos en el siguiente capítulo) están en proceso de extinción. Si escribes tu web abusando de ellos, es probable que en un tiempo tu página web no sea mostrada correctamente en los navegadores.
2. El atributo style usa las mismas propiedades (aunque no todas) de las Hojas de estilo CSS, lo que significa que cuando empieces a aprender diseño web con CSS (lo que de hecho es una obligación si quieres ser un experto en creación de páginas web) tendrás una base sólida.

¿CÚAL ES LA SINTAXIS DEL ATRIBUTO “STYLE”?

Puesto que style es un atributo, usa la sintaxis de todos los atributos (en la etiqueta de apertura, separado por un espacio de ella y encerrando los valores entre comillas precedidos por un signo igual), con las siguientes variaciones:

• Dentro de las comillas no se escribe el valor sino la propiedad.
• Un atributo style puede tener muchas propiedades.
• Cada propiedad tiene un valor, entre valor y propiedad deben escribirse dos puntos, así: propiedad:valor
• Entre una propiedad y la siguiente se escribe punto y coma, así: propiedad1:valor1;propiedad2:valor2 (no es obligatorio un espacio después del punto y coma, pero es frecuente colocarlo para que sea más sencillo visualizar el código y saber donde termina una propiedad y donde comienza la siguiente).
• El atributo style encierra a todas sus propiedades con punto y coma precedidos del signo igual, así: style=”propiedad1:valor1; propiedad2:valor2;”
• La última propiedad debe terminar con punto y coma, aún cuando no hay una propiedad después de esta (fíjate en el ejemplo anterior).

De lo explicado, la sintaxis del atributo style sería:

<etiqueta style=”propiedad1:valor1; propiedad2:valor2; propiedad3:valor3;”>elemento</etiqueta>

Veamos un ejemplo real:

1

<p style="font-size:120%; text-align:left; color:yellow; background-color:grey;">Hola a todos</p>

El código anterior genera el siguiente resultado:

¿Cómo se generó ese resultado? Pues a través de las propiedades contenidas en el atributo style. Las explicaré una a una para su mejor comprensión:

1. Propiedad font-size; valor 120%. Esta propiedad determina el tamaño de la fuente (letra). 120% significa 120% del tamaño estándar. También podría medirse en pixeles o en em (considerando que 1em es el tamaño estandar de letra, por lo que 120% es igual a 1.2em).
2. Propiedad text-align; valor: center. Esta propiedad determina la alineación del texto (aunque puede usarse también para elementos no textuales como imágenes). El valor center, hace que el texto aparezca centrado.
3. Propiedad color; valor: yellow. Esta propiedad determina el color de la letra (nada de font color, por favor). El valor yellow indica que la letra es amarilla (yellow es amarillo en inglés).
4. Propiedad background-color; valor: grey. Esta propiedad determina el color de fondo (nada de bgcolor, eso ya no existe). El valor grey indica que el color de fondo es gris (grey es gris en inglés).

PROPIEDADES BÁSICAS PARA EL ARGUMENTO STYLE

Mis estudiantes me preguntaban a menudo cómo cambiar el color de letra, el tamaño, el tipo de letra, entre otras cosas, así que, basado en esas dudas frecuentes, explicaré las principales propiedades del argumento style:

ALGUNOS EJEMPLOS APLICATIVOS:

1.Dibujar una línea horizontal de color verde, de 2px de grosor, de la mitad del ancho de la ventana y alineada a la izquierda:

1

<hr style="color:green;background-color:green;height:2px;width:50%;text-align:left;" />

2. Escribir un encabezado de primer nivel de color amarillo con fondo gris y centrado.

1

<h1 style="color:yellow;background-color:grey;text-align:center;">Encabezado 1</h1>

3. Darle color de fondo azul a toda la página

1
2

<body style="background-color:blue;">
</body>

4. Darle color de fondo azul y texto blanco a toda la página:

1
2

<body style="background-color:blue;color:white;">
</body>

En el siguiente capítulo estudiaremos como aplicar formato usando algunas etiquetas básicas. Aunque lo ideal es aplicar formato con el atributo style, las etiquetas de formato tendrán un buen tiempo de vida todavía con nosotros pues se usan para casos específicos.

Si este artículo te gustó también puedes leer:

• Curso básico de HTML: 3 – Atributos y valores (1 comentarios)
• Menu desplegable en Moodle (tutorial) (10 comentarios)
• Curso básico de HTML: 6 – Listas (0 comentarios)
• Curso básico de HTML: 5 – Aplicar formato usando etiquetas (1 comentarios)
• Curso básico de HTML: 2 – Etiquetas básicas (1 comentarios)

1

<hr />

Pero quizás nos interese que la línea fuera azul, de 2 pixeles de grosor, que ocupe solo la mitad del ancho en pantalla y que este pegada a la izquierda. ¿Muchas propiedades?, sí, son muchas, pero se pueden indicar en la etiqueta anterior. Para eso usamos atributos y valores.

¿QUÉ SON LOS ATRIBUTOS?

Los atributos son eso: atributos; en otras palabras, características que se le añaden a una etiqueta para especificar la forma en que queremos que se muestren sus elementos. Con los atributos podemos cambiar el color de letra, la alineación, el tamaño de una imagen o de una tabla, etc.

¿QUÉ SON LOS VALORES?

Los valores son la especificación de un atributo. Por ejemplo si el atributo indica el ancho de una imagen; el valor de dicho atributo indicara el ancho exacto en una unidad de medida (casi siempre pixeles). Por ejemplo, el atributo width significa ancho, y el valor para ese atributo podría ser 400px, con lo cual, el elemento en cuestión tendrá un ancho de 400 píxeles.

¿CÓMO SE ORDENA UNA ETIQUETA SUS ATRIBUTOS Y LOS VALORES DE ESTOS?

La forma de ordenar cualquier elemento en un código (no solo HTML) se llama sintaxix, así que, de acá en adelante hablaré de sintaxis (no de orden o posición) y ya debes saber de qué se trata.

Si una etiqueta tiene un atributo la sintaxis es así:

1. El atributo va siempre en la etiqueta de apertura, jamás en la de cierre. Se deja un espacio en blanco entre la etiqueta y el atributo.
2. Si la etiqueta es de un solo lado, el atributo se coloca entre la etiqueta y la barra de cierre, dejando, como en la indicación anterior, un espacio entre la etiqueta y el atributo.
3. El valor del atributo se escribe con el signo igual y encerrado entre comillas. así atributo=”valor”
4. Si hay más de un atributo se separan entre sí por espacios.

Por lo tanto, la sintaxis es:

<etiqueta atributo1=”valor1″ atributo2=”valor2″ atributo3=”valor3″></etiqueta>

Si la etiqueta es de un solo lado:

<etiqueta atributo1=”valor1″ atributo2=”valor2″ atributo3=”valor3″ />

Ejemplo:

1

<img src="figura.jpg" width="200px" height="300px" border="0" />

En el caso anterior la etiqueta es img y es de un solo lado. Esta etiqueta se usa para insertar una imagen en la página web. A esta etiqueta se le han añadido los siguientes atributos:

• src, se usa para indicar que imagen se va a añadir y donde se encuentra. En este caso, el valor de dicho atributo es figura.jpg
• width, se usa para especificar el ancho de un elemento. En este caso, el valor es 200px, lo que significa que la imagen insertada mide 200 pixeles de ancho.
• height, se usa para especificar el alto de un elemento. En este caso, el valor es 300px, lo qe significa que la imagen insertada mide 300 pixeles de altura.
• border, se usa para especificar el ancho del borde de un elemento. En este caso el valor es 0, lo que significa que la imagen no tiene borde. Pero también podría ser 1, 2 o 3 para indicar el ancho del borde (en pixeles)

LOS ATRIBUTOS SON OPCIONALES U OBLIGATORIOS

Eso depende de la etiqueta. Algunas etiquetas exigen atributos obligatorios sin los cuales no pueden funcionar. Otras etiquetas no los exigen y queda en la decisión del diseñador web si los añade o no pues se usan para dar formato (tamaño, color, posición, etc.).

Algunas etiquetas que exigen atributos obligatorios son:

• img, pide el atributo src para indicar la imagen
• a, exige el atributo href para indicar el destino del enlace

Llegado el momento veremos estas etiquetas.

LOS ATRIBUTOS OPCIONALES ESTÁN EN PROCESO DE EXTINCIÓN

A diferencia de los atributos obligatorios, que son exigidos por la etiqueta para funcionar. Los opcionales están desapareciendo poco a poco y los buenos diseñadores web los evitan casi totalmente porque existe un mejor método que los atributos. Dicho método se llama Hoja de estilos CSS.

Así que desde ya te advierto: no te acostumbres demasiado a los atributos porque están condenados al deceso.

Sin embargo, en el próximo capítulo de este curso, veremos el punto intermedio entre los atributos y las hojas de estilo: el atributo style.

P.D. Solución al ejercicio del capítulo anterior:

1
2
3
4
5
6
7
8
9
10
11
12
13

<h1>Etiquetas basicas de HTML</h1> 
<hr /> 
<p> 
HTML usa etiquetas para estructurar el contenido<br /> 
Dichas etiquetas se encierran entre los simbolos menor y mayor<br /> 
Algunas etiquetas son de dos lados y otras solo de uno 
</p> 
<p> 
Las etiquetas basicas son "h" para los encabezados, "hr" para las lineas,<br /> 
"p" para los parrafos y "br" para los saltos de linea 
</p> 
<hr /> 
<p>Fin del ejercicio</p>

Si este artículo te gustó también puedes leer:

• Curso básico de HTML: 5 – Aplicar formato usando etiquetas (1 comentarios)
• Curso básico de HTML: 4 – El atributo “style” (2 comentarios)
• Menu desplegable en Moodle (tutorial) (10 comentarios)
• Curso básico de HTML: 6 – Listas (0 comentarios)
• Curso básico de HTML: 2 – Etiquetas básicas (1 comentarios)

1. El código HTML se usa para crear páginas web. El navegador interpreta el código y muestra el resultado en forma de página web.
2. Para escribir código HTMl debemos usar un editor de texto plano. Para Windows, el mejor sin duda es NotePad ++
3. Al trabajar escribiendo código HTML debemos tener dos programas abiertos: el editor de textos para escribir el código y un navegador (que no sea Internet Explorer, por favor, porque muestra mal el diseño) para ver los cambios en la pagina web.
4. Los códigos HTML se marcan con etiquetas que se encierran entre los símbolos menor y mayor (< >).
5. Algunas etiquetas son de dos lados (apertura <etiqueta> y cierre </etiqueta>) y otras son de un solo lado y se cierran en sí mismas (<etiqueta/>).
6. Los comentarios no se muestran en la página web y deben ir encerrados entre < ! – - y - ->
7. La estructura básica de una página web es:

1
2
3
4
5
6
7
8
9

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title><!--Aqui escribe el titulo de tu pagina web--></title>
</head>
<body>
<!--Todo el contenido que se coloque aqui sera visible en la pagina web-->
</body>
</html>

Hoy veremos las etiquetas básicas para añadir contenido en una página web. No olvides que el contenido se añade dentro de la sección body.

Encabezados

También conocidos como títulos, sirven para darle una estructura a la página web. Existen seis clases de encabezados, es decir, encabezado de nivel 1, encabezado de nivel 2 y así hasta llegar al encabezado de nivel 6, en el que 6 es el de menor jerarquía y 1 es el más importante.

Los encabezados se indican con la etiqueta de dos lados h (de head en inglés) seguida del número de nivel del encabezado.

Veamos:

1
2
3
4
5
6

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Escríbelos en tu editor de texto plano para que veas los resultados y practiques.

Líneas

Las líneas son trazos horizontales que van de un extremo al otro de la ventana (a menos que se le indique lo contrario). Pueden servir para separar un título de un contenido, el contenido de un pie de página o cualquier división que se nos ocurra. Siempre es recomendable no abusar de las líneas. Se usa la etiqueta de un solo lado hr

1

<hr />

Párrafos

Los párrafos son bloques de texto que funcionan como un solo elemento (por ejemplo, al cambiar el color de letra se cambia para todo el párrafo). Además, entre un párrafo y otro hay un salto doble de línea para que visualemente separemos los bloques de texto.

Se usa la etiqueta de dos lados p

1
2
3
4

<p>Esto es un parrafo. Puede ser extenso o corto,
pero cuando cierro la etiqueta p el parrafo termina</p>
<p>Y cuando se vuelve a abrir otra etiqueta p
un parrafo nuevo comienza</p>

* Nota: los encabezados son llamados elementos de bloque, por lo tanto no pueden ir dentro de un párrafo. Ejemplo:

Incorrecto:

1
2
3
4

<p>
 <h2>CURSO DE HTML</h2>
 HTML es el lenguaje en el que se escriben las paginas web
 </p>

Correcto:

1
2
3
4

<h2>CURSO DE HTML</h2>
 <p>
 HTML es el lenguaje en el que se escriben las paginas web
 </p>

*Nota 2: El navegador ignora los saltos de línea dentro del código HTML, por eso, en el ejemplo anterior, da lo mismo que la línea 2 tenga la etiqueta de apertura de párrafo y la línea 4 la etiqueta de cierre. Las líneas 2,3 y 4 podrían estar en una sola y daría lo mismo.

Es decir:

1
2
3
4
5
6
7
8
9

<h2>CURSO
 DE
 HTML</h2>
 <p>
 HTML
 es el lenguaje
 en el que se escriben
 las paginas web
 </p>

y este otro:

1

<h2>CURSO  DE HTML</h2><p>HTML es el lenguaje en el que se escriben  las paginas web</p>

Generan el mismo resultado en el navegador. O sea que nosotros saltamos de línea en el código solo para facilitar nuestra lectura, ya que al navegador le da igual.

Saltos de línea

Puede darse el caso de que queramos que el texto haga un salto simple de línea y no el salto doble que se origina al pasar de un párrafo a otro. En este caso se usa la etiqueta de un solo lado br

1
2
3
4
5
6
7
8
9

<p>Este es un parrafo, si yo salto de linea en el codigo
(como aqui) el navegador lo ignora y mostrara todo en una linea.
Pero si quiero que el navegador realmente muestre un salto simple
de linea (no doble como en el parrafo) uso la etiqueta br <br />
Aqui ya salte de linea <br />
Aqui he vuelto a saltar de linea <br />
Aqui he saltado de linea una vez mas</p>
<p>Aqui comienzo un nuevo parrafo, y como ya sabemos
el salto de linea entre un parrafo y el siguiente es doble</p>

Como ejercicio, escribe el código para la siguiente página web (en la siguiente sesión daré el código con la solución):

Si este artículo te gustó también puedes leer:

• Curso básico de HTML: 6 – Listas (0 comentarios)
• Curso básico de HTML: 5 – Aplicar formato usando etiquetas (1 comentarios)
• Curso básico de HTML: 4 – El atributo “style” (2 comentarios)
• Curso básico de HTML: 3 – Atributos y valores (1 comentarios)
• Curso básico de HTML 1 – Introducción a HTML (1 comentarios)

Página web estática y página web dinámica

Una página web estática es aquella cuyo contenido se verá siempre igual a menos que se modifique directamente el código que la genera (código html). Mientras que una página web dinámica es aquella cuyo contenido es generado por fórmulas que hacen llamados a una base de datos para imprimir la información en pantalla. En otras palabras, es como si una página web estática ya estuviera creada desde antes de acceder a ella y una página web dinámica se construyera “al vuelo” cuando la ejecutamos.

Un ejemplo de web dinámica sería este blog. Si escribes un comentario aquí, el contenido variará sin haber tocado el código.

Introduccion a HTML

El código HTML se puede escribir en cualquier editor de texto plano. En Windows podemos usar el bloc de notas (aunque, reconozcámoslo, es un asco) o, mucho mejor aún, notepad++. Si estás en alguna distribución Linux ya tendrás a la mano un excelente editor de texto plano.

Empezaremos por lo básico, la escructura de un documento HTML. Para eso abrimos nuestro editor de textos y guardamos un archivo nuevo (en blanco) con el nombre nuevo.html Entonces notaremos que el icono que muestra dicho documento ha cambiado para mostrar que es un documento web. Si le damos doble clic se abrirá en el navegador por defecto de nuestro sistema (Firefox, p.ej.).

Para empezar a escribir HTML tendremos dos ventanas abiertas: 1. Nuestro editor de textos, desde el que introduciremos el código. 2. Nuestro navegador web para visualizar los cambios a nuestra página web.

Ahora bien, para escribir HTML necesitamos escribir etiquetas. Estas etiquetas van rodeadas de los símbolos menor < y mayor >. Ĺa mayoría consisten en una etiqueta de apertura y una etiqueta de cierre. Aunque algunas no necesitan la de cierre.

En el caso de etiquetas de dos lados, la de apertura se escribe <etiqueta> y la de cierre </etiqueta> (con una barra antes del nombre). En el caso de las etiquetas de un solo lado, estas deben cerrarse en sí mismas con un espacio y una barra de cierre, de esta forma: <etiqueta />

Por ejemplo:

1
2

<strong>Hola</strong><!--Esta etiqueta tiene apertura y cierre-->
<hr /><!--Esta etiqueta no requiere cierre-->

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Un documento HTML tiene una estructura determinada, digamos que es un esqueleto, o una maqueta, sobre la cual construimos el documento.

1. Un documento HTML debe encerrarse con la etiqueta de dos lados <html></html>
2. El documento HTML debe contener dos secciones: head y body; estas se indican con etiquetas de dos lados respectivamente: <head></head> y <body></body>. En la sección head se añade información importante para nuestro documento pero que no será visible en la ventana del navegador; mientras que en la sección body se añade todo el contenido que será visible en nuestra página web.
3. Dentro de la sección head se escribe el título de la página web con la etiqueta de dos lados <title></title>

1
2
3
4
5
6
7
8

<html><!--el documento debe iniciarse con la etiqueta html de apertura-->
 <head><!--inicio de la seccion head-->
 <title>Mi primer documento HTML</title><!--Dentro de la etiqueta title se escribe el titulo de la pagina-->
 </head><!--fin de la seccion head-->
 <body><!--inicio de la seccion body-->
 <!--todo lo que se escriba dentro de body sera visible en la pagina web-->
 </body><!--fin de la seccion body-->
</html><!--el documento debe cerrarse con la etiqueta de cierre html-->

Cuando queremos escribir comentarios estos deben ir encerrados entre <!-- y --> de la siguiente manera:

1

<!--Este es un comentario. Los comentarios se utilizan para explicar fragmentos de código puesto que el navegador los ignora y no se ven en la pagina web. Sin embargo, es recomendable no abusar de ellos porque retardarian la carga de la pagina-->

HTML ESTRICTO Y HTML TRANSICIONAL

Si bien existen más variantes de código HTML, estas dos son las más usuales. Cómo su nombre lo indica, el HTML estricto no permite errores ni etiquetas reprobadas (antiguas), mientras que el transicional es más “permisivo” con dichos errores. Obviamente sería preferible utilizar HTML estricto y así lo usaré a lo largo del curso. En caso contrario haré la aclaración cuando sea necesario.

Sin embargo, no es tan sencillo como decirme a mí mismo: “escribiré con HTML estricto” o “escribiré con HTML transicional”, sino que debes informárselo al navegador para que comprenda como manejar el código de tu página web. Para eso hay que agregar una línea al código, antes de la etiqueta <html>

Para HTML transicional este es el código:

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Para el HTML estricto:

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Por lo tanto, la estructura básica de un documento html será:

1
2
3
4
5
6
7
8
9

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title><!--Aqui escribe el titulo de tu pagina web--></title>
</head>
<body>
<!--Todo el contenido que se coloque aqui sera visible en la pagina web-->
</body>
</html>

Si este artículo te gustó también puedes leer:

• Curso básico de HTML: 6 – Listas (0 comentarios)
• Curso básico de HTML: 5 – Aplicar formato usando etiquetas (1 comentarios)
• Curso básico de HTML: 4 – El atributo “style” (2 comentarios)
• Curso básico de HTML: 3 – Atributos y valores (1 comentarios)
• Curso básico de HTML: 2 – Etiquetas básicas (1 comentarios)

Quienes usen Moodle (el mejor sistema de gestión de e-learning) saben que el mayor problema de este LMS (junto con su espantoso editor HTML) es que sus temas (plantillas) tienen diseños pobres, poco atractivos y que hacen que un sistema tan potente parezca ser una especie de web 1.0

Por suerte, en estos últimos años han empezado a salir diseños variados y plantillas de apariencia profesional. Pero aún así son pocos y los más o menos buenos (ni siquiera realmente sorprendentes) son de pago.

Pero vamos al grano, un sitio web se ve definitivamente mejor si cuenta con un menú desplegable (de esos que despliegan sus contenidos con solo colocar el cursor encima de cada ítem), y si pudiéramos añadir uno a Moodle sería estupendo.

De hecho ya existen plantillas que cuentan con menús desplegables, aquí las que me han gustado:

• Afterburner
• Aarvark
• SHS Blue
• Newbury college
• Solent

Sin embargo, son pocos, y sería genial poder añadir un menú desplegable a cualquier tema de Moodle, ya que hay varios temas bastante atractivos y si le podemos añadir el menú quedará de lo lindo. Vamos al hecho.

PASO 1: EL CÓDIGO DEL MENÚ DESPLEGABLE

En realidad esté código no es para Moodle, se puede insertar en cualquier página html o php. Y tampoco lo escribí yo, lo encontré googleando cuando estaba desesperado buscando como añadir menús desplegables personalizados en vez de atarme a los temas que diseñaron otros. Así que mi aporte es como adaptar este menú a cualquier plantilla de Moodle y, mejor aún, explicarlo en español, que no he encontrado nada al respecto en nuestra lengua.

Vamos al código:

Descárgalo desde aquí

Cuando descomprimas el zip encontrarás una carpeta llamada desplegable y en su interior lo siguiente:

• El archivo desplegable.html (el código del menú)
• El archivo desplegable.css (el código que ordena el html anterior para que tenga el aspecto de menú).
• La carpeta chromejs dentro de la cual se encuentra el archivo chrome.js (el código que hace que el menú se despliegue).

PASO 2: EDITAR EL ARCHIVO desplegable.html

Abre el archivo desplegable.html con un editor de textos y borra la siguiente línea:

1

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

PASO 3: AÑADIR LOS ESTILOS DEL MENÚ A LOS ESTILOS DEL TEMA DE MOODLE

Localiza el archivo que contenga los diseños de tu tema de moodle. Debe llamarse styles.css (es lo general aunque no siempre es así). Abre ese archivo con un editor de textos y copia al final todo el contenido del archivo desplegable.css

Por si las dudas, el código es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

.chromestyle{
width: 1000px;
font-weight: bold;
font-size:0.9em;
margin:0px auto;
padding:0px;
}
 
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
/*content: ".";*/
display: block;
height: 0;
clear: both;
visibility: hidden;
}
 
.chromestyle ul{
border: 1px solid #bbb;
width: 100%;
background-color:#eee;
padding: 4px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
 
.chromestyle ul li{
display: inline;
}
 
.chromestyle ul li a{
color: #BF3B44;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
 
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color:#6F2225;
background-color:#fff; /*THEME CHANGE HERE*/
}
 
/* ######### Style for Drop Down Menu ######### */
 
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
 
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
 
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
 
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

No olvides pegar el código anterior dentro (y al final) del archivo css de tu tema de Moodle.

PASO 3: AÑADIRLO A UNA PLANTILLA CUALQUIERA DE MOODLE

Ya tenemos la carpeta desplegable, lo que ahora debemos hacer es copiar todo su contenido dentro de la carpeta de nuestro tema de moodle. ¡Ojo!, no copies la carpeta desplegable sino su contenido.

Bien, ahora debemos hacer unas modificaciones en el archivo header.html (dentro de la carpeta de tu tema de moodle) y eso será todo.

Abre el archivo header.html con un editor de textos (si estas en windows te recomiendo notepad++, en linux, cualquier editor que traiga tu distribución será perfecto). Lo siguiente hazlo con mucho cuidado:

Primero debes añadir el siguiente código dentro de la sección head y justo después de la sección title

1
2

<script src="<?php echo $CFG->themewww .'/'. current_theme() ?>/chromejs/chrome.js" />
</script>

Debe quedarte algo así, no exactamente igual al código que está a continuación, pues solo lo escribo para que veas más o menos donde deben introducir el código anterior. Pero recuerda que cada tema es distinto y no debes modificar en nada el código existente, solo debes añadir el código anterior:

1
2
3
4
5
6
7
8
9

<head>
 <?php echo $meta ?>
 <meta name="keywords" content="moodle, <?php echo $title ?> " />
 <title><?php echo $title ?></title>
 <script src="<?php echo $CFG->themewww .'/'. current_theme() ?>/chromejs/chrome.js" />
 </script>
 <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
 <?php include("$CFG->javascript"); ?>
</head>

El código anterior permite que se solicite las órdenes el archivo chrome.js que era, si te acuerdas, el que generaba el efecto desplegable en el menu. Ahora debemos invocar el archivo desplegable.html que es el que contiene el menú en sí. Para eso ubica la sección page, el código debe ser así:

1

<div id="page">

Una vez ubicado dicha sección pega el siguiente código inmediatamente antes de él:

1
2
3
4
5
6
7

<div>
 <?php
{
 include('desplegable.html');
}
?>
</div>

Si lo has hecho bien, activa el tema en tu Moodle y ¡bingo! ya tienes tu menú desplegable.

SOLO VEO EL MENÚ DESPLEGABLE EN LA PORTADA

Lo más probable es que solo puedas ver el menú desplegable en la portada, más no en las demás páginas de tu Moodle. Eso sucede porque casi siempre, el código en el header.html distingue la portada del resto de paǵinas. Si te sucede eso, busca una segunda sección page y copia el código tal como lo hiciste en el paso anterior. Ya podrás ver el menú desplegable.

CONCLUSIONES

Pueden parecer muchos pasos y muy complejos, pero he intentado ser lo más detallado posible en la explicación. Solo te queda editar manualmente el menú para que aparezcan los elementos que deseas.

Cualquier duda es bienvenida en los comentarios.

Si este artículo te gustó también puedes leer:

• Manual de Moodle, capítulo 9: Cambiar la apariencia de Moodle con los temas (2 comentarios)
• Manual de Moodle, capítulo 8: Conociendo el bloque "Administración del sitio" (11 comentarios)
• Manual de Moodle, capítulo 7: Moodle en español (0 comentarios)
• Manual de Moodle, capítulo 6: Estructura de carpetas en Moodle (2 comentarios)
• Manual de Moodle, capítulo 5: Instalación de Moodle (0 comentarios)

Repasemos:

Primera clase:

1. Internet. Conjunto de tecnologías que permiten que las computadoras se comuniquen.
2. Web. Conjunto de documentos que se enlazan unos con otros en todo el mundo a través de hipervínculos.
   • Página web. Cada documento que se abre al hacer clic en un enlace.
   • Sitio web. Conjunto organizado de páginas web que pertenecen a una misma institución.
3. Navegador. Programa de computadora que nos permite ver páginas web.

Segunda clase:

1. Direcciones IP. Código númerico formado por cuatro valores que pueden variar de 0 a 255 y separados por puntos.
2. Dominios. Direcciones que usan letras y números y que suplantan a las IP para navegar fácilmente.
3. Servidores DNS. Servidores que trasnforman los dominios en direcciones IP

Hoy veremos un concepto que ha revolucionado el mundo de la internet, ha destruido modelos de negocios antiguos y le ha dado poder a gente común y corriente que antes no tenían formas de expresarse (¡este blog es una prueba del poder de la web 2.0!).

Antes de hablar de la web 2.0 (web dos punto cero) demos un vistazo a la teoría.

1. Fundamentos de la web

La web fue creada en 1989 por Tim Berners Lee y consistía una forma de organizar el contenido usando la Inernet como medio físico de comunicación y usando el protocolo http.

Tim Berners Lee se convenció de la necesidad de que todo el mundo pueda conectarse y compartir contenidos usando la Internet. Para eso unió Internet y HTTP y creó la web.

¿Qué es internet?

Como ya hemos visto hasta el cansancio, Internet es un conjunto de tecnologías que permiten que las computadoras se comuniquen a nivel mundial.

¿Qué es HTTP?

Es un protocolo que sirve para ver páginas web. Su nombre viene de HyperText Transference Protocol, que significa protoclo de transferencia de Hipertexto. En otras palabras, es una especie de código universal que se usa para poder ver páginas web. De su nombre deducimos que HTTP permite que las computadores compartan Hipertexto.

Internet existió desde mucho antes que existiera la web. Y los principales protocolos que se usaban antes de la web eran FTP, para compartir archivos y TELNET para compartir recursos (o sea, controlar una computadora desde otra).

¿Qué es hipertexto?

Un hipertexto es un texto en un documento que dirige a otro documento. Por ejemplo, los enlaces como este que esta en color azul y sobre el que puedes hacer clic es un hipertexto. Y como sabemos bien, la web está llena de hiperextos a los que les llamamos enlaces o links.

Además, los enlaces hoy en día no se reducen a textos, pueden existir enlaces en imágenes, videos, y varios objetos más.

Y puesto que un enlace te lleva a un documento, hablando de la web, a través de enlaces todas las páginas web del mundo se conectan.

Por eso es que para visitar páginas web necesitamos el protocolo http y las direcciones comienzan con dicho protocolo:

http://www.google.com

Sin embargo, todos los navegadores actualmente añaden por sí solos el protocolo HTTP a las direcciones web, por eso basta escribir www.google.com y el navegador hará el resto (es más ahora ya ni siquiera es necesario escribir www, basta con escribir google.com yahoo.com o youtube.com)

¿Cómo se crean los hipertextos para la web?

Se crean a través de un lenguaje llamado HTML. La base para la creación de páginas web es conocer el código HTML.

¿Qué es HTML?

Es un lenguaje usado para crear págnas web. Su nombre proviene de HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto. En pocas palabras, a través de HTML creamos hipertexto, con los hipertextos creamos enlaces a otras páginas web o documentos. HTTP permite solicitar documentos que contengan hipertexto, es decir HTML (páginas web). Por último, Internet nos permite conectarnos alrededor del mundo y si juntamos HTTP e Internet tenemos la web.

La web es la combinación de las tecnologías de Internet y el protocolo HTTP

2. Web 1.0

La web 1.0 (web uno punto cero) fue la web inicial, de solo lectura, con páginas web estáticas con las que el usuario no podía interactuar.

Sus características son:

• Las páginas web están escritas una por una en código HTML y a mano. Así que añadir un enlace nuevo, un nuevo elemento de menú o cambiar los estilos demandaba mucho trabajo.
• No usaban bases de datos, es decir, los usuarios solo podían ver contenido como textos y fotos pero jamás inscribirse, comentar, añadir contenido. A lo mucho podían rellenar un formulario que sería una forma rudimentaria de lo que hoy conocemos como comentarios en blogs o redes sociales.
• El contenido y el diseño estaban juntos en el código HTML. Por ejemplo, si todos los títulos de 100 páginas web querían cambiarse de color o de tamaño había que cambiarlos ¡uno por uno! En la web 2.0 este problema se soluciona separando el estilo del diseño.
• Total falta de respeto al visitante de la web, colores estrafalarios, brillantes, marquesinas que saltaban o bailaban, texto que giraba, fondos negros y letras brillantes. Según los expertos, era como pasearse por una calle de Nueva York o de Tokio, llenas de letreros luminosos que provocan confusión y saturación visual.
• No existían usuarios. Al no existir bases de datos, todos eran simplemente visitantes pues no se podía guardar registros de quienes habían visto cada sitio o página web.
• El contenido era generado por las grandes empresas. Si queríamos ver fotos, algún video o leer sobre un tema determinado debíamos conformarnos con lo que nos querían mostrar Yahoo, Lycos, Msn o los gigantes de la época.

Y para ustedes que viven en Internet, algunos detalles más de la web 1.0 que los dejarán sorprendidos:

• No existía Google. Existía Yahoo!, Altavista, Excite, Copernic y otras pero encontrar algo con esos buscadores era tan complicado que existía gente que se ganaba la vida solo haciendo búsquedas. ¿Pueden creerlo? Te cobraban por encontrar lo que hoy encuentras en la primera o segunda página de resultados en Google.
• No existía YouTube. No podías subir videos a la web. No podías hacerte famoso bailando o cantando frente a una cámara. Bueno, para ser sinceros, así hubiera, grabar video en esos tiempos era solo para gente con bastante dinero. Y luego convertir ese video de cinta al formato digital para la web requería mucho más dinero aún.
• No existía Facebook, MySpace ni Hi5. Tampoco existían cámaras digitales así que, no había necesidad, ¿no creen? Ya bueno, si existían, pero eran tan costosas como un televisor de plasma de último modelo hoy en día. ¡Y guardaban solo veinte fotos y en un disquete!
• No existía Messenger. Ni messenger ni ningún otro tipo de mensajeria instantánea. Lo que sí había eran canales de chat y el famosísimo (no sé si existe aún) MIRc (que recuerdos chateando por MIRc, los que tengan más de veinticinco levanten la mano). Si ustedes se creen innovadores, les cuento que los emoticones nacieron con MIRc (era un chat solo de texto, nada de imágenes ni webcam) y en texto: :S XD etc. Aquí una bonita recopilación de emoticones en modo texto.

En conclusión, usar la web 2.0 era casi casi como no tener Internet.

3. La burbuja punto com

La burbuja punto com fue un fenómeno de estupidez colectiva parecida a la fiebre del oro en norteamerica o la de los colonizadores españoles en América. destruyó empresas, puso en crisis la economía mundial pero con su muerte dio paso a la web 2.0

Sucede que a mediados de los noventa surgieron grandes empresas que hicieron mucho (¡MUCHO!) dinero a través de empresas orientadas a la web. De todas ellas destacan tres que sobreviven hasta hoy (y casi con la misma fuerza que al inicio) y que, paradójiamente, fueron las que iniciaron la burbuja punto com: Yahoo!, Ebay y Amazon.

Yahoo! fue durante mucho tiempo el líder mundial en la web

Yahoo fue creada en 1995 por Jerry Yang y David Filo como una guía de contenidos en Internet. Sucede que en aquellos tiempos, encontrar algo en Internet era demasiado complicado, todo estaba lleno de publicidad y de cosas que no querías. Entonces Yang y Filo empezaron a organizar las sitios web por categorías para que la gente pueda encontrar rápidamente lo que busca. Lo más impresionante fue que toda la organización la hicieron ¡a mano!

Ebay fue creada como una empresa de subastas y remates

Ebay fue creada en 1995 por Pierre Omidyar quien no era un expero en informática ni nada similar. Él buscaba completar una colección y pensó que podía hacerlo a través de internet. Así nació un sitio donde la gente compraba y vendía baratijas (muñecos, ropa, lámparas viejas, llaveros, etc.) pero pronto el mercado de las subastas creció tanto que Ebay ganó millones en el proceso.

Amazon es un tienda en la web. Su principal producto son los libos

Amazon fue fundada por Jeff Bezos en 1994 y consistía en una tienda de libros por Internet. Era una idea atrevida y arriesgada, pero Bezzos (un genio de los negocios) demostró que los libros tenían mucho mercado en Internet. Posteriormente, Amazon ha entrado en el comercio en línea en varios rubros, no solo en los libros, y sus utilidades han crecido en miles de millones de dólares. Actualmente han sacado a la venta el Kindle 2, un lector electrónico de libros, con lo que Amazon ha demostrado que sigue tan fuerte como al inicio y que la venta de libros sigue siendo su principal mercado.

Yahoo, Ebay, Amazon, muy bonito, muchos millones de dólares pero ¿y la crisis?

Vamos por partes, viendo a tres empresas exitosas como las anteriores uno no ve crisis por ningún lado, sino todo lo contrario. Se ve un mercado nuevo, un mercado que permite que cualquiera con ingenio pueda convertirse en millonario (o multimillonario) en poco tiempo gracias a los capitales de riesgo.

¿Qués un capital de riesgo?

Es un capital (una cantidad de dinero destinada a montar un negocio) que se da con la espera de que en un futuro una empresa sea rentable y el capital pueda recuperarse. Por eso se llama capital de riesgo, nada garantiza que ese dinero vuelva, la empresa puede fracasar totalmente y todos los millones del capital de riesgo se irían al agua.

¿Y quién era tan loco como para dar un capital de riesgo?

Aunque no lo crean, existían un montón de locos dispuestos a “regalar” millones de dólares solo guíados por su olfato para los negocios. Esos millonarios se conocen como inversionistas de riesgo. Pero ni son tan locos, gracias a ellos existe hoy Yahoo, Google y un montón más. Los creadores de estas web no hubieran podido hacer nada solo con su inteligencia si no tenían un capital de riesgo.

¿Y la crisis?

Pues sucede que el éxito de estas empresas, fundadas por muchachos jóvenes. muchos de los cuales no habían siquiera terminado la carrera, que convencían a un inversionista de riesgo que les “regale” millones para invertir en su sueño y que poco tiempo después se volvían millonarios de menos de treinta años era una historia de fantasía. Muchos otros estudiantes, aficionados y gente de todo tipo empezó a creer que Internet era la gallina de los huevos de oro y empezaron a crear un sinfín de empresas punto com. Los inversionistas de riesgo se volvían locos y daban millones y millones. En la bolsa las acciones subían su valor de forma increíble (Jim Clark, fundador de Netscape, invirtió 2 millones de dólares y ganó casi 200 millones, negocio redondo ¿no?) y todos (casi todos) creían que habían encontrado una veta de oro. Era una fiebre de oro en pleno siglo XX. Pero la verdad era distinta, existen historias de empresas que se gastaban más de la mitad de su capital de riesgo en fiestas de inauguración y que luego no ganaban ni un centavo.

¿Y cómo terminó todo?

Cómo todas las crisis, en la bolsa. La quiebra de muchas empresas punto com generó el pánico de los inversionistas, las acciones cayeron, la bolsa se desplomó. Como en el cuento, siempre existe un idiota (o varios) que mata a la gallina de los huevos de oro. Muy pocas punto com sobrevivieron después de que reventó la burbuja (se le llamó burbuja justamente porque era una riqueza ficiticia, una oportunidad de negocios irreal, como vivir en una burbuja de fantasía). La web 1.0 cayó, Google recién empezaba a asomar las narices en Internet y un nuvo tipo de web estaba por nacer.

4. Web 2.0

La web 2.0 es una revolución de la web en dos niveles:

• A nivel tecnológico por el uso de nuevos elementos como lenguajes de programación, bases de datos, hojas de estilo, etc.
• A nivel social porque le permitían a los usuarios interactuar entre ellos además de darles el poder de crear sus propios contenidos.

Veamos las características de la web 2.0

• Usuarios en vez de visitantes. Usando bases de datos  se pueden crear registros de usuarios, actualizaciones de perfil, comentarios y discusiones entre ellos que hacen que los usuarios sientan la web como suya.
• Redes sociales. Aunque la idea estaba dando vueltas desde antes en Internet, fue con MySpace que comenzaron las redes sociales que hoy son el servicio más usado en toda la web. Las redes sociales permiten que las personas estén en permanente contacto con amigos y familares (incluso con los que no ven hace mucho) y conocer nuevas personas. Vida social a través de internet, ¡genial!
• Folcsonomía. En la web 1.0 el contenido era clasificado por categorías. Por ejemplo, una categoría para deportes, otra para economía, otra para arte, etc. En la web 2.0 las categorías son remplazadas por etiquetas (tags) o palabras clave. De esta forma cada usuario le añade palabras clave a los contenidos (cuantas considere necesario) para clasificarlo.
• Aplicaciones web. Son programas que se instalan en el servidor y se manejan desde la web de los usuarios. De esa forma podían crearse, por ejemplo, actualizaciones de sitios web fácilmente,
• Democracia en Internet. Con la web 2.0 cualquier persona común puede crear su propio espacio, publicar sus fotos, sus videos, sus poemas, las cosas que le interesen, dar su opinión, formar comunidades, etc. Con la web 2.0 la mayor cantidad de contenidos son generados por los usuarios, quienes son capaces de competir de igual a igual con los grandes medios.
• Nube computacional. El futuro de la web está en la nube y ya muchos expertos afirman que estamos cerca de la web 3.0 La nube computacional es una tendencia en la que el navegador remplace al sistema operativo, los servicios web remplacen a las aplicaciones de escritorio, y los espacios en servidor remplacen a los discos duros. Esto permitiría que desde cualquier computadora conectada a Internet tengamos la misma experiencia que sentados frente a nuestra propia computadora.

5. Tipos de servicios en la web 2.0

• Redes sociales. Orientados a mantenerse en contacto con amigos y familiares y conocer nuevas personas, destacan Facebook y MySpace.
  
• Compartir fotografías. Orientados a publicar fotografías en internet. No deben confudirse con las redes sociales. Destacan Flickr, Picasa, Photobucket y Zooomr
  
• Compartir video y música. Permiten subir nuestros videos o audios a la web y compartirlos con la comunidad. Destacan YouTube, Vimeo y DailyMotion en cuanto al video; en el audio destaca Goear.
  
• Ofimática. Actualmente existen servicios de ofimática en la web, es decir, que sin instalar Office u otro paquete de oficina, podemos desarrollar los mismos trabajos solo conectados a internet. Destaca Zoho.
  
• Foros. Los foros son salas de debate donde un usuario plantea un tema y los demás usuarios opinan al respecto. Generalmente cada servicio web tiene su propio espacio de foros para que los usuarios compartan experiencias o se ayuden en el manejo del servicio.
  
• Blog. La palabra blog se origina de juntar web (red) y log (diario), es decir, los blogs nacen con la idea de ser un diario a  través de internet, pero con el tiempo el concepto se ha expandido al extremo de ser realmente sitios web libres donde el administrador del blog (llamado blogger) crea una comunidad alrededor de él de sus opiniones y sus conocimientos. Mucha gente hoy en día le cree más a los bloggers que a la prensa tradicional. Destaca WordPress.
  
• Microbloggin. La idea de microbloggin es contar lo que está ocurriendo en determinado momento. Para eso existe un límite de 140 caracteres; es decir, escribir en un microbloggin es como mandar mensajes de texto por celular. Al principio parecía una idea loca, pero la experiencia ha dejado bien en claro que su importancia es enorme. Tan grande que casi todos los servicios han empezado a añadir su plataforma de micrbloggin. Destaca Twitter.
  

Álvaro Felipe
afelipech@gmail.com

Si este artículo te gustó también puedes leer:

• ¿WordPress o Blogger? (5 comentarios)
• ¿Qué es la nube computacional (cloud computing)? (0 comentarios)
• Zona Padres – Cómo bloquear el acceso a páginas web indebidas (17 comentarios)
• WordPress.com añade widget para twitter (4 comentarios)
• VodPod – Colecciona tus videos favoritos de cualquier sitio web (1 comentarios)