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/