:: § – Mi SiTiO WEB ::

El video blog es una galería de vídeos que se publican de forma cronológica con una periodicidad de un capítulo por semana, cada 15 días o por mes. Con servicios como YouTube es más fácil distribuir el vídeo y crear un canal para que puedan verlo en todas partes del mundo. En este artículo se comparten algunas ideas para empezar tu video blog desde la experiencia de crear 120 Segundos.

Si quieres empezar un vídeo blog: sólo empieza y apasionate con ello. Como en todo proyecto lo más difícil es dar el primer paso y experimentar porque los recursos en la actualidad son cada vez más accesibles gracias al internet, pero lo que siempre necesitaremos es creatividad y nuevas propuestas en el medio.
Factores a contemplar al crear tu video blog:

* Temática: define una temática o varias que te gusten, domines y tengas recursos para informarte sobre las mismas y el material no se te acabe pronto. Procura escoger temas que impulsen lo que haces en donde puedas demostrar tu conocimiento y habilidades. Sobre todo que el contenido no tenga vigencia que sea útil todo el tiempo como consulta.
* Público objetivo: si tu video blog será sobre ilustración, yoga, desarrollo, diseño, tips para escribir, etc. No te olvides de tener claro tu público objetivo y dirigirte en todo momento a ellos.
* Duración: recuerda que nadie verá un vídeo blog por mucho tiempo, el tiempo de duración es clave para mantener la atención. Se recomienda que no exceda los 10 minutos y menos de 5 minutos seguro que lo verán completo.
* Recursos: para crear un video blog necesitas pocos recursos y mucha creatividad. En 120segundos utilizamos una Canno FS100, un tripode, 2 lámparas y un micrófono para grabar. Aprovecha los exteriores para no necesitar de iluminación.
* Diseño: recuerda que la identidad de tu vídeo blog está ligada con el logotipo, los colores, musicalización y presentadores. Todo esto crea una marca, procura tener definido estos detalles al lanzar tu vídeo blog.
* Plataforma: puedes utilizar un sitio oficial para tus vídeo haciendo uso de plantillas para multimedia, pero también está la opción de crear canales en distrubuidores de vídeo como: Youtube, Vimeo, Blip, Metacafe, DailyMotion y más.
* Promoción: utiliza los tags en tus vídeos, promociona tu vídeo en sitios que se relacionen con tu temática, usa las redes sociales de buena forma para dar a conocer tu proyecto.

Tips para crear tu video blog:

* Busca personas afines: este tipo de proyectos requiere de personas que les guste la producción y tenga conocimientos sobre las características de producir para internet.
* Que tu proyecto sea abierto: invita a tu audiencia a participar en tu proyecto, recuerda que los medios en internet no son pasivos, son activos y la gente quiere ser parte de a través de comentarios o propuestas para tus capítulos.
* Presta atención a los comentarios: recuerda que la interacción de las personas es fundamental en tu contenido, si ves ideas o propuestas en los comentarios aplicalas y dale crédito a quien te inspiró esto hará que la gente sienta que es escuchada.
* Materia disponible en diferentes formatos: si publicas tus vídeo en un sitio web, no te olvides de proporcionar a las personas diferentes opciones de descarga o visualización.
* Informate sobre las tendencias del medio: procura mantenerte al tanto de lo que otros están haciendo, tomando ideas y reconociendo las tendencias en el medio.
* Olvidate de la producción tradicional: producir para internet no es igual que la producción tradicional para televisión o cine, existen diferencias no sólo técnicas, también de forma y fondo no te resistar a verlas.

Existen muchas otras cosas que compartir en relación a la creación de un video blog y sobre todo lo que implica la producción, la optimización de recursos, las referencias para inspirarnos y conocer también parte de los video blogs que han marcado una diferencia en el medio. Es por ello que he decidido crear una serie de artículos para abordar el tema y contestar a las dudas que surgen sobre la creación de un video blog y brindar más recursos a considerar.

Para insertar imágenes, el código HTML utiliza la etiqueta <img> con sus correspondientes parámetros que son los que se enumeran a continuación:

• src = «nombre de la imagen» (p. ej.: <img scr=»mifoto.jpg»>
• alt = «Texto» Este parámetro muestra un texto alternativo cuando pasamos el ratón por encima de la imagen.
• align = Indica como se alineará el texto con respecto a la imagen. Se puede alinear el texto con la parte superior de la imagen (top), con la parte central (middle), o con la inferior (bottom). También puede quedar la imagen a la derecha (right) del texto, rodeándolo, o a la izquierda (left).
• border = Indica si lleva borde y su anchura.
• height = Indica el alto de la imagen. Admite valores en puntos o en porcentaje.
• width = Indica el ancho de la imagen. Admite valores en puntos o en porcentaje.
• hspace = Indica el margen horizontal de la imagen con respecto al texto que le sigue o precede.
• vspace = Indica el margen vertical de la imagen con respecto al texto que le sigue o precede.
• lowsrc = «nombre de la imagen» Este atributo permite especificar una imagen auxiliar, que se abre en primer lugar, mientras carga la imagen definitiva. Se suelen usan imágenes de menor resolución, para que el usuario disponga de ellas cuanto antes. También se puede usar para logar ciertos efectos (muy simples) de animación. Este parametro no es reconocido por la totalidad de los navegadores.

Ejercicio 7: Guarda una imagen cualquiera en la misma carpeta en la que guardarás tu archivo HTML. (Puedes guardar la imagen en cualquier carpeta, pero entonces deberás tener mucho cuidado a la hora de indicar la ruta). Inserta el siguiente código dentro de la etiqueta <body></body>. En los dos primeros ejemplos vemos las diferencias de tamaño de la imagen especificadas por los atributos width (anchura) y height (altura) Código en el editor de textos En el navegador <img src=»surf.jpg» width=»139″ height=»89″/> <img src=»surf.jpg» width=»196″ height=»125″/>

En los siguientes ejemplos se aprecia la diferencia de alineación del texto con respecto a la imagen. Observa el uso del atributo align, con sus correspondientes valores top, middle y bottom.

Como sin duda habrás apreciado, la imagen y el texto están excesivamente juntos. Esto se puede mejorar usando los parámetros vspace y hspace.

El siguiente ejemplo muestra la imagen con borde de 4 puntos.

Haz todos los cambios que creas necesarios hasta que consigas práctica. Prueba con textos más largos para ver las alineaciones de texto envolvente con los parámetros align=right y align=left.

Podemos organizar nuestro texto haciendo uso de las llamadas listas de elementos, que consisten en esas enumeraciones utilizando números, letras o simplemente puntos para separar los diferentes apartados a tratar. Existen tres tipos:

• Numeradas
• Sin numerar
• De definición

1. -Listas numeradas:

Cada elemento va precedido por un número. Para este tipo de lista se utiliza la etiqueta <ol></ol> . Cada uno de los elementos de la lista irá precedido de la etiqueta <li> .

Ejemplo:

Si queremos utilizar letras para ordenar nuestra lista (por defecto siempre utiliza HTML números), debemos añadir a la etiqueta <ol> el atributo type con los siguientes valores:

Ejemplos

Si queremos empezar nuestra lista por cualquier otro número o letra (que no sean el 1 o la «a»), deberemos indicarlo con el atributo start.

2.- Listas sin numerar.

En ellas, cada elemento va precedido por un «bullet» o punto. Se utiliza la etiqueta <ul></ul> para delimitar la lista, y <li> para indicar cada uno de los elementos.

Ejemplo:

Con el parámetro type podemos indicar la forma del «bullet». Los valores de type pueden ser disc (disco) , circle (círculo vacío) o square (cuadrado). Si no indicamos nada, apacerá por defecto el disco.

Ejemplo:

3.- Listas de definición

Las listas de definición se tratan de listas a dos niveles. Es decir, muestran los elementos tipo glosario o diccionario. Sirven para distinguir entre una palabra a definir y su definición. Para este tipo de lista se utiliza la etiqueta <dl></dl> . El elemento marcado como palabra a definir viene marcado por la etiqueta <dt> , y la definición por la etiqueta <dd> .

Listas de varios niveles o Listas anidadas

Podemos construir listas anidadas, es decir, listas que incluyen otras listas.

Todas las listas se pueden «anidar», es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo «indice de materias».

La etiqueta <blockquote></blockquote>

La etiqueta <blockquote></blockquote> es una etiqueta que se utiliza para encerrar un texto parafraseado, una cita, un ejemplo, etc. y conseguir con ella un efecto de sangrado de texto. Tanto el margen izquierdo, como el derecho, se amplían automáticamente.

Ejemplo:

Este ejemplo y la mayoría de los que aparecen en este tutorial está formateado mediante la etiqueta blocquote.

Su código sería el siguiente:

A continuación usamos dos veces consecutivas la etiqueta <blockquote> para sangrar aún más el texto.

Ejemplo:

Este ejemplo y la mayoría de los que aparecen en este tutorial está formateado mediante la etiqueta blocquote.

Su código sería el siguiente:

La etiqueta <address></address>

La etiqueta <address> se usaba más en los primeros años de Internet, y en la actualidad tiende a desaparecer. Con ella se enmarcan datos como el nombre del autor de la página, el copyrigth, dirección de correo electrónico, etc. El texto siempre aparece en cursiva (por defecto).

Ejemplo:

DistritoWeb. Todos los derechos reservados. info@DistritoWeb.net

Su código sería:

<address>
DistritoWeb. Todos los derechos reservados. info@DistritoWeb.net
</address>

La etiqueta <pre>

Como ha quedado visto en el capítulo dedicado al párrafo, en HTML sólo se reconoce un espacio entre palabra y palabra; el resto de los espacios son ignorados por el navegador. Tampoco se respetan las tabulaciones, retornos de carro, etc… Por lo tanto, si necesitamos obligar al navegador a visualizar el texto tal y como está escrito necesitaremos enmarcarlo con la etiqueta <pre></pre>.

Ejemplo:

Este texto está escrito
 dentro de
 una
 etiqueta             pre, por lo tanto
 estos errores   de espaci
 os entre palabras los muestra 

 tal
 cual.

Este es su código:

<pre>Este texto está escrito
dentro de
una
etiqueta pre, por lo tanto
estos errores de espaci
os entre palabras los muestra

tal
cual. </pre>

La etiqueta <p></p> indica párrafo. La alineación de éste la definiremos con el parámetro align. Sus valores son:

• left: alineación a la izquierda
• right: alineación a la derecha
• center: alineación al centro
• justify: alineación justificada.

Ejemplos:

En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los espacios son ignorados por el navegador. Tampoco se respetan las tabulaciones, retornos de carro, etc… Por lo tanto, si necesitamos obligar al navegador a visualizar el texto tal y como está escrito necesitaremos enmarcarlo con la etiqueta <pre></pre>.

Para indicar los saltos de linea se utiliza la etiqueta <br>

Para los cambios de parrafo se utiliza la etiqueta <p> (en este caso no es necesario cerrarla)

Ejercicio

Copia el código siguiente en el editor de textos y observa su apariencia en el navegador. (No caigas en la tentación de cortar y pegar el ejemplo; escríbelo tú mismo para practicar)

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#0D5C94″ text=»#FFFFFF»>
<p align=left>Este párrafo de texto está justificado a la izquierda</p>
<br>
<p align=right>Este párrafo de texto está justificado a la derecha.</p>
<br>
<p align=center>Este párrafo de texto está justificado al centro </p>
</body>
</html>

Este será el resultado:

HTML dispone de un método para destacar los títulos (o encabezamientos) y subtítulos con tipo de texto variable y negrita. Para ello se utiliza la etiqueta <h></h>. El texto que escribamos entre la etiqueta de inicio (<h>) y la de cierre (</h>) será el que resulte destacado como título. Las cabeceras fuerzan un salto de linea cuando se cierran, y el texto siempre está en negrita.
Existen 6 tamaños de cabeceras distintas:

<h1><h2><h3><h4><h5> y <h6> . Siendo la <h1> la que muestra el texto en mayor tamaño.

Ejercicio

Utilizando como base el ejercicio 4, le añadiremos encabezamientos:

<h1>Este es el encabezamiento principal</h1>
<h3>Este es el subtítulo</h3>

De forma que nuestra página quedará del siguiente modo:

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF»>
<h1>Esto es el título principal</h1>
<h3>Este es el subtítulo</h3>
<font size=3 color=»#FFFFFF» face=»helvetica»> Este es un texto para practicar los diferentes estilos que podemos conseguir. <i>Aquí empieza la cursiva,</i><b> para dejar paso a la negrita.</b> Podemos tachar <s>lo que no nos guste</s> o <u>subrayar toda una frase</u>. Para nuestras fórmulas es muy útil el subindice como en b₁ o el superíndice como en m². </font>
</body>
</html>

Este será el efecto conseguido:

La etiqueta <font></font> se refiere a la fuente utilizada en el documento. Va colocada dentro del cuerpo del documento (<body><font></font></body>). Admite diferentes atributos:

• size: Define el tamaño en puntos.
• color: Define color (con los valores RBG o el nombre del color en inglés).
• face: tipo de fuente (arial, georgia, verdana, etc.)

Ejemplo:

Para modificar el estilo de texto (negrita, cursiva, etc…) existen las siguientes etiquetas que enmarcarán la porción de texto a la que queramos aplicar el estilo correspondiente:

Ejercicio:

Escribe el siguiente código en tu editor de textosy edítalo en el navegador. Haz todos los cambios que creas necesarios para ver los diferentes efectos.

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#0D5C94″ text=»#FFFFFF»>
<font size=3 color=»#FFFFFF» face=»helvetica«> Este es un texto para practicar los diferentes estilos que podemos conseguir. <i>Aquí empieza la cursiva,</i><b> para dejar paso a la negrita.</b> Podemos tachar <s>lo que no nos guste</s> o <u>subrayar toda una frase</u>. Para nuestras fórmulas es muy útil el subindice como en b₁ o el superíndice como en m². </font>
</body>
</html>

Este será el efecto conseguido:

La etiqueta <body></body> engloba el contenido principal del documento HTML (textos, imágenes, etc.). Esta etiqueta puede llevar parámetros opcionales relativos al color de fondo del documento y al color del texto y los enlaces. Estos parámetros son:

• bgcolor = Define el color de fondo del documento.

Ejemplo: <body bgcolor=»#000000></body>

• background= Hace referencia al fichero de imagen que servirá como fondo de la página. Si la imagen no rellena todo el fondo del documento, será reproducida en mosaico.

Ejemplo: <body background=»mifoto.jpg»></body>

• text = Define el color para el texto del documento. Por defecto es negro.

Ejemplo:<body text=»red»></body>

• link = Define el color de los enlaces. Por defecto es azul.

Ejemplo: <body alink=»#00FF00″></body>

• vlink = Define el color de los enlaces ya visitados. Por defecto es morado.

Ejemplo: <body vlink=»yellow»></body>

El color puede describirse de dos formas:

• Por medio del nombre del color en inglés (ver cuadro de colores).
• Por medio de una expresión numérica: Consiste en la formación de un código RBG (Red, Green, Blue) compuesto por tres valores hexadecimales que señalan la proporción de cada uno de ellos en el color resultante. Es necesario colocar delante de ellos el símbolo «almohadilla» (#).

Cuadro de colores :

Puedes ver todos los colores en html en: http://html-color-codes.com/

🙂

Ejercicio :

Copia el siguiente código en el editor de textos (te recomiendo que escribas los códigos a mano y no caigas en la tentación de copiar y pegar, pues es la mejor forma a aprender HTML)

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF» link=»#00FF00″ vlink=»#0000FF»>Este es el texto de mi página web </body>
</html>

Guárdalo como «ejercicio_2.html» (recuerda poner la extensión «html», si no se guardará por defecto como text).Ábrelo desde tu navegador y observa la apariencia. Haz los cambios necesarios hasta que adquieras cierta práctica. Prueba a poner cualquier imagen de fondo. Guarda la imagen en la misma carpeta en la que hayas guardado el ejercicio_2.html y añade el siguiente atributo dentro de la etiqueta body:

background=»nombrearchivo.jpg»

Puedes guardar las imágenes en otra carpeta (de hecho es lo recomendable) pero entonces tendrás que tener mucho cuidado al indicar la ruta al navegador.

Prueba el resultado. Verás que la imagen de fondo anula el color de fondo. Como por ahora no hemos colocado ningún link en nuestra página, no podrás ver el efecto. Si quieres, para ir probando, añade lo siguiente a continuación de la palabra web.

<a href=»#»>esto es un link </a>

De modo que quede como sigue:

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF» alink=»#00FF00″ vlink=»#0000FF»>Este es el texto de mi página web. <a href=»#»>esto es un link </a></body>
</html>

Prueba a indicar los colores usando sus nombres en inglés en vez del valor RBG:

<body bgcolor=»blue» alink=»green» vlink=»yellow»>

Un documento escrito en HTML consta de las siguientes etiquetas básicas:

<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

Ejercicio :

Abre el editor de textos (el bloc de notas, por ejemplo) y escribe lo siguiente:

<html>
<head><title>Mi página web </title></head>
<body>Este es el texto de mi página web </body>
</html>

Guarda el archivo como «prueba.html» (no olvides escribir la extensión html). No es necesario entrar en internet para ver una página, ni tenerla colgada aún. Abre tu navegador. En el menú, haz clic en Archivo/Abrir. En la ventana emergente pulsa «examinar». Busca y abre el archivo que acabas de guardar. Observa el aspecto de tu primera página. Como ves, lo que has escrito como título aparece en la barra de tu navegador, no es el título del texto.

En el navegador, haz clic en menú/ver/código fuente. Se abre el editor de textos donde podrás leer el código HTML. Aquí mismo puedes hacer los cambios que quieras y guardarlos. Para volver a verlos sólo tienes que actualizar la página del navegador.