domingo, 16 de agosto de 2009

Códigos muy básicos de HTML para edicción del blog

En el código html.lenguaje que usamos para que los navegadores de internet interpreten nuestras instrucciones, las indicaciones se hacen así:

<comando>texto afectado</comando>

Pudiendo acumularse más de un comando en el mismo texto (Por ejemplo, si queremos que además de en negrita, un texto salga subrayado):

<comando1><comando2>texto afectado</comando></comando2>

O podemos afectar diferentes porciones del texto con diferentes comandos (El comando deja de efectuarse en el momento que aparece su etiqueta de cierre)

<comando1><comando2>texto</comando1>afectado</comando2>

Esta es la forma habitual que usaremos para el tratamiento de "cosas" (texto, imágenes, otros sub-códigos insertados, etc.) que deben ser afectadas por esos comandos. Sin embargo, también podemos encontrar códigos que no afecten a ninguna "cosa", sino que ellos sean la cosa (salto de línea, una raya...); estos se insertarán tal cual, y no tendrán apertura y cierre.

Blogueros, somos muchos pero programadores hay no tantos. Por eso, la forma más común para desarrollar un blog efectivo, es conocer lo básico de html y el resto de códigos complicados los copiaremos y pegaremos (siguiendo sus indicaciones) desde las páginas y blogs de los que saben y tienen la generosidad de compartirlo con los demás. Os recomiendo:
Gem@ BLOG
El escaparate de Rosa
Blog & web (Muy recomendable, esta chuleta)
Vagabundia
La bloguería
Blogtenia y sociedad (De mi amigote, Carlos Soler)
entre otros muchos.



Veamos algunos de esos códigos básicos que nos enseñan:

<b> este texto saldrá en negrita </b>

este texto saldrá en negrita



<i> este texto saldrá en cursiva </i>

este texto saldrá en cursiva



<u> este texto saldrá subrayado </u>

este texto saldrá subrayado



<center> este texto saldrá centrado </center>



este texto saldrá centrado




<blink> este texto saldrá parpadeante </blink>

este texto saldrá parpadeante



<b><blink> este texto saldrá pardadeante (y negrita hasta aquí) </b> y aquí sólo parpadeante </blink>

este texto saldrá pardadeante (y negrita hasta aquí) y aquí sólo parpadeante




Cuando el código de un post (o un gadet) comienza a ser muy largo y se nos complica orientarnos, podemos insertarnos comentarios invisibles al navegador "pistas o explicaciones" nosotros mismos en el código de nuestro post, porque el navegador lo ignorará.

<!--En este espacio comienzo a desarrollar la parte graciosa--> (Esto es lo que ponía al principio de este párrafo)



Para forzar una salto de línea se usa (aquí la inserto)
la etiqueta única

<BR/>



Para recuadrar un texto de citación
Mi mamá siempre decía
La vida es como una caja de bombones...


Mi mamá siempre decía que ... <BLOCKQUOTE> La vida es como una caja de bombones...
</BLOCKQUOTE>



Para linkear (dirigir a una página web, un click de ratón sobre una palabra, imagen, etc..):
!éste, es un post la leche de majo!

<a href="http//www.dirección de url"> !éste, es un post la leche de majo! (texto que debe enlazar con esa dirección) </a>



Tamaño del texto:

Para tamaños, podemos usar estos tags (o etiquetas)

<hx>Texto</hx>:

donde x es un valor que podemos modificar desde 1 a 7, tal que así::

<h1>Texto 1</h1>

Texto 1



<h4>Texto 4</h4>

Texto 4



<h6>Texto 6</h6>

Texto 6


O pòdemos usar las etiquetas que especifican el tamaño de la fuente:

<font size="3">este </font> <font size="4">texto </font>
<font size="5">crece </font> <font size="5"> ydecrece </font> <font size="4">otra </font><font size="3">vez. </font>

este texto crece ydecrece otra vez.



Para cambiar el tipo de fuente:

<font face="times new roman">Texto en Times New Roman </font> <font face="arial">Texto en Arial </font><font face="courier new">Texto en Courier New </font><font face="courier">Texto en Courier </font> <font face="roman">Texto en Roman </font>

Texto en Times New Roman  Texto en Arial Texto en Courier New Texto en Courier  Texto en Roman 



Para cambiar el color de la fuente:

Podemos usar el tag con el nombre genérico en ingles del color:

<font color="blue">Texto rojo</font>

Texto rojo

o podemos especificar el color en su código  RGB: 

<span style="color: #ff0000;">Texto en rojo</span>

Texto en rojo
Por suepuesto, estos códigos son complementarios entre sí:

<font face="times new roman" size="5" color="green">Texto verde, en Times New Roman, tamaño 5</font>

Texto verde, en Times New Roman, tamaño 5

domingo, 2 de agosto de 2009

Dudas técnicas de manejo del blog

Aquí vamos a resolver algunos aspectos de edición en el blog:
(Tutorial actualizado en febrero de 2011 por Amelia -Psique- sobre el que, originalmente, nos preparó Segis)




PARA INSERTAR VIDEOS EN LA TABLA "VIDEOTECA":


1º) Cuando accedamos al video, en cuestión, de la página de Youtube, copiaremos el código de inserción (ése que empieza por "<object")
2º) Editaremos la tabla (desde diseño del blog, puesto que no es una entrada sino un "gadget en html", añadido en el pie (footer)) e insertaremos el código justo sobreescribiendo una de las palabras "vacío" (que se estará entre dos etiquetas "<td></td>")
3º) Modificaremos las dimensiones del reproductor para ajustarlo al resto de celdas, así que debemos cambiar los dos valores que encontraremos (aparecerán dos veces por vídeo) al final del código:

width="425" height="344"></embed></object>

Los valores numéricos del vídeo original pueden variar, pero vosotros debéis poner éstos:

width="200" height="250"></embed></object>

(Recordad que estos valores aparecen DOS VECES, cada uno, a lo largo del código de inserción de Youtube y debéis rectificar los finales)

4º) Guardar cambios y ver blog.





Desarrollando un poco más la información:


El esquema de las tablas, en html es el siguiente:

<TABLE>
<TR>
<TD> celda(A1) </TD>
<TD> celda(B1) </TD>
<TD> celda(C1) </TD>
</TR>
<TR>
<TD> celda(A2) </TD>
<TD> celda(B2) </TD>
<TD> celda(C2) </TD>
</TR>
<TR>
<TD> celda(A3) </TD>
<TD> celda(B3) </TD>
<TD> celda(C3) </TD>
</TR>
</TABLE>

En una tabla donde tendríamos las columnas A, B y C, y las filas 1, 2 y 3 (siendo la celda A1 la intersección de esas coordenadas, como en el juego de los barquitos)

celda(A1) celda(B1) celda(C1)
celda(A2) celda(B2) celda(C2)
celda(A3) celda(B3) celda(C3)


Más información útil al respecto, aquí

Así que entre las etiquetas que delimitan la ubicación de la celda, es donde insertamos el contenido que queremos que aparezca; pero las dimensiones del contenido puede ser diferente a las de otro contenido de otra celda, y si queremos que se ajuste a cuadrícula debemos modificarlas.

El código completo de inserción del vídeo de Youtube podría ser éste:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/RsQk3TXg418&hl=es&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RsQk3TXg418&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Pues bueno, de este código entendemos que:

width="425" height="344">

Serán las dimensiones del objeto (vídeo) que vamos a insertar y las dos últimas veces que aparece cómo queremos que se salga. Si contemplamos que las medidas que hemos configurado para el tamaño total del "footer" (el pie del blog), es de 800pt., y queremos que salgan en filas de cuatro, sólo nos caben objetos de 200pt. por eso los redimensionamos así.