BLOGS: CREACIÓN DE PÁGINAS WEB PERSONALES

1. ¿Qué es un blog?


2. Decidir temática:


• Criterios para decidir el objetivo de tu blog


• Buscar blogs por temas. Rankings


• Centralizar la consulta de tus blogs favoritos


3. Crear tu blog: acceso, parametrización, publicación..


4. Diseño: plantillas, imágenes, tablas..


5. Comentarios: atraerlos a tu blog y evitar spam


6. Enlaces: enlazar, conseguir que te enlacen y conocer quién te enlaza


7. Promoción: como dar a conocer tu blog


8. Ganancias: como ganar dinero con tu blog


9. Trucos: errores en blogs, el arte de escribir blogs, personalizar tu blog


10. Crear otros tipos de blogs: fotoblog, audioblog, blog grupal..

bibliografía sugerencias alertas links

• arte
  
  1. dibujo
  2. escultura
  
  

• politica
  1. españa
  2. internacional


• deporte

enlazar a una determinada posición de un documento

Siempre debemos indicar el punto al que llegar:

<a name="nombre_referencia">texto al que se llegará</a>
Hemos puesto este código al final del documento para que se aprecie que realmente funciona


enlazar a posición dentro del mismo documento:

<a href="#nombre_referencia">descripción del vínculo al que llegaremos</a>
descripción del vínculo al que llegaremos

Ej: índice


enlazar a posición de otro documento HTML:

<a href="URL#nombre_referencia">descripción del vínculo que se encuentra en otro documento al que llegaremos</a>


Ejemplos de diseño

<a href="http://cur1nf.blogspot.com/2007/09/diseo.html#ejs">Ejemplos de diseño</a>













































texto al que se llegará

tablas con formato

Podemos dar un sencillo formato a nuestra tabla:

Texto en blanco sobre fondo negro con borde blanco

<table border="1" bordercolor="white" bgcolor="black"><td><font color="white">Texto en blanco sobre fondo negro con borde blanco</font></td></tr></table><br /><br />



O complicarnos mucho mas la vida:

Podemos poner en nuestra tabla:

• un borde de grosor 3 y color fucsia
• un fondo de color negro


• que ocupe una altura del 10% del ancho de la ventana del navegador


• establecer 4 espacios entre una celda y otra

En nuestras celdas:

• cambiar el color de la letra para que la prima celda sea blanca y la segunda azul


• indicar la alineación horizontal y vertical, la primera alinear a la izquierda y arriba y la segunda a la derecha y abajo

<table bordercolor="fuchsia" bgcolor="black" border="3" width="350" height="100" cellspacing="4" cellspadding="8"><td align="left" valign="top"><span><font color="white"><b>1ªcolumna</b></font></span></td><td align="right" valign="bottom"><span><font color="aqua"><b>2ªcolumna</b></span></font></td></table>

1ªcolumna

2ªcolumna

OJO!!! pq si pasamos a la pestaña de 'Redactar' blogger nos puede traducir nuestra tabla a CSS y ya no se mostrará de igual modo. Ej:

bg border="3" cellspadding="8" style="color:black;"

Solución: ctrl+z antes de publicar para que volvamos a la pestaña de Edición de HTML sin hacernos la transformacion a CSS!!!!
<table border height="100" cellspacing="4" width="350" bg border="3" cellspadding="8" style="color:black;"><tbody><tr><td valign="top" align="left"><span style="font-size:+2;"><span style="color:white;"><b>1ªcolumna</b></span></span></td><td valign="bottom" align="right"><span style="font-size:+2;"><span style="color:aqua;"><b>2ªcolumna</b></span></span></td></tr></tbody></table>

1ªcolumna

2ªcolumna

Pero si la tabla es enorme puede ser tedioso tratar con tantos atributos.
SOLUCIÓN: CSS

tablas html empleando CSS

REDEFINIR ETIQUETAS

1. Añadir nuevos estilos a nuestra plantilla, dando formato a etiquetas existentes: table, td

   
   table {
     border: 1px solid black; 
     width: 350px;
   }
   td {
     border: 1px solid black; 
     padding: 5px;
   }
   

   
   table {<br /> border: 1px solid black; <br /> width: 350px;<br />}<br />td {<br /> border: 1px solid black; <br /> padding: 5px;<br />}
   
   


2. Comprobar que nuestra tabla sin estilo ahora si que dispone de él

Ojo!!! se aplicará a todas las tablas que ya han sido creadas.

Ej: problemas si redefinimos (li) y disponemos de tablas ordenadas y no ordenadas

NUEVAS ETIQUETAS

1. Añadir nuevos estilos a nuestra plantilla , creando nuestras propias etiquetas

   
   td.LeftAlignHdr {
     font-weight: bold;
     text-align: left;
     background-color: #CCCCCC;
   }
   td.CenterAlignHdr {
     font-weight: bold;
     text-align: center;
     background-color: #CCCCCC;
   }
   td.LeftAlign {
     font-weight: normal;
     text-align: left;
   }
   td.CenterAlign {
     font-weight: normal;
     text-align: center;
   }
   

   
   <br />td.LeftAlignHdr {<br /> font-weight: bold;<br /> text-align: left;<br /> background-color: #CCCCCC;<br />}<br />td.CenterAlignHdr {<br /> font-weight: bold;<br /> text-align: center;<br /> background-color: #CCCCCC;<br />}<br />td.LeftAlign {<br /> font-weight: normal;<br /> text-align: left;<br />}<br />td.CenterAlign {<br /> font-weight: normal;<br /> text-align: center;<br />}
   


2. Crear una tabla con esos nuevos estilos CSS resulta más sencillo y menos tedioso que crear la tabla con estilos HTML:
   <TABLE>
  <tr>
    <td class="LeftAlignHdr">
      CONCEPTO</td>
    <td class="CenterAlignHdr">
      2006</td>
    <td class="CenterAlignHdr">
      2007</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      luz</td>
    <td class="CenterAlign">
      200</td>
    <td class="CenterAlign">
      300</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      agua</td>
    <td class="CenterAlign">
      100</td>
    <td class="CenterAlign">
      200</td>
  </tr>
  <tr>
    <tr>
      <td class="LeftAlign">
        internet</td>
      <td class="CenterAlign">
        500</td>
      <td class="CenterAlign">
        600</td>
    </tr>
    <tr>
      <td class="LeftAlign">
        gas</td>
      <td class="CenterAlign">
        900</td>
      <td class="CenterAlign">
        950</td>
    </tr>
    <td class="LeftAlign">
      basuras</td>
    <td class="CenterAlign">
      80</td>
    <td class="CenterAlign">
      90</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      IBI</td>
    <td class="CenterAlign">
      500</td>
    <td class="CenterAlign">
      600</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      comunidad</td>
    <td class="CenterAlign">
      300</td>
    <td class="CenterAlign">
      400</td>
  </tr>
</TABLE>
   
   

   CONCEPTO	2006	2007
   luz	200	300
   agua	100	200
   internet	500	600
   gas	900	950
   basuras	80	90
   IBI	500	600
   comunidad	300	400

   
   
   <TABLE> <tr> <td class="LeftAlignHdr">CONCEPTO</td> <td class="CenterAlignHdr">2006</td> <td class="CenterAlignHdr">2007</td> </tr> <tr> <td class="LeftAlign">luz</td> <td class="CenterAlign">200</td> <td class="CenterAlign">300</td> </tr> <tr> <td class="LeftAlign">agua</td> <td class="CenterAlign">100</td> <td class="CenterAlign">200</td> </tr> <tr> <tr> <td class="LeftAlign">internet</td> <td class="CenterAlign">500</td> <td class="CenterAlign">600</td> </tr> <tr> <td class="LeftAlign">gas</td> <td class="CenterAlign">900</td> <td class="CenterAlign">950</td> </tr> <td class="LeftAlign">basuras</td> <td class="CenterAlign">80</td> <td class="CenterAlign">90</td> </tr> <tr> <td class="LeftAlign">IBI</td> <td class="CenterAlign">500</td> <td class="CenterAlign">600</td> </tr> <tr> <td class="LeftAlign">comunidad</td> <td class="CenterAlign">300</td> <td class="CenterAlign">400</td> </tr> </TABLE>
   

listas con y sin saltos de linea

HTML CON SALTOS DE LINEA:

1. 
   ¿Qué es un blog?


2. Decidir temática:
   
   
   
   • 
     Criterios para decidir el objetivo de tu blog
   
   
   • 
     Buscar blogs por temas.
     Rankings
   
   
   • 
     Centralizar la consulta de tus blogs favoritos
   
   


3. 
   Crear tu blog
   :
   acceso, parametrización,
   publicación..

HTML SIN SALTOS DE LINEA:

1. ¿Qué es un blog?
2. Decidir temática:
   • Criterios para decidir el objetivo de tu blog
   • Buscar blogs por temas. Rankings
   • Centralizar la consulta de tus blogs favoritos
3. Crear tu blog : acceso, parametrización, publicación..

diseño

Elementos HTML no soportados por el editor de blogger:

• texto subrayado = <u>, no es lo mismo que un link



• líneas



• no interpretar etiquetas



• más de un espacio en blanco



• comentarios: <!-texto oculto->
  ojo!! un guión mas para ocultar etiquetas


• tablas



• subíndices y superíndices: A₀=x²+4



• Texto en movimiento: <marquee>
  movimiento desde el boliche

movimiento en el bloque

movimiento de lado a lado





Atributos y combinación de elementos HTML no soportados por el editor de blogger:

• sangrar a distintos niveles



• enlazar a una determinada posición de un documento



• listas anidadas, cambiar los boliches ..
  
  
• Más combinaciones de colores



• manipulación de imágenes

Ejs de diseños:

http://www.smashingmagazine.com/2007/08/28/45-excellent-blog-designs/

no interpretar etiquetas

símbolos especiales = &# o atajo
< = &#60; = &lt;
> = &#62; = &gt;
ayudarse de 'reemplazar'


Solución óptima, insertar en área de texto, pero no respeta saltos de línea:
<textarea cols=50 rows=2 >
<u>texto subrayado</u>
texto normal
<textarea cols=50 rows=2 >
<u><br />texto subrayado</u><br />texto normal<br />


No usar, tendremos problemas:
<plaintext>

más de un espacio en blanco

solución más simple:
<pre>texto en el que se respetan   espacios y saltos de linea</pre>

texto en el que se respetan   espacios y saltos de linea

símbolo especial = &nbsp; pero ojo al cambiar a la pestaña redactar!!!
texto en el que se respetan   espacios
texto en el que se respetan   espacios


tabla sin bordes


imágenes transparentes


insertar en área de texto:
<textarea cols=50 rows=2 >
texto en el que se respetan espacios y saltos de linea

reglas básicas html

Obligatorio:

• delimitar el ámbito de las etiquetas (salvo excepciones)
• etiqueta interna se cierra antes que externa
• etiquetas a nivel de bloque pueden contener etiquetas a nivel de línea, pero no al revés
• etiquetas no sensitivas a mayúsculas

Pero no está de más cumplir además con XHTML:

• Cerrar todos los tags, ie: <p> ... </p>, <li> ... </li>
• Incluir marca de cierre para tags vacíos, ie: <hr />, <br />
• Poner entre comillas todos los atributos, ie: <img src="miimagen.gif" />
• Todos los tags en minúsculas
• Terminar con </html>
  

CSS

• comentarios: <!-linea oculta->
  
  /*parrafo oculto*/

aplicar estilos CSS

temas documentación

Me gustaría que que me indicarais los temas de los que necesitais disponer de documentación, bien porque la veis básica y quereis repasarla en un futuro o porque quereis profundizar más en ese tema y en el curso no da tiempo de abarcar tanto.

Vuestros comentarios me ayudarán a preparar una documentación más acorde con vuestros intereses. Intentaré preparárosla bien en formato electrónico o en papel según el caso.

líneas

Lineas = <hr>


Después del código "hr" especificar el color de línea:
<hr color="fuchsia">

---

Controlar el grosor de la línea especificando tras el color, el grosor deseado:
<hr color="fuchsia" size=1>

---

Controlar el largo de la línea después de especificar el grosor:
<hr color="fuchsia" size=1 width="250">

---

cambiar los boliches de las listas

1. ¿Qué es un blog?


2. Decidir temática:


• Criterios para decidir el objetivo de tu blog


• Buscar blogs por temas. Rankings


• Centralizar la consulta de tus blogs favoritos




3. Crear tu blog: acceso, parametrización, publicación..

<br /> <ol><br /> <li>¿Qué es un blog?</li><br /> <li>Decidir temática:</li><br /> <ul><li class="Sq">Criterios para decidir el objetivo de tu blog</li><br /> <li class="Sq">Buscar blogs por temas. Rankings</li><br /> <li class="Sq">Centralizar la consulta de tus blogs favoritos</li><br /> </ul><br /> <li>Crear tu blog: acceso, parametrización, publicación..</li><br /> </ol><br />

listas anidadas

1. ¿Qué es un blog?


2. Decidir temática:
   
   • Criterios para decidir el objetivo de tu blog
   
   
   • Buscar blogs por temas. Rankings
   
   
   • Centralizar la consulta de tus blogs favoritos
   
   
3. Crear tu blog: acceso, parametrización, publicación..

HTML CON SALTOS DE LINEA -> pbs:

<ol>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/qu-es-un-blog.html">¿Qué es un blog?</a></li>
<li> Decidir temática:
<ul>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/criterios-para-decidir-el-objetivo-de.html">Criterios para decidir el objetivo de tu blog</a></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/buscar-blogs-por-temas.html">Buscar blogs por temas</a>.
<a href="http://cur1nf.blogspot.com/2007/09/rankings.html">Rankings</a></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/centralizar-la-consulta-de-tus-blogs.html">Centralizar la consulta de tus blogs favoritos</a></li>
</ul></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/crear-tu-blog.html">Crear tu blog</a>
:
<a href="http://cur1nf.blogspot.com/2007/09/acceso.html">acceso</a>, parametrización,
<a href="http://cur1nf.blogspot.com/2007/09/publicacion.html">publicación</a>..</li>
</ol>




HTML SIN SALTOS DE LINEA -> se puede copiar y pegar en la pestaña 'Edición de HTML' de alguno de vuestros posts:


<ol> <li> <a href="http://cur1nf.blogspot.com/2007/09/qu-es-un-blog.html">¿Qué es un blog?</a></li> <li> Decidir temática: <ul> <li> <a href="http://cur1nf.blogspot.com/2007/09/criterios-para-decidir-el-objetivo-de.html">Criterios para decidir el objetivo de tu blog</a></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/buscar-blogs-por-temas.html">Buscar blogs por temas</a>. <a href="http://cur1nf.blogspot.com/2007/09/rankings.html">Rankings</a></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/centralizar-la-consulta-de-tus-blogs.html">Centralizar la consulta de tus blogs favoritos</a></li> </ul></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/crear-tu-blog.html">Crear tu blog</a> : <a href="http://cur1nf.blogspot.com/2007/09/acceso.html">acceso</a>, parametrización, <a href="http://cur1nf.blogspot.com/2007/09/publicacion.html">publicación</a>..</li> </ol>

Así es como se muestran las listas creadas con esos fragmentos de código HTML

tablas

tablas html sin formato

tablas html con formato

tablas html empleando CSS

añadir tablas a las plantillas

ejemplo de tabla creada desde plantilla de entrada

Tiempo estimado:	10 minutos
Nivel:	medio

Hemos creado una tabla añadiendo codigo html a la plantilla de los posts

tablas html sin formato

OJO!!! Ninguna de las tablas que creemos se visualizarán como tales en la vista previa. Debemos fiarnos del aspecto de la pestaña de redactar

nota: el html no tiene ningun salto de linea, son para visualizar mejor el html:

Tabla de 3 columnas:

<table>
   <tr>
      <td>1ª Columna</td>
      <td>2ª Columna</td>
      <td>3ª Columna</td>
   </tr>
</table>

1ª Columna

2ª Columna

3ª Columna

OJO!!! si no añadimos propiedades, nadie diría que es una tabla...
SOLUCIÓN: añadir borde

<table border="1">
   <tr>
      <td>1ª Columna</td>
      <td>2ª Columna</td>
      <td>3ª Columna</td>
   </tr>
</table>

1ª Columna

2ª Columna

3ª Columna

Podemos tener casillas bajo nuestras columnas:

<table border="1">
   <tr>
      <td>1ª Columna</td>
      <td>2ª Columna</td>
      <td>3ª Columna</td>
   </tr>
   <tr>
      <td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
      <td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
      <td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
   </tr>
</table>

1ª Columna	2ª Columna	3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila	Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila	Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila

Podemos resaltar los encabezados de columnas:

<table border="1">
   <tr>
      <th>1ª Columna</th>
      <th>2ª Columna</th>
      <th>3ª Columna</th>
   </tr>
   <tr>
      <td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
      <td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
      <td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
   </tr>
</table>

1ª Columna	2ª Columna	3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila	Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila	Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila

Podemos poner un título que se ajuste al ancho de nuestra tabla:

<table border="1">
   <caption>Esta es una tabla de 2 filas x 3 columnas que va a contener estadísticas de visitas a mi blog</caption>
   <tr>
      <th>1ª Columna</th>
      <th>2ª Columna</th>
      <th>3ª Columna</th>
   </tr>
   <tr>
      <td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
      <td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
      <td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
   </tr>
</table>

Esta es una tabla de 2 filas x 3 columnas que va a contener estadísticas de visitas a mi blog

1ª Columna	2ª Columna	3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila	Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila	Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila

<table border="1"><caption>Esta es una tabla de 2 filas x 3 columnas que va a contener estadísticas de visitas a mi blog</caption><tr><th>1ª Columna</th><th>2ª Columna</th><th>3ª Columna</th></tr><tr><td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td><td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td><td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td></tr></table>


Ej: podemos crear una tabla para añadirla a la plantilla de entrada!!!!!

Tiempo estimado:	minutos
Nivel:	avanzado medio bajo

OJO con tener la tentación de poner cada etiqueta en una linea!!!!!
Pues nos encontraremos con muchas lineas en blanco antes de mostrar la misma:
<table border="1">
<tr>
<td>Tiempo estimado:</td>
<td>minutos</td>
</tr>
<tr>
<td>Nivel:</td>
<td>avanzado medio bajo</td>
</tr>
</table>

Tiempo estimado:	minutos
Nivel:	avanzado medio bajo

SOLUCIÓN: usar editores HTML para complicarnos un poco menos la vida.
Ej: pspad

aplicar estilos CSS

la clase crazytext en acción.

Esto es un cuadro con borde y relleno

Éste es un color horrible.

dar permisos

En las siguientes imágenes puede verse como convertir a un autor en administrador y como se visualiza en blogger la nueva situación:

NOTA: Si no se aprecian las imágenes, situarse sobre cada una de ellas, dar al botón derecho del ratón y escoger abrir vinculo en una ventana nueva