TALLERES JAVASCRIPT

Nuevo curso y talleres de javascript en: http://tallerescolegio-javascript.blogspot.com

Generadores de imágenes para todos los gustos

http://generatorblog.blogspot.com/

Voltear Horizontal y Verticalmente las imágenes y el texto

Supongamos que tenemos la siguiente imagen:

Imágen Original

y queremos voltearla así:

Imágen volteada

lo que se debe hacer es recurrir al código CSS y agregar las siguientes líneas: <!-- .fliph { Filter: fliph; } .flipv { Filter: flipv; } --> En las entradas o en la plantilla se le coloca la clase Fliph o Flipv a la imágen o al texto así: <img class="fliph" src="http://....... Otra opción que tienen es la de generar un texto con desplazamiento vertical cómo este:

Este es el texto que

ustedes quieren que se

desplace verticalmente

para lograr este efecto,agreguen el siguiente código: <marquee behavior=scroll direction=up scrollamount=1 height=30> Este es el texto que ustedes quieren que se desplace verticalmente </marquee>

Se habrán dado cuenta que el texto aparece en un un cuadro negro. Este se genera agregando el siguiente código a la plantilla en el css:

blockquote{ width: 180px; margin-left: 5px; margin-right: 5px; padding:5px; border: 1px solid #000000; background-color: #Ffffff; }

Lo que ustedes quieran que aparezca en el la caja negra lo agregan con el siguiene código:

<blockquote> Acá ponen el texto, la imagen o lo que deseen </blockquote>

Tutoriales sobre Blogs

Para aquellos interesados en conocer manuales y tutoriales para poder programar en su blog, visiten ésta página: http://blogs.ya.com/manuti/c_209.htm, allí pueden descargar tutoriales en pdf acerca de HTML y CSS.

Caso Particular

Si tienen problema al ocultar la barra Blogger porque no se les ajusta al borde superior, corrijan la plantilla agregando un valor negativo en la declaración del margen del encabezado. Ejemplo: /* Wrapper */ @media all { #wrapper { margin: -50px 0px 0px 0px ; padding: 0; border: 0; width: 692px; text-align: left; background: #fff url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y; font-size:90%; }

Ocultar la barra de Blogger

Aunque la barra de navegación de Blogger es útil para realizar busquedas dentro del mismo blog o en otros; existe una manera de ocultarla y es agregando el siguiente código entre las etiquetas de style: #b-navbar {visibility:hidden;}

Agregar una lista de reproducción

Aquellos interesados en agregar una lista de reproducción en su blog, pueden visitar la página http://www.audiocabin.com e inscribirse y escoger entre la lista de canciones existentes, o agregar las direcciones en las cuales se encuentran.

Presentaciones con Slideshow

Para aquellos que quieran imágenes dinámicas en su blog, pueden crear sus propias presentaciones Slide en Http://www.slide.com, basta con que abran una cuenta y suban sus imágenes. En este caso, he tomado una preexistente que se desliza a los lados, sin embargo hay muchos estilos. Prueben a ver..

ALGUNOS CÓDIGOS: EL DE LA IZQUIERDA <embed src="http://widget-90.slide.com/widgets/slideticker.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="site=widget-90.slide.com&channel=36496&cy=un&il=1" width="200" height="150" name="flashticker" align="middle"/> EL DE LOS GATOS ES: <embed src="http://widget-b8.slide.com/widgets/slideticker.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="site=widget-b8.slide.com&channel=140984&cy=un&il=1" width="200" height="150" name="flashticker" align="middle"/> SI QUIEREN UNO DE BJORK: <embed name="flashticker" align="top" src="http://widget-6f.slide.com/widgets/slideticker.swf" width="200" height="150" type="application/x-shockwave-flash" flashvars="site=widget-6f.slide.com&channel=4207&cy=un&il=1" wmode="transparent" salign="l" scale="noscale" quality="high"> </embed>

Mapas y mensajes emergentes

Los blogs son utilizados con mucha frecuencia para compartir música y videos. El taller de hoy se basa en esa cualidad que ofrecen los blogs y les brindará las herramientas necesarias para poder hacer vínculos más atractivos a la hora de la navegación.

El primer ejercicio consiste en generar un mapa de navegación similar al que se encuentra debajo del encabezado de este blog. La idea es hacer hipervínculos diferentes dependiendo del área en el cual se encuentre el cursor. He colocado 5 discos y los lugares en los que los pueden descargar gratuitamente 3 de ellos; los otros dos sueltan un mensaje emergente con el texto que indica que no hay dirección disponible para la descarga.

lo primero que deben hacer es generar una imagen de 600 pixeles de ancho (a lo sumo), subirla a blogger ( en este caso la imagen se encuentra en: http://photos1.blogger.com/blogger/6612/3401/1600/mapa%20arriba%20talleres.2.jpg y tiene un ancho de 600 x 180 pixeles). A continuación, deben agregar el siguiente código entre las etiquetas : <script type="text/JavaScript"> <!-- function MM_popupMsg(msg) { //v1.0 alert(msg); } //--> </script>

el siguiente código lo deben agregar justo después de : <div id="content"> <img src="mapa arriba talleres.jpg" width="720" height="198" border="0" align="right" usemap="#Map" /> <map name="Map" id="Map"><area shape="rect" coords="294,8,427,197" href="http://rapidshare.de/files/35967042/RHVDDestinyStreetNG40.zip" alt="RICHARD HELL 6 THE VOIDOIDS - DESTINY STREET" /><area shape="rect" coords="436,8,572,223" href="http://rapidshare.com/files/1889611/SexPistolscovers.zip" alt="SEX PISTOLS - LIVE AT CHELMSFORD PRISON" /><area shape="rect" coords="581,10,714,268" href="http://rapidshare.de/files/36661882/DBLACBGB77NG40.zip" alt="DEAD BOYS - LIVE AT CBGB'S 1977" /> <area shape="rect" coords="149,8,288,248" href="#" onclick="MM_popupMsg('NO HAY DIRECCIÓN DISPONIBLE')" /> <area shape="rect" coords="9,9,142,221" href="#" onclick="MM_popupMsg('NO HAY DIRECCIÓN DISPONIBLE')" /> </map>

DESCRIPCIÓN DEL CÓDIGO:

La imagen fuente (en este caso la de los discos) corresponde a http://photos1.blogger/...... etc Como quiero que las areas seleccionadas sean rectangulos area shape="rect", si se quieren circulares, se coloca area shape="circle". las coordenadas se definen en el vector (x1,x2,x3,x4); en donde x1 = Distancia en pixeles de la abcisa que se mide desde la esquina superior izquierda hasta el punto en donde comienza el rectángulo. x2= Distancia en pixeles de la ordenada que se mide desde la esquina superior izquierda hasta el punto en donde comienza el rectángulo. x3= El ancho del rectángulo x4= la altura del rectángulo.

El lugar a donde llega el vínculo corresponde a href="http://........."

El texto que se quiere que aparezca cuando el puntero del mouse se encuentra sobre el rectángulo se agrega con ALT="lo que quiera poner acá". El mensaje se coloca justo en los paréntesis después de MM_popupMsg:

Música y Videos para el blog

En vista de que este dato lo han solicitado varios, les doy el dato para que puedan subir su música mp3 al blog y los archivos de video que quieran.

El sitio está en http://www.castpost.com

Por el momento está inhabilitado, según me parece, pero de pronto en algunos días esté funcionando. Por el momento les muestro un ejemplo de cómo funciona, con una canción de Pearl Jam que está subida en Castpost.

Lo único que tienen que hacer es registrarse y subir los archivos que quieran. Tiene 100 megas de espacio, y crea una página para tu cuenta donde aparecen todos los archivos subidos. Al subir un archivo de audio o video se genera directamente el código a pegar en tu bitácora.

Powered by Castpost

Para mayor información, visiten:

http://elblogdelosblogs.blogspot.com/2005/11/msica-y-videos-al-blog.html

Herramientas para el blog

Existen muchas herramientas que pueden implementar en su blog de acuerdo a sus necesidades: Foros de discusión, Formularios, Guestbooks, Webcounters, Chats, etc. He implementado un formulario que les permitirá evaluar la clase, dejar sus comentarios y hacer sugerencias sobre un tema particular que quieran que tratemos. Recuerden que uno de los objetivos de los blog es que los visitantes puedan opinar y dejar sus comentarios.

Si ustedes quieren implementar alguna de estas herramientas, existen muchos sitios en internet que ofrecen estos servicios de manera gratuita, a cambio de una inscripción en sus respectivos sitios. Para este formulario en particular, se pueden inscribir en http://www.bravenet.com, y seguir los pasos que les indiquen en el sitio para la creación. No es necesario crear el código, basta con escoger las opciones y automáticamente se les generará el código que implementarán en su plantilla en el sidebar.

El taller de hoy consiste en escoger alguna de estas herramientas, inscribirse en algún sitio que ofrezca estos servicios [Bravenet, Melodysoft (http://www.melodysoft.com - con la ventaja de que es en español), o el que prefieran].

Suerte.

Recordatorios

Como la mayoria de los usuarios, no leen los avisos que estan en los post o en alguna parte de la sidebar o barra lateral, quizas les interese este código. ¿Que es lo que hace?, Aparece un cuadro flotante, con el mensaje que ustedes quieran, este mensaje se puede mover y también cerrar. Arriba pueden ver un ejemplo: Ahora los pasos para que lo hagan en sus blogs: Paso 1: Primero deben copiar el siguiente codigo entre las etiquetas <!-- /*Post-it note script- by javascriptkit.com Visit JavaScript Kit (http://javascriptkit.com) for script Credit must stay intact for use*/ #postit{ position:absolute; width:250; //ESTA LINEA CORRESPONDE AL ANCHO DEL AVISO padding:5px; background-color:lightyellow; //AQUI EN ESTA LINEA CAMBIAN EL COLOR POR EL DE USTEDES border:1px solid black; //EN ESTA LINEA CAMBIAN EL COLOR DEL BORDE visibility:hidden; z-index:100; cursor:hand; } --> y este segundo código entre las etiquetas y <!--COMIENZO DE LA LINEA EN DONDE PUEDEN CAMBIAR LA POSICION--> <div id="postit" style="left:180px;top:160px"> <!--FIN DE LA LINEA EN DONDE PUEDEN CAMBIAR LA POSICION--> <div align="right"><b><a href="javascript:closeit()">[Cerrar]</a></b></div> <!--AQUI INSERTAN EL CONTENIDO DEL ANUNCIO(ESTO LO CAMBIAN POR LO QUE QUIEREN)--> <b>Recordatorio:</b><br> <p><font size="2" face="Arial"> <a target="_new" href="http://ayudaparatublog.com/directorio">DIRECTORIO DE BLOGS</a><br> Si quieres mas visitas inscribe tu blog en nuestro directorio</font></p> <p> </p> <!--FIN DEL CONTENIDO DEL ANUNCIO--> </div> <script> //Post-it only once per browser session? (0=no, 1=yes) //Specifying 0 will cause postit to display every time page is loaded var once_per_browser=0 ///NO NECESITAN CAMBIAR NADA DE AQUI/// var ns4=document.layers var ie4=document.all var ns6=document.getElementById&&!document.all if (ns4) crossobj=document.layers.postit else if (ie4||ns6) crossobj=ns6? document.getElementById("postit") : document.all.postit function closeit(){ if (ie4||ns6) crossobj.style.visibility="hidden" else if (ns4) crossobj.visibility="hide" } function get_cookie4(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie4.length > 0) { offset = document.cookie4.indexOf(search) if (offset != -1) { // if cookie4 exists offset += search.length // set index of beginning of value end = document.cookie4.indexOf(";", offset); // set index of end of cookie4 value if (end == -1) end = document.cookie4.length; returnvalue=unescape(document.cookie4.substring(offset, end)) } } return returnvalue; } function showornot(){ if (get_cookie4('postdisplay')==''){ showit() document.cookie4="postdisplay=yes" } } function showit(){ if (ie4||ns6) crossobj.style.visibility="visible" else if (ns4) crossobj.visibility="show" } if (once_per_browser) showornot() else showit() </script> <script language="JavaScript1.2"> //drag drop function for ie4+ and NS6//// ///////////////////////////////// function drag_drop(e){ if (ie4&&dragapproved){ crossobj.style.left=tempx+event.clientX-offsetx crossobj.style.top=tempy+event.clientY-offsety return false } else if (ns6&&dragapproved){ crossobj.style.left=tempx+e.clientX-offsetx crossobj.style.top=tempy+e.clientY-offsety return false } } function initializedrag(e){ if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){ offsetx=ie4? event.clientX : e.clientX offsety=ie4? event.clientY : e.clientY tempx=parseInt(crossobj.style.left) tempy=parseInt(crossobj.style.top) dragapproved=true document.onmousemove=drag_drop } } document.onmousedown=initializedrag document.onmouseup=new Function("dragapproved=false") </script> Todo lo que tienen que hacer es pegar estos dos codigos dentro de las etiquetas mencionadas y listo, ya estara funcionando. En el codigo puse mensajes que muestra en donde deben cambiar el mensaje que yo tengo por el de ustedes, ademas en la linea: <div id="postit" style="left:180px;top:160px"> pueden cambiar la posicion en donde aparece el aviso, solo deben cambiar los numeros 180 para variar la distancia entre el margen izquierdo y 160 para variar la distancia con el margen superior del blog. Suerte!! Tomado de: http://agregafotos.blogspot.com/2006/10/ventana-de-avisos-para-tus-visitantes.html

EVALUACIÓN

La próxima semana voy a calificar lo que llevamos hasta el momento, así que aprovechen la clase de hoy para terminar las entradas que deban, completar los talleres y elaborar el trabajo que deben entregar. Lo que no entiendan me lo preguntan.

Para la otra semana deben entregar 5 entradas (que no sean copiadas de Internet, de lo contrario no las valgo) y realizar al menos 5 de los 7 talleres anteriores. Igualmente deben presentar el trabajo escrito sobre los navegadores (Explorer, Firefox, Opera..) y sobre el blog (ver entrada anterior).

Aprovechen la clase, muchachos.

¿Cuál es la importancia del blog? (Trabajo)

Hasta el momento, todos ustedes han estado trabajando en su propio blog. Necesito que me presenten un trabajo escrito en el que se justifique la existencia de dicho blog. El trabajo debe responder a las siguientes preguntas: 1)¿Por qué es necesario el blog? 2.)¿Cuál es el objetivo de dicho blog?

3.)¿Cómo sirve el blog para lograr sus objetivos extracurriculares?

4.)¿Qué estrategia utilizarán en la promoción de dicho blog?

5.)¿Qué estrategia implementar para que su blog no se quede en un sitio muerto? Este trabajo, junto al anterior (el de los navegadores Explorer,Firefox,Opera) constituyen una nota.

Si ustedes deben trabajo, aprovechen la clase de hoy para ponerse al día. Recuerden que cada taller es una nota, y que cada clase se entrega una entrada.

Si por el contrario, ya están al día; lean el post de abajo sobre la creación de tablas en el blog, y aprovechen esta clase para elaborar ambos trabajos.

Cómo crear una tabla en el blog?

Las tablas son muy utiles, si tienes imagenes y quieres colocarlas ordenadas, lo puedes hacer dentro de una tabla. Este código es super simple, y consta de 3 partes principales: (esto corresponde al comienzo de la tabla) (esto corresponde al comienzo de la primera fila) (esto corresponde al fin del elemento de una columna) (esto corresponde al fin de la primera fila)

(esto corresponde al comienzo del elemento de una columna)

(esto corresponde al fin de la tabla) Aqui les dejo el código para esta misma tabla: <table> <tr> <td>Codigo del Objeto 1</td> <td>Codigo del Objeto 2</td> </tr> <tr> <td>Codigo del Objeto 3</td> <td>Codigo del Objeto 4</td> </tr> <tr> <td>Codigo del Objeto 5</td> <td>Codigo del Objeto 6</td> </tr> </table> Eso es todo, como ven el objeto 1 y 2 estan en la misma fila ( ) pero distinta columna ( ). Al igual que los objetos 3 y 4; y 5 y 6.Espero que les quede claro. Tomado de:http://agregafotos.blogspot.com/

Categorías en el Blog

Se darán cuenta que en he agregado un menú de opciones en el Sidebar. Su utilidad se basa en el hecho de poder generar categorías en el Blog. Justo debajo de este menú se encuentra la opción "previous posts", que sólo muestra las entradas previas a la entrada que se está mirando. Esto quiere decir que si miramos la primera entrada "¿Qué es un Blog?", no veremos la entrada correspondiente a "Personalizar los link del sidebar", en vista de que es posterior a ésta, de forma que para verla es necesario devolverse y esto no lo hace práctica porque no se pueden ver las otras entradas. Con el menú de navegación, Sí es posible conocer las otras entradas gracias a que se generan categorías que funcionan independientemente de la fecha de publicación. Para conocer los pasos en la generación de este menú de opciones, visiten la página:

http://agregafotos.blogspot.com/2006/07/como-agregar-un-menu-de-opciones.html.

RECUERDEN QUE ANTES DE ALTERAR LA PLANTILLA ES RECOMENDABLE GRABAR UNA COPIA. Para esto, seleccionen todo el código y cópienlo en el Block de Notas, o en Word. Si no graban una copia, se pierden sus cambios personalizados y no hay manera de recuperarlos.

El código que se les genera en la página lo pueden colocar en cualquier parte de la plantilla. yo lo coloque en el Sidebar de la siguiente manera:

<!-- Begin #sidebar --> <div id="sidebar"><div id="sidebar2"> <h2 class="sidebar-title">Categorías</h2> <form name="jump"> <p> <select name="menu"> <option value="http://tallerescolegio.blogspot.com/2006/11/mapas-y-mensajes-emergentes.html">Mapas y mensajes emergentes</option> <option value="http://tallerescolegio.blogspot.com/2006/11/msica-y-videos-para-el-blog.html">Música y Videos para el blog</option> <option value="http://tallerescolegio.blogspot.com/2006/11/herramientas-para-el-blog.html">Herramientas para el blog</option> <option value="http://tallerescolegio.blogspot.com/2006/11/recordatorios.html">Recordatorios</option> <option value="http://tallerescolegio.blogspot.com/2006/10/cmo-crear-una-tabla-en-el-blog.html">Creación de Tablas</option> <option value="http://tallerescolegio.blogspot.com/2006/10/categoras-en-el-blog.html">Categorías en el Blog</option> <option value="http://tallerescolegio.blogspot.com/2006/10/cambiar-imgen-de-fondo-y-agregar-un.html">Imagen de fondo y encabezado</option> <option value="http://tallerescolegio.blogspot.com/2006/10/agregar-gadgets-su-blog.html">Agregar gadgets de Google</option> <option value="http://tallerescolegio.blogspot.com/2006/10/explorer-firefox-netscape-y-opera.html">Navegadores de Internet</option> <option value="http://tallerescolegio.blogspot.com/2006/10/subir-las-imgenes-flickr.html">Subir imágenes a Flickr</option> <option value="http://tallerescolegio.blogspot.com/2006/10/40-ideas-para-aumentar-tus-visitas.html">40 ideas para aumentar las visitas</option> <option value="http://tallerescolegio.blogspot.com/2006/10/personalizar-los-links-del-sidebar.html">Personalizar links del sidebar</option> <option value="http://tallerescolegio.blogspot.com/2006/09/cambios-de-tamao-letra-y-el-truco-del.html">El truco del sigue leyendo</option> <option value="http://tallerescolegio.blogspot.com/2006/09/qu-es-un-blog.html">¿Qué es un Blog?</option> </select> </p> <p align="center"> <input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Visitar"> </p> </form>

Cambiar imágen de fondo y agregar un encabezado

A pesar de las innumerables plantillas que nos ofrece Blogger, siempre es conveniente personalizarlas de acuerdo a las necesidades de cada blog. La imágen del fondo y el encabezado son vitales para dar a entender un concepto o una idea del blog. En el ejercicio de hoy aprenderán a a cambiar la imágen de fondo y a agregar el encabezado que quieran. En el caso de este blog, la imágen que he utilizado para el fondo se encuentra en la dirección http://photos1.blogger.com/blogger/6612/3401/1600/fondoblog.jpg La imágen que he utilizado para el encabezado se encuentra en la dirección http://photos1.blogger.com/blogger/6612/3401/1600/encabezado.jpg Deben buscar la parte de la plantilla en la que aparece el siguiente código: body { background: #fff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } Y modificarla por el siguiente(cambien la dirección en la que tienen su imagen) : body { background-image: url(http://photos1.blogger.com/blogger/6612/3401/1600/fondoblog.jpg); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } Hasta este momento sólo han agregado la imágen de fondo. Para lograr que en el encabezado se pueda sobreescribir es decir, que salga el título y la descripción del blog, se necesita dejar la imagen del encabezado fija en su posición. Para generar imágenes fijas deben buscar el siguiente código: body { background-image: url(http://photos1.blogger.com/blogger/6612/3401/1600/fondoblog.jpg); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } a:link { color:#58a; text-decoration:none; } a:visited { color:#969; text-decoration:none; } a:hover { color:#c60; text-decoration:underline; } a img { border-width:0; } /* Header ----------------------------------------------- */ Y cambiarlo por este, que agrega la clase Fija: body { background-image: url(http://photos1.blogger.com/blogger/6612/3401/1600/fondoblog.jpg); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } a:link { color:#58a; text-decoration:none; } a:visited { color:#969; text-decoration:none; } a:hover { color:#c60; text-decoration:underline; } a img { border-width:0; } #Fija { position:absolute; top:0; left:0; } /* Header ----------------------------------------------- */ Ahora, para colocar la imagen en el encabezado, busquen este código: <div id="header"> <h1 id="blog-title"> <ItemPage><a href="<$BlogURL$>"></ItemPage> <$BlogTitle$> <ItemPage></a></ItemPage> </h1> <p id="description"><$BlogDescription$></p> </div> Y cambiénlo de forma que el texto de la descripción se lea encima de la imagen del encabezado (Header). Esto se logra colocando este código en lugar del anterior: <img style="float:left; "src="http://photos1.blogger.com/blogger/6612/3401/1600/encabezado.jpg" border="0" alt="" /> <div id="Fija"> <div id="header"> <h1 id="blog-title"> <ItemPage><a href="<$BlogURL$>"></ItemPage> <$BlogTitle$> <ItemPage></a></ItemPage> </h1> <p id="description"><$BlogDescription$></p> </div> </div>

Agregar Gadgets a su blog

La barra de Google incluye la posibilidad de añadir infinidad de complementos a nuestro escritorio. A partir de ahora, google pone a disposición de los editores de webs y de blogs los códigos para incluir estos gadgets en los mismos.

En esta dirección (http://www.google.com/ig/directory?synd=open) se pueden buscar esos códigos. Las posibilidades que abre este nuevo servicio para personalizar un sitio son realmente enormes. Como muestra, he añadido PACMAN.

El taller de hoy consiste en agregar uno de estos gadgets a su blog. Busquen el que más sea de su agrado, puede ser un juego, el horóscopo, etc; y añádanlo a su blog.

Ejemplo:

El código que yo he agregado es el siguiente:

<center> <iframe id="frame" src="http://gmodules.com/ig/ifr?url=http://www.schulz.dk/pacman.xml&synd=open&" height="330" width="310" ALIGN="center" HSPACE="0" vSPACE="30"> </iframe> </center>

Explorer, Firefox, Netscape y Opera

Existen muchos navegadores en Internet. La mayoría de los usuarios utiliza Internet Explorer como el navegador (browser) preestablecido, sin embargo, actualmente existen otros navegadores: Opera, Firefox y Netscape. A la hora de diseñar sus aplicaciones Web, deben tener en cuenta que sus páginas se vean adecuadamente en cada uno de esos navegadores, porque no todo el mundo utiliza el Explorer.

El trabajo para el Miércoles 11 de octubre consiste en investigar sobre cuáles son las ventajas de cada uno de estos navegadores y por qué algunas páginas se "ven bien" en Explorer y "se ven mal" en Firefox. El trabajo lo deben entregar por escrito y constituirá una nota.

Pista:

http://www.webstandards.org/files/acid2/test.html#top

Subir las imágenes a Flickr

Flickr es un sitio web en el que se pueden subir imágenes y fotografías de forma que estén en la red. De esta manera se puede acceder a ellas sin tener que transportarlas y con la ventaja de que se pueden utilizar desde cualquier computador con acceso a Internet y sin necesidad de transportarlas. Debido a esto, Flickr es muy utilizado como depósito de imágenes por los Bloggers. El Sistema de Flickr cuenta con la ventaja de que las búsquedas de las imágenes se pueden hacer mediante etiquetas (tags), fecha o por licencias de Creative Commons. A partir de hoy, las imágenes que utilicen en sus respectivos Blogs, deberán subirse primero a Flickr. (http://www.flickr.com)

REPITO: DEBERAN SUBIR LAS IMÁGENES A FLICKR.

El propósito de esto es que en un taller posterior necesitaré que ustedes me envíen sus entradas en Blogger y yo pueda acceder a sus imágenes sin necesidad de entrar en cada uno de sus blogs. El taller de hoy consiste en crear una cuenta en Flickr y comenzar a subir sus imágenes allí, de forma que puedan trabajar desde cualquier computador sin necesidad de transportar las imágenes. Recuerden que además deben hacer una entrada hoy; con lo que en total serán 7 entradas. A continuación hago un vínculo a una dirección en la que pueden encontrar los pasos para crear su cuenta y subir las imágenes: http://www.atinachile.cl/node/4004

40 ideas para aumentar tus visitas

Algunas las he aplicado, otras no. Aquí un recopilado de 40 ideas que se me han ocurrido, que Blogger ha publicado, que en Google encontré y que amigos me han dateado para aumentar las visitas de tu blog. Datos técnicos:

1) Incluye la dirección de tu blog en tu firma del mail. Esto es muy bueno, porque cada vez que manden un correo estará su dirección de blog y más de alguno pinchará en él por curiosidad. 2)Agrega tu URL a Google. 3) Permite que los usuarios puedan mandar por mail un post de tu blog que les gusté ASÍ. 4)Habilita tus páginas de entrada en las opciones de tu menú. Esto significa que cada post tendrá su página web independiente, por lo que cuando alguien busque algo en Google, el motor de búsqueda tendrá más vínculos. 5) Ofrece al final de tu post y donde quieras, enlaces a otros artículos que hayas escrito. 6) Diseña un botón para tu blog con un código para que otros usuarios lo copien y lo peguen en su sidebar. 7)Inscríbete en Buscadores de Blogs para que estés en sus listas como: Technorati, Daypop, Blogdex, Popdex. 8) Crea vínculos a otros blogs. Para que te lean ayuda a otros a que los lean. 9) Deja comentarios en muchos lugares, es una manera en que la gente se interese por lo que dices y quiera profundizar curioseando en tu blog. Ahora, la idea no es transformarse en un spammer. 10) Habilita el Feed de tu sitio, ¿Qué es? ¿Cómo se Habilita? 11) Permite que los lectores realicen comentarios sobre cada post. Quizás muchos usuarios vuelvan para ver cómo sigue la conversación. 12) Activa Weblogs.com ( servicio de notificación de actualizaciones de blog), para que Blogger notifique que actualizaste tu bitácora. De esta manera. 13) Activa Navbar (Botón que permite hojear de un blog a otro con click en "Next"). Se activa ASÍ. 14) Aumenta tu posicionamiento en los motores de búsqueda de Google con éstos consejos. 15) Cita a tu fuente las veces que puedas. 16) Utiliza y activa los trackback. 17) También puedes mandar tus nuevas entradas por mail a otros bloggers para que te lean (aunque esta opción la encuentro un poco invasiva). 18) Cuéntale a tus amigos y conocidos de tu diario virtual para que te visiten. 19)Regístrate en alguna comunidad de bloggers (Chile) como: Planeta Blogs y Blogósfera El Intruso.cl 20)Participa en foros y da a conocer tu bitácora. 21)Regístrate en comunidades de habla hispana como: bitacoras.com 22)Instala un 'Blogroll'. Se trata de una serie de enlaces de los blogs que te gustan. 23)Inserta en tu sidebar links a posts o categorías que creas son las mejores de tu sitio para ser visitadas. 24)Inserta un buscador dentro de tu blog, para que los visitantes exploren contenidos dentro de tu bitácora. 25) Introduce este link para que te incorporen a sus favoritos (Mozilla). 26) Incluye Meta Tags a tu sitio. 27) Inscríbete a Tutop (top de websites). 28)Agrega un link como ÉSTE para que otros recomienden tu blog. 29) Crea posts-resumen, que recapitulen varios posts sobre un mismo tema, enlazando a éstos. 30) Usa el intercambio de banners de miarroba.com 31) Participa en algún meme de Internet. Esto es una idea (a veces sinsentidos o juegos) transmitida de persona a persona como si fuese un virus.Datos de forma: 32) No extenderse demasiado en las entradas o posts. La idea es que no sea un testamento. 33) Trata de no dejar mucho tiempo sin publicar, tus lectores se escapan y no vuelven porque creen que no regresaste o ya te cambiaron por otro. (Ojalá un mínimo de 3 veces por semana). 34) Sigue los 10 consejos para una bitácora mejor de Rebecca Blood 35) Lee los 5 trucos de Fernando Polo. 36) Pasa a ver "los consejos al escribir tu blog" de Javi Moya. 37) Intenta, en la medida que puedas, responder los comentarios de tus lectores. Ellos quedarán muy contentos. 38) Trata de focalizarte, escribir sobre un mismo tema, para que tus lectores vuelvan por más de lo mismo. 39) No descuides la redacción ni las faltas de ortografía. 40) Y por último: Escribe de lo que te gusta, ojalá de lo que te apasiona y pásalo bien posteando!Se te notará. Tomado de: http://elblogdelosblogs.blogspot.com/2006/02/40-ideas-para-aumentar-tus-visitas.html

Personalizar los links del Sidebar

El ejercicio de hoy consiste en buscar en Internet 5 sitios que trabajen una temática similar a la que tienen ustedes en su blog y adicionen 5 vínculos a esas páginas. recuerden que cada vez que se `haga un vínculo se debe contar con la autorización de esa persona, así que yo les recomiendo que las hagan a los blog de sus compañeros o que pidan la autorización previa.

Para agregar los vínculos, deben ir a la plantilla de su blog y buscar un código similar a este:

haz click en la imágen para agrandar

Deben cambiar la dirección

http://help.blogger.com/bin/answer.py?answer=110

por la del sitio al que desean hacer el vínculo y cambiar el texto Edit-Me por el correspondiente al que quieren que aparezca en el texto del vínculo.

Recuerden que deben hacer la entrada de hoy, que con ésta ya van 6 y que cada una se califica.

Suerte.

Cambios de tamaño, letra y el truco del sigue leyendo

El taller de hoy consiste en crear una entrada lo suficientemente larga de forma que se pueda hacer mas corta con un link a un articulo más grande mediante el truco de "Seguir leyendo". Les envío una dirección en la que pueden encontrar los pasos para la realización. Alli pueden ver, incluso un ejemplo. http://elblogdelosblogs.blogspot.com/2005/12/el-truco-del-sigue-leyendo-versin.html Si quieren cambiar los siguientes valores de tamaño, fondo y letra; estas son las direcciones: Cambiar el color de fondo : http://elblogdelosblogs.blogspot.com/2006/04/cambia-el-color-de-fondo.html Cambiar letra: http://elblogdelosblogs.blogspot.com/2005/10/sopa-de-letras.html Cambiar el tamaño de la letra : http://elblogdelosblogs.blogspot.com/2006/03/para-cambiar-el-tamao-de-la-letra Recuerden que este taller tiene nota; así que termínenlo y no es necesario que me envíen un correo porque yo puedo ver la actualización de sus blogs.

¿Qué es un Blog?

Existen muchos artículos sobre qué es un blog log en inglés. Aquí hay algunos (para los que no entienden bien el inglés, la traductor de Google representa una forma práctica de sacarle el sentido).

What we're doing when we blog History of weblogs What makes a weblog a weblog. Weblogs: a history and perspective Deep thinking about weblogs.

Una definición general de lo que es un blog se podría resumir en los siguiente:

• Normalmente presten contenidos en orden cronológico.
• Normalmente tienen carácter informal y, muchas veces, personal.
• Se actualizan de forma periódica y amenudo .
• No requieren la intervención de profesionales o informáticos.

El formato, estilo y contenidos de los blogs pueden ser diversos. Como muchas veces son blogs personales, pues el estilo y los contenidos reflejan los de su autor en cada caso.

¿Cuál es la diferencia entre un weblog y una página personal? La gran diferencia radica en que los blogs son actualizados de forma más rápida, y no requieren conocimiento previo de html, ya que la mayoría de sitios que ofrecen blogs gratis ofrecen plantillas hechas en las que es muy fácil presentar la información que cada uno quiera publicar.

El mundo de los blogs está muy relacionado con las noticias y la actualidad. Uno de los bloggers (autor de un blog) más famosos es Salam Pax, alias el Blogger de Bagdad, que ofrecía información independiente a través de su blog durante la guerra de Irak.

La mejor forma de conocer qué es un blog es leer algunos y luego hacer uno tu mismo. Puede ser un sitio informativo, un sitio en el que un experto ofrece información sobe su campo de especialidad con otros expertos, o simplemente un desahogo. Algunos blogs tienen literalmente miles de lectores, otros solo son leídos por sus autores.

Tomado de :

http://www.euroresidentes.com/Blogs/Bitacoras/que_es_un_blog.htm