ARTESANA...., MI BELEN.: SPACES, TALLER

APRENDE A MEJORAR TU ESPACIO

Mon, 24 Mar 2008 06:44:02 GMT

INDICE DEL TEMA:

NOCIONES BASICAS:

IMAGENES:

CONSTRUYENDO MI ESPACIO:

EXPLICACION PARA HACER UN CUADRO:

NOCIONES BASICAS

COMPOSICION DE UN ESPACIO

Es una especie de diario personal con varios álbumes de fotos y diversos accesorios, como si fuese nuestro escritorío, privado o para compartirlo. Se compone principalmente de los siguientes elementos: FOTOS, BLOG, LISTAS, ACCESORIOS

FOTOS- Estan agrupadas en álbumes, los creas tu mismo con el nombre que quieras siguiendo unas sencillas instrucciones. Puedes meter 500 cada mes. la calidad de las fotos no es maravillosa, pero se ven.

BLOG- El blog se organiza por entradas, cada una con su título, y luego se agrupan por categorías, que vienen ya prefijadas, pero podeis añadir 15 mas, diferentes, segun vuestras necesidades. En el blog es el unico sitio del espacio donde se puede poner un texto extenso, aunque en las listas se puedan proporcionar mas textos mediante enlaces con otras páginas. El texto del blog puede incluir fotos, animaciones y enlaces con otras URL.

LISTAS- Hay como habreis visto varias que están ya preparadas, libros, música, y blog, pero ademas teneis la opción de un numero indeterminado de "listas personalizadas" a las que vosotros poneis el nombre segun deseos. En todas ellas podeis poner un título, un breve comentario y un enlace con otra página.

ACCESORIOS- El espacio proporciona una serie de útilidades o complementos, las herramientas, el perfil, el título, libro de visitas, etc, para satisfacer diversas necesidades, de almacenamiento, comunicación, etc. Son:

MODULOS, son cada uno de los recuadros o apartados que nos proporciona el espacio o que añadimos nosotros, pueden ser de diferentes tipos, y algunos contienen los gadgets, custom, media player, blog, etc.

GADGETS, son "chismes" que diriamos nosotros, una radio, un reloj, un contador, un sistema para decirte la nacionalidad de quien te conecta, etc. Son módulos útiles, o de diversión, juegos, música, etc.

LO PRIMERO

1- Lo primero es tener nociones básicas de internet, normalmente si habéis llegado hasta aquí, ya sabéis algo. Es muy útil entrar en esta dirección donde os darán la información mínima necesaria, os prometo que es sencilla, resumida, con dibujos y BREVE (no me pagan nada, ni siquiera me enlazan). Si no os dá la gana, os lo saltáis y volvéis a este paso cuando tengáis curiosidad, entre otras cosas ofrecen un pequeño diccionarío de términos especalizados, glosario.

http://www.learnthenet.com/spanish

2- Hay que tener una cuenta de MSN, las que terminan en @hotmail.com, con ella tenéis gratis un Messenger y un Spaces. Procurad visitar algunos espacios para ver en que consiste y lo que hacen los demás. En el Messenger clik en "ir a tu espacio" y seguid las instrucciones, como siempre para instalarlo, decir que sí a todo, no hay nada grave. La dirección que pongáis no la podéis cambiar, pensadla bien, pero el resto, incluso el nombre, lo podéis modificar luego, así que no hay problema.

3- A continuación delante del espacio, que vendrá con un diseño preconfigurado para que tengais un soporte mientras no lo ponéis a vuestro gusto, miráis bien y exploráis para ver lo que se puede hacer con cada módulo, es muy importante verlo todo para poder seguir las instrucciones que vienen despues. Cualquier cosa que se haga salvo eliminar el propio espacio, es recuperable, así que sin miedos. No os infléis a poner fotos, que solo os dejan 500 al mes.

4- Lo siguiente es pinchar arriba a la derecha en AYUDA,o directamente aquí http://help.live.com//help.aspx?project=WL_Spaces&market=es-es&querytype=keyword&query=qaf&tmt=&domain=live.com&format=b1 se abre una ventana y entráis en las instrucciones del espacio, a la derecha os ofrecen la información y a la izquierda el índice de lo que veréis a la derecha. Despues id a TABLA DE CONTENIDOS, está en la columna de la izquierda debajo del todo. Ya podéis ir siguiendo las indicaciones, volviendo al índice despues de cada apartado en el orden de vuestra elección.

DIRECCION, URL O RUTA

La URL, es la dirección de la página que tenemos abierta en ese momento o que queremos abrir. Cada entrada del blog tiene una URL y cada foto del blog tambien la tiene. Según vamos moviéndonos por una web vamos cambiando de página y va cambiando la dirección, la véis arriba del todo a la izquierda junto a las flechas de detrás, delante y empieza por http://

PROGRAMACION Y LENGUAJE HTML

La informática usa una serie de fórmulas que el programa del ordenador entiende y convierte en un texto claro para nosotros. Lo que aparece es ya la traducción, de un lenguaje que está detrás en la parte oculta que no vemos y que son estas fórmulas.

Todas las páginas web están hechas así, os lo demostraré, si pulsáis cuando estéis dentro de cualquier página en " ver" arriba en la barra donde pone, archivo, edición, ver.....o para quien no lo tenga, apretando en el botón del ratón de la derecha, como si fuésemos a copiar, pero luego a" ver código fuente" sale una ventana llena de cosas incomprensibles, eso es programación, esos son los códigos de instrucciones, llamados etiquetas.

Cuando estamos en nuestro espacio poniendo nuestros textos lo hacemos en el modo edición, todo lo que ponemos se va guardando en otro texto oculto que podemos ver si pinchamos en HTML, para salir lo pinchamos de nuevo. El sistema de pregrabación de nuestro espacio nos permite hacerlo cómodamente sin tener que tener que usar ese lenguaje complicado, es decir el sistema ha traducido el texto con nuestras instrucciones. Cada cosa que yo os enseñe en HTML la ponéis primero en una entrada vacía y así podéis ver solo y exactamente lo que acabáis de hacer. Si queréis mirar de mi espacio como está algo hecho, marcáis el texto, le dáis a copiar, lo pegáis en una entrada nueva, despues le dais a HTML y veis como está hecho "por detras"Después no le dais a "publicar entrada" y se borrará.

No hay que aprenderlo, solo saber de que estamos hablando, así, para decirle al texto que se ponga en el centro solo tenemos que marcar con el ratón el texto y pinchar en la barra donde pone centro, pero al hacer esto con el panel de instrucciones es como si escribiésemos dentro <DIV align=center>. Como en todo, hay varios "sistemas" pero en cada sitio web que estemos escribiendo nos lo van a poner en una barra de edición , para que editemos sin necesidad de conocer ese lenguaje, que suele ser el lenguaje HTML y que se expresa por medio de "etiquetas", con un codigo .

A todos los que quieren aprender les digo lo mismo, solo tocando y practicando se aprenden las cosas, ya sea técnica literaria, informática o a conducir, porque aunque hagáis un cursillo se os olvidará al no ejercitarlo. Lo mejor para ver todo esto es tener vuestra propia "página web", todos los que tenéis un correo, que termine por @hotmail.com tenéis por ello un servicio de messenger y un espacio gratuito como este.

Los espacios de MSN, son fáciles de manejar porque están programados de manera que solo hay que pinchar en donde queremos y se envían las ordenes sin más esfuerzo, pero os familiarizaréis con el sistema. Cuando se está editando si se pulsa el botón HTML, se "ve" la parte de detrás lo que está en ese lenguaje y se pueden sacar muchas conclusiones. También en el word se puede editar para páginas web, en función lenguaje HTML.

Este lenguaje consiste en fórmulas, cada una de ellas le da una instrucción al ordenador. Siempre empieza por la orden y siempre termina por el fin de la orden, las claves están metidas en una caja formada por estos signos de puntuación, < > o estos [ ] Para dar la orden de fin de orden, se pone en la caja este signo / , todo lo que vaya entre estas cajas seguirá la orden.

Se les suele llamar etiquetas y ya os he dicho que pueden cambiar según el sistema de programación, pero siempre debe haber, aunque a veces no la veamos, la que abre, la que cierra y unos signos de separación entre ellas. Las fórmulas por difíciles y largas que parezcan solo tenemos que copiarlas con el ratón y pegarlas. No hay mas que ocuparse de que no haya espacios en blanco y de no dejarnos olvidado ningún símbolo.

Las imágenes, que aparecen en nuestras webs, sean fotos o dibujos, no se guardan en las páginas como las tenemos en el disco duro de nuestro ordenador, se tienen almacenadas en otra página web, y lo que ponemos dentro de la fórmula correspondiente es la dirección, que se llama URL, o RUTA, de la página donde está guardada. Para comprobarlo es bien fácil, os ponéis sobre la foto, le dáis con botón derecho del ratón y se abre una ventana enorme con un montón de opciones, en vez de copiar como siempre, pincháis "propiedades" y se abre otra ventana donde aparece toda la información de la foto, tamaño, sistema, y la URL.

EJEMPLO DEL HTML DE NUESTROS ESPACIOS

Entre paréntesis está mi explicación, es solo un ejemplo.

Renglón vacío) <DIV align=center> </DIV>

Orden centrar) <DIV align=center>

IMAGENES

Es la información que presentamos que no es el texto y actua como un bloque, los banner, los carteles, los gifs, las fotos, etc. Pueden ser animadas o no. Se suele decir "subir" una foto cuando la ponemos en algun sitio, y "bajar" cuando la tomamos. Hay que considerar que a cada imagen que tengamos también se le puede llamar archivo, esté sola o en una carpeta.

Oiremos hablar por un lado de, banners, gifs, animaciones, carteles, botones, logos y por otro de fotos. Por lo que a las primeras nos ocupa, los botones son las imágenes que sirven para ser pinchadas por el raton, y los otros son dibujitos o carteles que se mueven o no y que sirven para captar la atención del internauta, con un anuncio, un adorno, una marca comercial, un nombre. En cuanto al uso que haremos de ellas en el espacio será el mismo, sean fotos o de las otras actuaremos para ponerlas de la misma manera, nosotros decidimos cuando usamos unas u otras. Gifs es un término que refiere al sistema de programación con que se ha hecho la animación, Banner refiere al uso que suele ser publicitario, los dos son una imagen animada casi siempre para llamar la atención. Os pongo unos enlaces para que entréis en webs donde hacer vuestras propias animaciones, carteles y logos personalizados como los de mi espacio. En la página principal hay una lista con los mejores links. Tened precaución, algunas webs de este tema he comprobado que dan muchos problemas, estas no.

COMO COGER IMAGENES

Para coger una foto ponemos encima el raton y presionamos con el boton derecho, marcamos "guardar como" y la metemos en nuestro archivo para disponer de ella cuando sea necesario.

Si no sabeis hacerlo seguid estas instucciones http://www.gifss.com/guardar_gif/

Cuando tengáis la imágen, la llevais al fichero vuestro, "copiar/pegar" y desde allí ya las podéis llevar a una entrada del blog o al álbum siguiendo las instrucciones. Después hablaremos de ello. Aunque las imágenes se pueden robar de otro espacio y ponerlas en el nuestro, pero lo lógico es ponerlas primero en nuestro ordenador, botón derecho, "guardar como" de allí bajarlas al blog y luego a su sitio en el texto de la entrada del blog que decidamos.

URL DE UNA IMAGEN

Las fotos que están en internet todas tienen su propia dirección como cualquier otra página web, puede estar abierta al público en general o ser de uso restringido pero todas tienen su URL. Para verla nos situamos sobre la foto, presionamos con el ratón derecho, aparece una ventana grande y vamos a "propiedades", en la siguiente ventana ya vemos todas las características de la imagen, medidas, ect, y entre ellas la URL. Esta dirección nos será útil para muchas cosas como iremos viendo.

CONSTRUYENDO MI ESPACIO

PONER IMAGENES EN EL BLOG

Poner imágenes en el álbum es fácil, solo hay que ir haciendo lo que nos indican, ponerlas en una entrada del blog es igual de sencillo, dandole a "agregar fotos" y nos saldrán las fotos como unos cuadraditos pequeños donde tengamos el puntero del ratón. Lo que hay que hacer primero es abrir las fotos pinchando sobre ellas con el botón derecho y después a "abrir" , ya en la página donde aparecen abiertas de su tamaño las robamos con el sistema "copiar/pegar" de siempre, luego las pegamos en la parte del texto que nos interese y si queremos después las borramos de la parte inferior. Ved por ejemplo en mi blog la entrada "PERSIANA ENROLLABLE" que están todas las fotos intercaladas, ya no hace falta como antes que se queden todas juntas al final.

OJO, SI LAS BORRAMOS DEL BLOG Y NO ESTAN EN OTRO SITIO DEL ESPACIO DESAPARECE LA FOTO Y POR ELLO LA PÁGINA WEB, Y NO HAY URL.

Si intentamos llevarlas directamente con el sistema "copiar/pegar" de nuestro ordenador o de los álbumes, al texto del blog, NO SE PUEDE. Lo que sí se puede hacer es robarlas directamente de otro blog, entonces no hay problema para ponerlas en una entrada del blog en el lugar del texto que queráis, pero la URL no será la nuestra. Así que es mejor seguir el procedimiento ya explicado, guardar en tu disco duro y agregar foto.

Las fotos estan guardadas en "configuración", en "almacenaje", pero solo se guardan las del álbum y las de las entradas.

La dirección de la página donde está la foto la ves si pinchando con el ratón, pones la entrada en HTML, sale la URL de la imagen, introducida por un código, las etiquetas de las que hemos hablado antes. Si repetimos la fórmula en otro sitio que admita lenguaje HTML sale la imágen de nuevo.

Con la barra de edición podemos ampliar la foto, reducirla y colocarla en el lugar que queremos. Pinchamos sobre la imagen con el ratón y se queda metida en un cuadro blanco, si nos ponemos suavemente sobre las esquinas o sobre la mitad de los bordes podemos arrastrar y agrandar o encoger la foto, pero puede perder nitidez . Tambien podemos editar los textos, con color, tamaño, tipo de letra, subrayado, etc. siguiendo las instrucciones de la barra de dición, eso se explica en ayuda si hay dudas.

REDIRECCIONAR

A veces queremos dirigir a los visitantes de nuestra página a un sitio específico, puede ser a otro espacio pero tambien puede ser a otra entrada del nuestro. Lo primero es fácil ponemos en una lista o en el blog, el enlace de la URL, de esta página donde queramos que vayan y al pinchar van allí de cabeza. Si queremos que lleguen a un sitio concreto del nuestro lo que haremos es mandarlos una página de nuestro propio espacio poniendo su URL, pero no en modo edición, le damos a "personalizar", arriba a la derecha en la barra de herramientas del espacio y allí a salir del modo de edición y en esa dirección es donde los tenemos que mandar. Para ello seguimos el sistema "copiar/ pegar"que utilizamos para coger las imagenes. Fijaros en mis listas veréis como muchas de ellas remiten a páginas del blog.

INDICES

¿ A donde los podemos querer mandar dentro del espacio y para que ? A las fotos, al blog, hay muchas posibilidades, la mas utilizada es para hacer índices. El blog se organiza como hemos visto por entradas cada una con su título, y las entradas por categorías, de manera que se ordenan todas las de una misma categoría juntas. Si queremos establecer un índice del contenido de una categoria, destacar algunas entradas de diferentes categorías como muestra, o exponer una serie de entradas por cualquier motivo, es necesario crear una lista con estas entradas. Por ejemplo yo tengo una lista de algunas entradas del blog agrupadas en la categoría "BELENES, TALLER" y otra de "SPACES, TALLER", donde estan todas estas entradas enumeradas una a una y al pinchar sobre ellas reenvio directamente a los visitantes a la entrada seleccionada.

El sistema habilitado por el espacio prevé buscar la entrada deseada entre todas las entradas del blog, o entre todas las de su misma categoría, sin posibilidad de un índice, lo cual es agotador si el blog está repleto. Con esta acción podemos idear múltiples posibilidades, mezclar entradas nuestras con las de otro blog, con páginas de internet, con música, etc. En resumen esta acción nos permite muchas variantes. Esto se puede hacer porque el espacio tiene habilitada una URL para cada entrada, ponemos su dirección y el visitante al pinchar aparece donde hemos decidido. En mi espacio podeis ver que hay varias listas, unas con enlaces, otras sin ellos y que llevan a otras webs o a mi blog.

Otra opción es derivar hacia las entradas del índice que está en el módulo "contenido del espacio". Si pulsamos en listas por ejemplo, nos ponen en una página con el contenido de una lista a la derecha y una tira lateral con el menú de todas las listas, hacen igual con las fotos. Así nosotros podemos escribiendo la URL correspondiente, enviar a los visitantes a una sola lista o a la página donde están todas las listas.

WINDOWS MEDIA PLAYER

INSTALACION

Es fácil de instalar porque viene incluido entre los módulos que ofrece el espacio. Seguir este proceso empezando arriba a la derecha: Personalizar -> Módulos -> Otros -> Windows Media Player -> Agregar

COMPLETARLO

Se trata de escribir una formula en el casillero habilitado para ello. Solo hay que poner la URL del sitio donde está la música, canción o radio y contestar las preguntas que nos hacen sobre la programación deseada.

Para tener una dirección que poner en el media player hace falta tener la canción en una página, bien tenemos una música propia y la ponemos en otra página web, para tener una URL, bien usamos una web especializada en música para los espacios que buscaremos en internet. Para saber la URL de la que queremos poner, no vale mirar la barra de arriba del todo cuando esté sonando la música, porque normalmente estará tapada por el reproductor, así que debemos hacer un clik con el boton derecho del raton en el paso antes de ir a la entrada donde está el reproductor. Si lo hacemos con el izquierdo, entraríamos al reproductor, que no queremos. Antes de entrar damos como he dicho al boton derecho del ratón y luego elegir la opcion "copiar acceso directo". Ya tenemos la URL, es como si le hubiesemos dado a "copiar" luego ya solo debemos soltarlo en el casillero con el sistema habitual, dandolé a "pegar". En la lista de páginas recomendadas está una dirección que tiene muchas canciones, lástima que sean solo música midi.

CUSTOM HTML

DESCRIPCION Y UTILIDADES

Es un tipo de gadget que consiste en un módulo vacio no muy grande, puede ocupar cualquiera de las columnas del espacio y permite escribir en HTLM, con ello podemos poner en él un texto breve, un rótulo luminoso, una foto, un banner, etc... Si miráis en mi página central, tengo tres módulos Custom uno es donde está la foto del río, otro donde está el cartel de despedida con las fotos, y uno con el logo de Artesana arriba a la derecha. Lo importante es que permite escribir algo fuera del blog o de las listas. Es una entrada independiente que podemos configurar con un menú que tienen los módulos arriba a la derecha para programarlo con o sin reborde, al ancho que queramos y con o sin título.

Hay dos tipos: Los que proporciona el espacio en la lista de módulos y los que instalamos entrando en "otros gadges" .

INSTALACION DEL CUSTOM

Es diferente en cada uno de ellos:

Ahora el espacio ofrece la posibilidad de elegir entre entre los módulos uno que se llama "para escribir en HTML" o algo así, lo pincháis porque es lo mismo, y os ahorráis el trabajo de buscar otro en los gadges, podéis poner más de uno.

Si queréis otros modelos es también facilísimo, seguimos las instrucciones del espacio: 1- personalizar (arriba a la derecha, en el control ). 2- módulos. 3- Accesorios 4- Ahí pinchar en Agregar gadgets desde Windows Live™ Gallery vamos siguiendo lo programado y nos dan a elegir varios módulos elegimos entre los que sean custom el que mas nos guste, podemos probarlos para decidir, cuando volvamos a la página central estará ya allí. Recordad que al final hay que darle siempre a guardar.

COMPLETAR UN MODULO HTML

Se trata de escribir dentro del módulo custom, un texto, puede ser texto normal o en HTML, es decir, unas etiquetas en modo editar que se convertirán en texto normal, con o sin imágenes, en modo ver.

Despues le dais a GUARDAR. En algunos custom solo se ve el contenido cuando estamos fuera del sistema de edición, así que para ver si está bien pinchar en "personalizar" y en "salir del modo de edicion". Hay que completar tambien las casillas del custom: El título que queráis ponerle, es obligatorio, pero se puede dejar oculto. Tambien decidimos si queremos que el módulo ocupe todo el ancho de la página y que esté dentro de un recuadro o no. Luego dar a GUARDAR o se borrará todo.

PONER UNA IMAGEN EN EL CUSTOM

Para una imagen, es necesario escribir dentro del módulo la siguiente formula:

<div align="center"><img src="aquí poner la URL de la imagen"></div> Otra formula <img src="URL">

Para poder poner la URL de una imágen, es necesario tenerla en una página de internet, si la imagen está en nuestro archivo hay que pasarla a alguna web, hay webs que se dedican a esto, se llaman hosting y puedes poner allí tu imagen, en mi página principal hay una lista con todas estas direcciones útiles. El sistema que propongo y he utilizado es mas sencillo, la ponemos en nuestro blog que tambien es una página web con dirección. Es decir si ponéis una imagen en una entrada del blog o en el álbum de fotos, ya teneis una URL, para poder ponerla en todos los sitios que admitan lenguaje HTML.

Todas las fotos que tenemos en el blog están guardadas. Si pinchais arriba a la derecha en "configuración" y despues en "almacenamiento" las véis allí, en fila y con la fecha de entrada . Podemos abrir la foto pinchando encima y luego copiar la URL que aparece en la barra superior cuando aparezca la página de la foto o le damos antes de entrar al boton derecho del raton en vez de al izquierdo y luego elegimos "propiedades" donde vemos la información o "copiar acceso directo" que equivale a "copiar" así que luego solo tenemos que poner "pegar" en donde haya que poner la URL.

Todas las fórmulas deben estar completas, sin huecos y recordad siempre que las comillas deben ir antes y despues de las URL. Si os coméis una línea, las comillas o cualquier detalle, no saldrá bien, no os desaniméis tarde o temprano sale.

DOS IMAGENES

Una dentro del módulo y otra fuera del recuadro, es como antes pero con estas fórmulas:

BOTON CON INFORMACION

Tendremos una imagen que hace de botón con una URL oculta para cambiar de página y ademas al superponer el ratón un rótulo explicando la función que tiene el botón. Hay que hacer lo de siempre, poner la etiqueta correcta y aparecerá la imagen deseada:

Ejemplo, ponte sobre la mariposa, que aquí sería el botón, un texto explicativo te dirá donde vas si pinchas en ella.

NUESTRAS IMAGENES EN OTRO SITIO

En cualquier otro sitio que admita el lenguaje HTML podemos poner la misma "formula" que en el custom, en un foro por ejemplo, lo importante es fijarnos en que esté habilitado el lenguaje HTML, porque estas formulas son este lenguaje. Si pasáis en el espacio al lenguaje HTML y dais a copiar/pegar podeis copiar las fotos o imágenes en cualquier otro sitio que tenga este lenguaje.

En algunos foros dejan poner música en las entradas del blog, el espacio deshabilita estos códigos por seguridad.

EXPLICACION PARA HACER UN CUADRO

Para hacer un cuadro con marco simplemente tenemos que escribir unas fórmulas, en la versión HTML de la entrada del blog, cada una de ellas le da una instrucción al ordenador. Como hemos dicho siempre empezamos por la orden y terminamos por su cierre, y siempre las claves que se llaman etiquetas, están metidas en una caja bordeada por estos signos de puntuación, < >. Para que la orden deje de estár en vigor, se le pone este signo delante /, todo lo que vaya entre estas dos cajas obedecerá la orden expresada en ella.

El cuadro se trata de una tabla, el espacio no de la opción de insertar tabla, pero pincháis en HTML escribís

1._ La etiqueta de "abrir tabla", < TABLE> que incluye vários datos de la tabla, la medida del ancho, width= 600, la posición de alineación al centro, align=center y el tamaño del borde, border=6.

2._ Después ponéis la etiqueta de "dentro de la tabla"<TBODY>, todo lo que va a partir de aquí, hasta cerremos <TBODY> es lo que va dentro de la tabla.

3._ Dentro de la tabla va, la etiqueta <TR> que indica el número de casillas vérticales, pero nosotros no ponemos nada porque solo hay una y la etiqueta <TD> dentro de ella debemos poner el color o la foto de lo que queremos que sea la tabla misma y a continuación ponemos el texto escrito o copiamos la foto que lleve nuestra tabla.

4._ Cerráis todo lo que habéis abierto antes.

Según este modelo:

<TABLE width=600 align=center border=6> <TBODY><TR><TD> Aqui vuestro texto </TD></TR></TBODY></TABLE>

Solo escribiendo esto ya tenemos una tabla simple al volver al estado normal de edición, es así de sencillo. A esa tabla se le puede escribir cualquier texto, por supuesto ya para ello tenéis todas las facultades de edición del espacio, en color de la fuente y del resaltado, tamaño, fuente, etc...Esta tabla se puede ir complicando, poniendo un marco extra. Se puede marcar solo la medida del ancho y de largo crece sola a la medida precisa según se va rellenando o se puede poner la medida del ancho y el largo, y así guardaría siempre una proporción definida.

Cada "cuadro" se compone al menos de una tabla con o sin marco y después podéis superponer varios cuadros. Las partes que componen la tabla pueden estár formadas por superficies de colores o por fotos, menos el borde exterior que no admite foto. Las fotos son solo un cuadradito o una tira que se repiten varias veces. Curiosamente estas imágenes al estar siendo parte de una fórmula no se pueden robar como las demás, aunque presionemos el ratón no aparecen, pero se podría mirar en el "código fuente " de la página para ver su URL.

Las imágenes que componen nuestro cuadro, sean fotos o dibujos, se tienen almacenadas en otra página web, no están allí, lo que está es solo la URL de la imagen. No podéis poner una dirección que no esté siempre abierta a todo el mundo o solo se verán cruces.

Lo más fácil es tomarlas de una página que las ofrezca ya hechas, yo os pongo algunas, pero podemos hacerlas nosotros mismos si nos vamos al "paint" o a cualquier editor de imágenes y a una imagen vacía le ponemos color, podríamos incluso tomar un trozo de una foto recortada. Os pongo de todas maneras enlaces de páginas expecializadas. Podemos también poner fotos de nuestro propio espacio, metemos la foto en nuestro disco duro, luego traemos la foto a la entrada del blog o al álbum, despues les miramos la dirección y la ponemos en la fórmula, así que será un diseño nuestro total.

Primero os doy las fórmulas con una explicación, así sabréis lo que es cada cosa y podréis hacerlas por vuestra cuenta, sustituyendo las fotos, salen otros modelos. Para repetir las tablas solo hay que darle a "copiar", después ir a una entrada del blog, pinchar HTML darle a "pegar", volver a pinchar HTML y ya está la tabla en el blog dentro escribimos lo que queramos o ponemos foto. Solo hay que personalizarlas si es que queremos hacerlo.

VOCABULARIO HTML

Pongo una fórmula y explico lo que es cada etiqueta, pero ya digo que quien no quiera líos solo tiene que copiarlas.

Cambio de renglón) Un solo espacio, <DIV> </DIV> o doble espacio, <P> </P> 1 Espacio horizontal)  

Color) <FONT color=#333399> Color y tamaño) <FONT color=#333399 size=4>

Posición) <DIV align=center></DIV>._ Centro = center; Izquierda = left; derecha = right

Abrir tabla) <TABLE borderColor=#00099 height=Nº cellSpacing=Nº cellPadding=Nº width=Nº align=center bgColor=#ffffff border=Nº> e

Alto de tabla) height=Nº Ancho de tabla) width=Nº

Marco exterior o borde de tabla, ancho) border=Nº Marco interior, ancho) cellSpacing=Nº

Introduccion fotos o color) Las fotos se introducen por <background= URL> y los colores por <color=código>

Foto del marco interior) background=http://www.fiestac.com/fondos/aglitters/fade-001.gif border=nº>

Color del marco) <bgColor=#fff000 border=nº>

Color del borde de la tabla) borderColor=#fa58ac (se elige color en la barra de edición del espacio, o en una web de colores)

Dentro de la tabla a partir de TBODY) <TBODY><TR><TD>

Foto de la tabla) <TD background=http://www.fiestac.com/fondos/Color15.jpg> (se elige URL foto )

Color de la tabla) <TD bgColor=#fff000> (se elige color )

Cerrar tabla) </TD></TR></TBODY></TABLE></DIV>

MODELOS Y ETIQUETAS

Se pincha HTLM, se escriben esas fórmulas, después se vuelve pulsar HTLM y ya debe salir un cuadro vacio, si no sale es que os habéis dejado un simbolo mal puesto, comprobad las comillas y que la dirección de las fotos sea correcta. Se le da a editar y queda guardado. En resumen yo escribo esto en la versión HTML:

Tabla sola sin foto dentro y sin color

tabla sola

Tabla sola sin foto dentro con color en el borde y en la tabla.

Tabla con color.

Tabla doble sin foto dentro con color en el borde y en la tabla.

<DIV align=center><DIV> </DIV><TABLE borderColor=#c13365 cellSpacing=55 cellPadding=10 width=600 bgColor=#000066 border=6><TBODY><TR><TD bgColor=#c13365><DIV>TEXTO</DIV></TD>
<TD bgColor=#c13365>TEXTO</TD></TD></TR></TBODY></TABLE></DIV><DIV> </DIV><DIV></DIV>

TEXTO

TABLA DE COLORES POR NOMBRES

Con nombres en vez de con cifras: http://ima.udg.edu/~dagush/cursoHTML/etiquet2.htm

black	###	maroon	###	green	###	olive	###
navy	###	purple	###	teal	###	gray	###
silver	###	red	###	lime	###	yellow	###
blue	###	fuchsia	###	aqua	###	white	###

MAS FORMULAS CON FOTOS

<DIV align=center> <TABLE cellSpacing=55 cellPadding=0 width=540 background=http://www.fiestac.com/fondos/tira43.gif border=6> <TBODY> <TR> <TD background=http://www.fiestac.com/fondos/Color07.jpg> TEXTO </TD> </TR> </TBODY> </TABLE>

Paso otra vez a HTML normal, le damos a "publicar entrada y los demás ven esto cuando entran:

RESULTADO

TEXTO O IMAGEN

Ahora cambiamos TEXTO por una foto o por cualquier escrito, a medida que escribimos, él solo va creciendo a lo largo. Como ejemplo pongo esta foto, para hacerlo es suficiente darle a copiar/pegar, pinchando en el centro de la tabla.

RESULTADO

Si se quiere poner doble basta con meter otra dentro, lo importante es guardar las proporciones, os pongo estas para este modelo y en otro capítulo os pongo más modelos, pero ya sin la fómula, recordad es fácil, copiar / pegar:

<DIV align=center>
<TABLE cellSpacing=30 cellPadding=10 width=600 background=http://www.fiestac.com/fondos/tira43.gif border=6>
<TBODY><TR><TD background=http://www.fiestac.com/fondos/Color07.jpg><DIV align=center><DIV> </DIV>
<TABLE cellSpacing=25 cellPadding=0 width=500 background=http://www.fiestac.com/fondos/tira43.gif border=6>
<TBODY><TR><TD background=http://www.fiestac.com/fondos/Color07.jpg><P> </P><P>TEXTO </P>
<P> </P></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV>

Así es el resultado:

TEXTO

-------------------------------------O-O-O-O-O--------------------------------------

ENLACES

MAS MODELOS DE MARCOS_ http://artes-ana-madrid.spaces.live.com/blog/cns!FB13C945C96D942E!3035.entry

Modelos de fotos para la base y el marco: http://www.fiestac.com/fondos/

Estas fórmulas son para los espacios de MSN, para hacerlas en un foro o en otro sitio, entrad aquí:

http://cielodelangel.com/foro/viewtopic.php?t=328&sid=94628d1c60cf7585af7feccb927bbc7c

Tablas con más colores en código RGB http://roble.pntic.mec.es/apuente/nuevo3.htm

CUADRO ETIQUETAS HTML

Dirección del URL local o remoto.	href="www.hp.com"
LOOP	<BGSOUND>	Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.	loop=infinite
SRC	<BGSOUND>	Nombre del archivo de sonido (Internet Explorer)	src="sonido.wav"
LOOP	<EMBED>	Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.	loop=-1
SRC	<EMBED>	Nombre del archivo de sonido (con Crescendo)	src="sonido.mid"
SRC	<IMAGE>	Nombre del gráfico	src="imagen.gif"
ALT	<IMAGE>	Nombre que reemplaza a la imágen cuando ésta no puede ser cargada.	alt="Nombre de Imágen"
BGCOLOR	<BODY>	Color de fondo	bgcolor="#FFFFFF" (blanco)
BACKGROUND		Imágen de fondo	background="foto.gif"
TEXT		Color del texto	text="#000000" (negro)
LINK		Color de vínculo	link="#0000FF" (azul)
VLINK		Color de vínculo visitado	vlink="#FF0000" (rojo)
ALINK		Color de vínculo presionado	alink="#00FF00" (verde)
ALIGN	<CAPTION> dentro de <TABLE>	Colocar título arriba (TOP) o debajo (BOTTOM) de la tabla.	align=top
ALIGN	<H1..H6>, <P ALIGN>, <TD>, <TH>, <TR>, <DIV>,	Alinear el texto: LEFT, RIGHT, CENTER	align=center
ALIGN	<HR>	Alinear el texto: LEFT, RIGHT, CENTER	align=center
SIZE		Valor de la altura en pixels o porcentaje	size=3
WIDTH		Valor del ancho en pixels o porcentaje	width=50%
SIZE	<FONT>	Tamaño de la letra de 1 a 7	size=6
COLOR		Color de la letra	color="#000000" (negro)
FACE		Fuente del texto (Internet Explorer)	face="helv" (helvética)
HEIGHT	<EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH>	Valor de la altura en pixels o porcentaje	heigth=80
WIDTH	<EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH>	Valor del ancho en pixels o porcentaje	width=50%
BORDER	<TABLE>	Borde y ancho del borde en la tabla	border=5
CELLPADDING		Espacio entre el borde y el texto	cellpadding=10
CELLSPACING		Espacio entre las líneas interna y externa del borde	cellspacing=3
HEIGHT		Valor de la altura en pixels o porcentaje	heigth=80
WIDTH		Valor del ancho en pixels o porcentaje	width=50%
COLSPAN	<TD> dentro de <TABLE>	Expandir una celda varias columnas	colspan=4
ROWSPAN	<TD> dentro de <TABLE>	Expandir una celda varias filas	rowspan=4

Esta Guía fué preparada por Carlos Crismatt Mouthon E-mail: crismatt@hotmail.com LINCK http://crismattweb.tripod.com/guiahtml/etiqueta.html

TERMINOLOGIA

La cantidad de términos nuevos nos desborda.....Nos encontramos con un monton de palabras que a algunos no les dicen nada, solo a ellos van dirigidas estas entradas, hay diccionarios especializados para quien quiera profundizar, yo solo me he rerido a lo que nos afecta para manejar un espacio como este. Sin mas pretensiones. Aquí pongo algunas definiciones de términos tomados del diccionario on line de internet. (Recordad que tambien teneis el glosario de la página del punto 1. que es mas sencillo) http://www.interdic.net http://www.directoriowebz.com/paginaweb-interdic-enlaces-2529.html

HTML HyperText Markup Language. Lenguaje de Marcas de Hypertexto. Lenguaje para elaborar paginas Web actualmente se encuentra en su versión 3. Gracias a él ves esta página

Host Ordenador conectado a Internet. Ordenador en general. Literalmente anfitrión.

Homepage Página principal o inicial de un sitio WEB.

Hit Literalmente “golpe”. Se usa para referirse a cada vez que un link es pulsado en una página WEB.

Gateway Prueta de Acceso. Dispositivo que permite conectar entre si dos redes normalmente de distinto protocolo o un Host a una red. En Español: Pasarela.

GIF Graphics Interchange Format. Formato Grafico de Intercambio.

ADSL Asymmetric Digital Subscriber Line. Linea Digital Asimétrica de Abonado. Sistema asimétrico de transmisión de datos sobre lineas telefónicas convencionales.Existen sistemas en funcionamiento que alcanzan velocidades de 1,5 y 6 Megabits por segundo en un sentido y entre 16 y 576 Kilobits en el otro.

Avatar Identidad representada gráficamente que adopta un usuario que se conecta a un CHAT con capacidades gráficas

Cracker Individuo con amplios conocimientos informáticas que desprotege/piratea programas o produce daños en sistemas o redes.

Download Literalmente “Bajar Carga”. Se refiere al acto de transferir un fichero/s desde un servidor a nuestro ordenador. En español: “ bajarse un programa “.

MODEM Modulator/Demodulator. Modulador/Demodulador. Dispositivo que adapta las señales digitales para su transmisión a traves de una linea analógica. Normalmente telefónica.

Nick Nombre o pseudónimo que utiliza un usuario de IRC

PAP Password Authentication Protocol. Protocolo de Autentificacion por Password. Protocolo que permite al sistema verificar la identidad del otro punto de la conexión mediante password.

Spam / Spammer Se llama así al "bombardeo" con correo electrónico, es decir, mandar grandes cantidades de correo o mensajes muy largos.

URL Uniform Resource Locator. Localizador Uniforme de Recursos. Denominación que no solo representa una direccion de Internet sino que apunta aun recurso concreto dentro de esa dirección.

MODELOS DE CUADRO

Sun, 23 Mar 2008 23:46:52 GMT

MODELOS DE CUADROS

Estos modelos de cuadros que sirven para poner dentro una foto o un texto se forman con estas fórmulas, la explicación detallada está en SPACES TALLER. Lo importante son las proporciones del modelo pues los colores y dibujos se pueden cambiar a vuestro gusto facílmente, hacia debajo crecen solos a medida que vamos poniendo el texto.

MODELOS SIN FOTO

----------------------------------------O-O-O-O-O-1-O-O-O-O-O----------------------------------------

TEXTO

----------------------------------------O-O-O-O-O-2-O-O-O-O-O----------------------------------------

COLOR ROSA

----------------------------------------O-O-O-O-O-3-O-O-O-O-O----------------------------------------

AZULÓN.

----------------------------------------O-O-O-O-O-4-O-O-O-O-O----------------------------------------

MODELOS CON FOTO

HOJITAS NAIF

----------------------------------------O-O-O-O-O-5-O-O-O-O-O----------------------------------------

FLORES EN VERDE

----------------------------------------O-O-O-O-O-6-O-O-O-O-O----------------------------------------

CADENITAS

----------------------------------------O-O-O-O-O-7-O-O-O-O-O----------------------------------------

2 CUADROS SUPERPUESTOS

ROSAS Y HOJAS

---------------------------------O-O-O-O-O-8-O-O-O-O-O------------------------------------

GALON BURDEOS

----------------------------------------O-O-O-O-O-9-O-O-O-O-O----------------------------------------

HOJAS DE OTOÑO

----------------------------------------O-O-O-O-O-10-O-O-O-O-O----------------------------------------

NIEVE

----------------------------------------O-O-O-O-O-11-O-O-O-O-O----------------------------------------

FLORES BLANCAS

----------------------------------------O-O-O-O-O-12-O-O-O-O-O----------------------------------------

LOS LEOPARDOS

----------------------------------------O-O-O-O-O-13-O-O-O-O-O----------------------------------------

RASO PURPURA

----------------------------------------O-O-O-O-O-14-O-O-O-O-O----------------------------------------

TUBOS DE COBRE

----------------------------------------O-O-O-O-O-15-O-O-O-O-O----------------------------------------

ENCAJES

----------------------------------------O-O-O-O-O-16-O-O-O-O-O----------------------------------------

3 CUADROS SUPERPUESTOS

LA TABLA BURDEOS

----------------------------------------O-O-O-O-O-17-O-O-O-O-O----------------------------------------

TEXTO

----------------------------------------O-O-O-O-O-18-O-O-O-O-O----------------------------------------

MODELO GALON AZUL

----------------------------------------O-O-O-O-O-19-O-O-O-O-O----------------------------------------

LAS 5 TABLAS

----------------------------------------O-O-O-O-O-20-O-O-O-O-O----------------------------------------

CAÑAMO Y PASAMANERIA

----------------------------------------O-O-O-O-O-21-O-O-O-O-O----------------------------------------

HOJAS Y ROSAS