Texto 1: Párrafos

noreply@blogger.com (Jorge Carlos Carrá) — Tue, 19 Feb 2008 06:27:32 PST

El tema Texto contiene varios elementos: párrafos, listas, tablas y otros elementos muy atractivos para tener en un Blog como son los spoilers (botón para ocultar y mostrar textos extensos, la posibilidad de incrustar archivos externos en una ventanita con el comando iframe, la de parsear código HTML (lograr que el navegador lo muestre en lugar de ejecutarlo, lo cual como verás he debido utilizar intensivamente en este informe), la de colocar en forma sencilla una barra de navegación como la que tiene este Blog, la de eliminar la barra de navegación de Blogger, etc.
Le dedicaré un tutorial a cada uno de estos temas.

Comenzaré entonces por los párrafos.
Estando en el Panel general, con un clic en Creación de entradas , verás que en la parte superior, tanto con la pestaña Redactar como con la de Edición de HTML seleccionadas, se te ofrecen una serie de botones para formatear y embellecer tu informe.

Sin embargo es probable que desees hacer algo más. También puede suceder que estés colocando texto en un widget (ver tutorial de widgets) el cual tiene solo 5 posibilidades de edición con botones. En esta situación me encontré cuando quise formatear los títulos de cada una de las 3 secciones de este Blog.
Para todo esto necesitarás trabajar con comandos HTML, introduciendo el código que formatee el texto según tus deseos.

Una explicación completa de lo que puede hacerse con este lenguaje, requeriría un curso detallado, de los cuales hay muchos y muy buenos en Internet. De lo que aquí se trata es el iniciarte con algunos comandos simples que te permitan ampliar tus posibilidades, luego por tu cuenta podrás profundizar estas alternativas. Una forma de complementar este informe es utilizando un editor de HTML. Con él puedes crear tu informe, ir a la vista código del editor y pegar este código en la entrada del Blog (pestaña Edición HTML). Con una aclaración, el editor no coloca por defecto los estilos en forma inline , el cual es como veremos el formato que se requiere aquí. Para aplicar estilos, debes utilizar la línea de código style que se explica a continuación.
Cualquier duda me preguntás.

Un código HTML que se utiliza frecuentemente para formatear texto o imágenes es el de div o span en conjunto con el atributo style .

div y span
div y span son similares, pero la diferencia esencial es que div implica un cambio de párrafo o agrupa distintos párrafos o etiquetas y span se aplica a elementos dentro del mismo párrafo.

La estructura general de un código HTML es una etiqueta o tag de apertura, en este caso <div>y un tag de cierre </div>caracterizado por tener una barra invertida (solo unos pocos códigos no requieren el tag de cierre). Entre los mismos se coloca el texto a formatear.

<div>texto</div>

<span>texto</span>

style
Ejemplificaré para el comando div, pero la estructura y la mayoría de los atributos son válidas también para span con solo cambiar una palabra por la otra.

El formato genérico es:

<div style="">Texto</div>

Se observa que en el tag de apertura se le agrega el atributo style que permitirá aplicar los estilos colocándolos entre las comillas.

Ejemplo

<div style="text-align: center;">Texto</div>

Si son varios los atributos de style, deben separarse con punto y coma.

Estos atributos se componen de dos partes: la propiedad, en el ejemplo: text-align: y el valor de la misma, en el ejemplo center. Probablemente hayas descubierto que lo que hace el código en este ejemplo es colocar la palabra texto en el centro del párrafo (div)

Esto es lo principal de este informe. Solo comento al pasar que esta forma de aplicar los estilos se llama inline, pues se define dentro del mismo párrafo. Es una de las 3 formas posibles, las otras hacen referencia con un vínculo, a otro lugar en donde se definen, ya sea en la misma hoja, CSS interno (dentro de la sección Head, encabezamiento) o en una hoja externa, CSS externo (con extensión CSS: Cascading Style Sheet).

En la tabla que sigue te resumo algunas propiedades con sus valores para que vayas practicando. Al final de la tabla encontrarás algunas notas ampliatorias (incluye aclaraciones para los valores {color} y {número}) y algunos ejemplos. En un tutorial posterior te enseñaré a crear tablas.

En lugar de colocar la tabla directamente en esta entrada, aprovecharé para mostrarte como presentarla dentro de un spoiler, dentro de un comando iframe y con una ventana emergente o pupup .

1.- Con un spoiler
Abrir el spoiler presionando el botón Mostrar

Spoiler

Cerrar el spoiler presionando el botón Ocultar

2.- Con el comando iframe

3.- Con una ventana emergente o pupup

Popup

Ejemplos
1 Ejemplo para observar la diferencia entre div y span

Los siguientes códigos solo se diferencian en los tags div o span.
El siguiente código

<span style="background-color:red;" >TEXTO</span>

Se verá así:
TEXTO

En cambio el siguiente código

<div style="background-color: red;" >TEXTO</div>

Se verá así:

TEXTO

2 Ejemplo para centrar un texto o imagen
El siguiente código

<div style="text-align: center;">Texto</div>

Se verá así:

Texto

3 Ejemplo de un Titulo

El siguiente código fue utilizado para obtener el formato de los titulares de las 3 secciones de este Blog

<div style="background: #f0cfa3;color: #000000;text-transform: uppercase;font-weight: bold;font-size:20pt; font-family:verdana; text-align: center;">Texto</div>

Se verá así:

Texto

Este es el final de este tutorial. Puedes practicar con algunos de los códigos comentados para fijar las principales ideas.

En el siguiente tutorial trataré las listas.

¿Qué es un widget?

noreply@blogger.com (Jorge Carlos Carrá) — Tue, 15 Jan 2008 05:59:22 PST

Ir al Panel > Plantilla > Elementos de la Página.

Como lo indica su nombre, en esta ventana se observa la configuración del Blog, el encabezamiento, la cantidad de columnas y el pie.
Además aquí se configuran los widgets o artilugios.

¿Qué son los widgets?

El nombre se origina por la combinación de las palabras window y gadget. Gadget es básicamente un dispositivo con un fin útil y práctico, en este caso implementado con software.
Es un nombre genérico para identificar una interface gráfica (GUI Graphical User Interface) que facilita la tarea del usuario.

Lo mejor es verlos en escena. Hacer doble clic en cualquier caja con el título: Añadir un elemento de página.
Se verá una ventana con una gran cantidad de opciones Cada una de ellas es un widget con los que se podrán añadir gran cantidad de prestaciones al Blog.

Como se observa, comprenden la posibilidad de incluir en el Blog fácilmente: Texto, Imágenes, Código HTML o Javascript, el Perfil del dueño, un Feed, el formato de la Cabecera, el Archivo del Blog, las etiquetas, etc.

La mejor forma de aprender cuales son las prestaciones de cada uno es hacer un doble clic en: Añadir al Blog y probar. Luego se puede eliminar con el botón Eliminar elementos de la página que aparecerá en cada uno de ellos.

Creación de un Blog

noreply@blogger.com (Jorge Carlos Carrá) — Tue, 15 Jan 2008 16:17:06 PST

En esta entrada te describiré los simples pasos que debés recorrer para crear y configurar un Blog (apocope de WeB Log, en donde la palabra log en inglés, significa diario).

Crear

Ir a la página http://www.blogger.com/ > crear una cuenta Google o acceder a la ya creada.
Si tuviste que crear una cuenta, volver a la página anterior
Colocar el nombre con el que deseas firmar tus artículos > colocar el nombre del Blog, por ejemplo SuperBlog y la dirección, por ejemplo: www. superblog.blogspot.com
Seleccionar una plantilla (luego se podrá cambiar) y presionar Continuar con lo cual Blooger creará tu Blog
Empezar a Publicar

Comenzar a postear

El procedimiento te conduce al siguiente Panel en el cual te encontrarás en la pestaña Crear.

Colocar el título de la nota, escribir una nota y formatear con los botones superiores > Publicar Entrada > Ver Blog.

En lo sucesivo, para ver tu Blog deberás ir (en el caso de este ejemplo) a:
www. superblog.blogspot.com.

Con este procedimiento puedes crear la cantidad de Blogs que desees. Se suprimen yendo al Panel > Configuración > Básico > Suprimir su Blog (al final de la pantalla).

WebLog

Texto 1: Párrafos

¿Qué es un widget?

Creación de un Blog