curso de informática

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

texto al que se llegará

tablas con formato

noreply@blogger.com (cur1nf) — Wed, 24 Oct 2007 14:33:00 +0000

Podemos dar un sencillo formato a nuestra tabla:

Texto en blanco sobre fondo negro con borde blanco

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

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!!!!

1ªcolumna

2ªcolumna

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

tablas html empleando CSS

noreply@blogger.com (cur1nf) — Wed, 24 Oct 2007 13:26:00 +0000

REDEFINIR ETIQUETAS

Añadir nuevos estilos a nuestra plantilla, dando formato a etiquetas existentes: table, tdtable { border: 1px solid black; width: 350px; } td { border: 1px solid black; padding: 5px; }
table { border: 1px solid black; width: 350px; } td { border: 1px solid black; padding: 5px; }

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

Añadir nuevos estilos a nuestra plantilla , creando nuestras propias etiquetastd.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; }
 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; }

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

noreply@blogger.com (cur1nf) — Fri, 19 Oct 2007 18:55:00 +0000

HTML CON SALTOS DE LINEA:

¿Qué es un blog?

Decidir temática:

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

HTML SIN SALTOS DE LINEA:

¿Qué es un blog?
Decidir temática:
Crear tu blog : acceso, parametrización, publicación..

diseño

noreply@blogger.com (cur1nf) — Fri, 19 Oct 2007 17:10:00 +0000

Elementos HTML no soportados por el editor de blogger:

texto subrayado = , 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

noreply@blogger.com (cur1nf) — Fri, 19 Oct 2007 16:06:00 +0000

símbolos especiales = &# o atajo
< = < = <
> = > = >
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 >

No usar, tendremos problemas:
<plaintext>

más de un espacio en blanco

noreply@blogger.com (cur1nf) — Fri, 19 Oct 2007 15:39:00 +0000

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 =   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 >

reglas básicas html

noreply@blogger.com (cur1nf) — Fri, 19 Oct 2007 14:04:00 +0000

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: ... , <li> ... </li>
Incluir marca de cierre para tags vacíos, ie: <hr />,
Poner entre comillas todos los atributos, ie: <img src="miimagen.gif" />
Todos los tags en minúsculas
Terminar con </html>

CSS

noreply@blogger.com (cur1nf) — Thu, 18 Oct 2007 16:24:00 +0000

comentarios: <!-linea oculta->

/*parrafo oculto*/

aplicar estilos CSS

temas documentación

noreply@blogger.com (cur1nf) — Thu, 11 Oct 2007 20:00:00 +0000

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

noreply@blogger.com (cur1nf) — Thu, 11 Oct 2007 16:05:00 +0000

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

noreply@blogger.com (cur1nf) — Thu, 11 Oct 2007 15:18:00 +0000

¿Qué es un blog?

Decidir temática:

Criterios para decidir el objetivo de tu blog

Buscar blogs por temas. Rankings

Centralizar la consulta de tus blogs favoritos

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

listas anidadas

noreply@blogger.com (cur1nf) — Thu, 11 Oct 2007 14:00:00 +0000

¿Qué es un blog?

Decidir temática:
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

noreply@blogger.com (cur1nf) — Thu, 11 Oct 2007 13:56:00 +0000

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

noreply@blogger.com (cur1nf) — Thu, 11 Oct 2007 13:49:00 +0000

Tiempo estimado:	10 minutos
Nivel:	medio

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

tablas html sin formato

noreply@blogger.com (cur1nf) — Thu, 11 Oct 2007 13:22:00 +0000

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

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

noreply@blogger.com (cur1nf) — Thu, 11 Oct 2007 13:11:00 +0000

la clase crazytext en acción.

Esto es un cuadro con borde y relleno

Éste es un color horrible.

dar permisos

noreply@blogger.com (cur1nf) — Wed, 10 Oct 2007 16:28:00 +0000

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

blog grupal

noreply@blogger.com (cur1nf) — Wed, 10 Oct 2007 16:07:00 +0000

Crear el blog. Por ejemplo: sanadrian
Invitar a nuevo autoress. Tan solo necesitamos conocer su mail
Dar permisos a los autores con mucho ojo
Eliminar a los autores que ya no vayan a seguir participando en el blog cooperativo

eliminar a un autor

noreply@blogger.com (cur1nf) — Wed, 10 Oct 2007 16:05:00 +0000

Existen 2 formas de eliminar a un autor de un blog:

- el propio autor decide no seguir siéndolo

- el administrador elimina al autor

permisos

noreply@blogger.com (cur1nf) — Wed, 10 Oct 2007 15:55:00 +0000

MUCHO OJO!!!!

No pasa nada por invitar a un autor a que escriba
en tu blog, pues se trata de algo inofensivo,
como mucho puede crear post que no sean de tu agrado

Pero si le permites administrar tu blog,
le dejas entrar hasta la cocina
e incluso podría suprimir tu blog
en solo un minuto!!!
o podria eliminar tus permisos administrativos, perdiendo el control de tu blog

Express yourself instantly with MSN Messenger! MSN Messenger

mis fotos

noreply@blogger.com (cur1nf) — Sat, 06 Oct 2007 11:11:00 +0000

imágenes

noreply@blogger.com (cur1nf) — Sat, 06 Oct 2007 10:44:00 +0000

Google

Flickr

PhotoBucket

ImageShack

TinyPic

Village Photos

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