.: enero 2009:BLOGFESOR UIDE LOJA:.

Insertar tablas en las entradas de blogger

REALIZAR UNA TABLA
Códigos para insertar una Tabla dentro de una entrada del Blog. Tutorial tomado de:
oscargp.net - Ayuda para blogs

El siguiente texto es tomado del tutorial de Oscargp.net, bajo el título: Cómo crear una tabla en blogger.

En primer lugar explicaré algunos conceptos de HTML, muy básicos pero que nos ayudarán a entender bien como introducir las tablas y como hacerlas funcionar. Hemos de recordar estas tres palabras:
1. <table></table>
Como bien su nombre indica en inglés, indica que comienza una tabla o acaba.
2. <tr></tr>
Etiqueta que usaremos para crear una nueva fila.
3. <td></td>
Etiqueta que usaremos para crear una nueva columna.

Teniendo estos conceptos claros pasamos directamente a ver un ejemplo de código y su proyección en el blog.
<table border="1px" width="100%"><td>Columna 1, fila 1</td><td>Columna 2, fila 1</td><td>Columna 3, fila 1</td><tr><td>Columna 1, fila 2<td>Columna 2, fila 2<td>Columna 3, fila 2</td></table>
Les quedaría lo siguiente:

Columna 1, fila 1 Columna 2, fila 1 Columna 3, fila 1
Columna 1, fila 2 Columna 2, fila 2 Columna 3, fila 2

Observamos que hemos creado una tabla, en la cual he introducido dos filas, y dentro de cada una de ellas tres columnas. Para aplicar esto en nuestro blog, únicamente tendríamos que agregar nuevas celdas td o tr, según cuales sean nuestras necesidades.

Por Ejemplo:

ICONO	SERVICIO
	TECHNORATI Technorati es un motor de búsqueda de Internet para buscar blogs, que compite con Google, Yahoo!...
	DELICIOUS Del.icio.us es un servicio de gestión de marcadores sociales en web anteriormente conocido como "del.ico.us". Permite agregar los marcadores que clásicamente se guardaban en los navegadores y categorizarlos con un sistema de etiquetado denominado folcsonomías (tags). No sólo puede almacenar sitios webs, sino que también permite compartirlos con otros usuarios de del.icio.us y determinar cuántos tienen un determinado enlace guardado en sus marcadores.
	DIGG Digg es un sitio web principalmente sobre noticias de ciencia y tecnología. Combina marcadores sociales, blogging y sindicación con una organización sin jerarquías, con control editorial democrático, lo cual permite que se publiquen artículos sobre una gran variedad de géneros.
FUENTE:	Wikipedia

FUENTE: Cómo crear una tabla en blogger

[+/-]

Clase 4 y 5 de Febrero: Tutoriales

TUTORIALES PARA REALIZAR EN CLASE
Tutoriales que vamos a realizar en la semana del 4 y 5 de Febrero.

Tutoriales:

- Tutorial: Insertar tablas en las entradas de blogger
- Trabajo en clase:
En base al tutorial de Insertar una tabla en una entrada del Blog, realizar una tabla de 2 columnas y 10 filas, en donde detallaran la información de las personas que alojan las Instituciones en donde están realizando el proyecto final:
FOTO, DATOS PERSONALES.

FOTOS	DATOS PERSONALES
	Nombre: Fecha de nacimiento: Edad: Escuela y año que estudia y comentarios de sus profesores: Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña: Fecha del ultimo control odóntologico: Datos que desea escribir del niño:
	Nombre: Fecha de nacimiento: Edad: Escuela y año que estudia y comentarios de sus profesores: Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña: Fecha del ultimo control odóntologico: Datos que desea escribir del niño:
	Nombre: Fecha de nacimiento: Edad: Escuela y año que estudia y comentarios de sus profesores: Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña: Fecha del ultimo control odóntologico: Datos que desea escribir del niño:
	Nombre: Fecha de nacimiento: Edad: Escuela y año que estudia y comentarios de sus profesores: Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña: Fecha del ultimo control odóntologico: Datos que desea escribir del niño:
	Nombre: Fecha de nacimiento: Edad: Escuela y año que estudia y comentarios de sus profesores: Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña: Fecha del ultimo control odóntologico: Datos que desea escribir del niño:
FUENTE:	Nombre de la Institución

CÓDIGO:


<table border=1 cellpadding=3 width="100%"><td><b>FOTOS</b></td>
<td><b>DATOS PERSONALES</b></td>
<tr><td><img src="URL_de_la_imagen"/>
<td>Nombre:
Fecha de nacimiento:
Edad:
Escuela y año que estudia y comentarios de sus profesores:
Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña:
Fecha del ultimo control odóntologico:
Datos que desea escribir del niño:</td>
<tr><td><img src="URL_de_la_imagen"/>
<td>Nombre:
Fecha de nacimiento:
Edad:
Escuela y año que estudia y comentarios de sus profesores:
Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña:
Fecha del ultimo control odóntologico:
Datos que desea escribir del niño:</td>
<tr><td><img src="URL_de_la_imagen"/>
<td>Nombre:
Fecha de nacimiento:
Edad:
Escuela y año que estudia y comentarios de sus profesores:
Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña:
Fecha del ultimo control odóntologico:
Datos que desea escribir del niño:</td>
<tr><td><img src="URL_de_la_imagen"/>
<td>Nombre:
Fecha de nacimiento:
Edad:
Escuela y año que estudia y comentarios de sus profesores:
Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña:
Fecha del ultimo control odóntologico:
Datos que desea escribir del niño:</td>
<tr><td><img src="URL_de_la_imagen"/>
<td>Nombre:
Fecha de nacimiento:
Edad:
Escuela y año que estudia y comentarios de sus profesores:
Fecha del último Exámen Médico y las vacunas que se le ha puesto al niño o niña:
Fecha del ultimo control odóntologico:
Datos que desea escribir del niño:</td>
<tr><td>FUENTE:
<td>Nombre de la Institución</td>
</table>

El código de la parte superior está dispuesto para 5 filas, el trabajo que deberán entregarme es el detalle de 10 personas.

Clase Teórica:

- E-Procurement
- E-Profesionales

[+/-]

Tabla de Contenidos para tu Blog

MAPA DEL SITIO
Script que les permitirá elaborar un Mapa del Sitio de su Blog de manera que no lo realicen manualmente.

Tutorial tomado de El Escaparate de Rosa, bajo el nombre de: BLOC TOC. Para este tutorial eliminamos algunas cosas para que solo estén presentes el título de la entrada y la fecha.

PASOS:

1. Vamos a plantilla-HTML y buscamos esta parte del código:


<div id='main-wrapper'>
<b:section class='main' id='main' maxwidgets='1' showaddelement='no'>

Para ubicar esta parte del código, simplemente presionamos CTRL + F y buscamos: <div id='main-wrapper'>

En algunos blogs la parte maxwidgets='1', no suele aparecer, en tal caso debemos añadirla y colocarle entre comillas el número "2". Y en showaddelement='no'>, debemos colocar "yes"

Entonces quedaría:


<div id='main-wrapper'>
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

El resultado se va a observar en la pantalla de Diseño/Elementos de la Página, sobre el recuadro de Entradas del Blog, va a aparecer un recuadro de Añadir un Gadget del mismo ancho con líneas consecutivas como borde.

2. Hacemos clic en este nuevo recuadro (Añadir un Gadget) y seleccionamos el elemento HTML/Javascript, dejamos su título en blanco y pegamos dentro esto:

<div id="toc"></div>

Luego presionamos Guardar.

3. Añadimos un nuevo elemento de HTML/Javascript en la sidebar y le ponemos un titulo (Opcional), pegamos este código (acordaros de sustituir donde dice NOMBREDESUBLOG por su URL.


<div id="toclink"><a href="javascript:showToc();">VER TABLA DE CONTENIDOS >></a><br/><br/></div>
<script style="" src="http://www.geocities.com/internetuide/blogtoc_REDUCIDO_porVagabundia.js"></script>
<script src="http://NOMBREDESUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;
max-results=999&amp;callback=loadtoc"></script></div>

NOTA: Si tienes más de 100 post para mostrar en tu blog, en el paso 3, copias y pegas la última línea sustituyendo 999 por 101, si tienes más de 100, vuelves a copiar la línea sustituyendo 101 por 201 y así sucesivamente...
La línea en cuestión es esta:

<script src="http://NOMBREDESUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;
max-results=999&amp;callback=loadtoc"></script>

[+/-]

Paleta de Colores RGB

[+/-]

Calendario de Archivos

TUTORIAL
Tomado de El Escaparate de Rosa, el siguiente tutorial nos permitirá clasificar nuestros archivos en un calendario.

PASOS:

1. Añadimos un nuevo elemento "Archivos" en nuestra sidebar, que ha de tener este formato:

Si el elemento Archivo ya lo tienes en tu Plantilla, simplemente presiona EDIT y cambien las características como muestra la imagen.

2. Localizamos ahora en la parte de "Edición HTML", sin expandir artilugios, la línea correspondiente al widget de "Archivos":


<b:widget id='BlogArchive1' locked='false' title='Archivos' type='BlogArchive'/>

3. Tendremos que cambiar esa línea por este código:


<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>

<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>

</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>

<script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

4. Colocamos ahora el script para el calendario justo antes del </head> de nuestra plantilla. Para obtener el código del script hagan clic en el enlace VER SCRIPT, señalen el texto que les vota el enlace (CTRL + A), copienlo y péguenlo antes de </head>.

VER SCRIPT

5. Guardamos los cambios y ya podremos ver la versión básica del calendario en nuestra sidebar. VER IMAGEN

6. Para poder controlar el aspecto del calendario en "Fuentes y colores" hemos de añadir en la plantilla unas cuantas variables exclusivas del calendario.

(El sitio ideal para colocarlas es justo debajo o encima de las que ya bienen en nuestra plantilla y que están casi al comienzo de esta):


/* Calendario de Archivos Variables

=========================================

<Variable name="bcCalenderFonts" description="Calendar Font Sizes"

type="font" default="normal normal 85% Arial, Sans-serif" / value="normal normal 85% Arial, Sans-serif">
<Variable name="bcTableBackgroundColor" description="Calendar Background Color"
type="color" default="#f2f1e1" value="#172322">
<Variable name="bcTableBorderColor" description="Calendar Border Color"
type="color" default="#000000" value="#37403f">
<Variable name="bcTableTextColor" description="Calendar Text Color"
type="color" default="#000000" value="#ffffff">
<Variable name="bcMenuBackgroundColor" description="Calendar Menu Select Background Color"
type="color" default="#ffffff" value="#37403f">
<Variable name="bcMenuTextColor" description="Calendar Menu Select Text Color"
type="color" default="#000000" value="#e1771e">
<Variable name="bcTableHeaderBackgroundColor" description="Calendar Header Background Color"
type="color" default="#ffffff" value="#37403f">
<Variable name="bcTableHeaderTextColor" description="Calendar Header Text Color"
type="color" default="#000000" value="#e1771e">
<Variable name="bcTableHighLightColor" description="Calendar Highlight Color"
type="color" default="#cccccc" value="#37403f">
<Variable name="bcCalenderLinksColor" description="Calendar Links Color"
type="color" default="#0000ff" value="#89b909">
<Variable name="bcCalenderLinksHoverColor" description="Calendar Links Hover Color"
type="color" default="#0000ff" value="#cccccc">
<Variable name="bcTableFooterBackground" description="Calendar Footer Background Color"
type="color" default="#ffffff" value="#37403f">
<Variable name="bcFooterLinksColor" description="Calendar Footer LinksColor"
type="color" default="#60950e" value="#ffffff">
*/

7. Para terminar, añadimos unas líneas de CSS en la plantilla, por ejemplo, justo antes de ]]></b:skin>


/* Archive Calendar CSS
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:201px;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid $bcTableBorderColor;padding:2px;margin:10px 0 0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}

/* The Archive Select Menu */
#bcaption select {background:$bcMenuBackgroundColor;border:0 solid $bcMenuBackgroundColor;color:$bcMenuTextColor;font-weight:bold;text-align:center;}


/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px  $bcTableBorderColor; font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;color:$bcTableHeaderTextColor}

/* The calendar Table */
table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0; margin:0px 0 0px;width:201px;background:$bcTableBackgroundColor}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px $bcTableBorderColor; color:$bcTableTextColor;font:$bcCalenderFonts;}

/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:$bcCalenderLinksColor;}
table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:$bcTableHighLightColor;border:1px solid $bcTableBorderColor}

/* Table Footer Navigation */
table#bcNavigation {width:201px;background:$bcTableFooterBackground;border:1px solid $bcTableBorderColor;border-top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}
table#bcNavigation a:link {text-decoration:none;color:$bcFooterLinksColor}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;
display:none;}
ul#calendarUl li a:link {}
ul#calendarUl li {
background:transparent url(http://img504.imageshack.us/img504/3452/stocknextpagesr5.png) no-repeat !important;
padding: 0 0 0 35px !important;
}

8. Guardamos los cambios y vemos como ha quedado el calendario: VER IMAGEN

9. Si vamos ahora a "Fuentes y colores" en nuestro panel, veremos allí las nuevas opciones para cambiar el aspecto al calendario.

Tendremos en cuenta que en la vista desde "Fuentes y colores" no se verá el calendario completo, así que tendremos que ir guardando y comprobando algunos cambios desde la vista normal del blog.

FUENTE TUTORIAL: Calendario de Archivos. El Escaparate de Rosa

[+/-]

Código para colocar una imagen en HTML y un hipervínculo

[+/-]

Ayuda: Proyecto Marketing Político en Internet

[+/-]

LogoInstant.com

[+/-]

Lecciones de Campaña Obama / Biden

MARKETING POLÍTICO
Ejemplos de Marketing Político a través de medios electrónicos de la Campaña Política de Barack Obama.

Caso Obama:
Se expondrá en la Clase del 23 de Enero.Uno de los grandes éxitos que tuvo la dupla que llegó la Casa Blanca, fue ocupar el internet para llegar a los ciudadanos. A continuación les coloco algunos videos, imágenes, mp3 y otros elementos que ayudaron a Obama y Biden al éxito en las urnas.

El Triunfo del Ciber Candidato

- ¿Qué es Marketing Político?: Leer PDF
- ¿Qué es el Fundraising?

Proceso de recaudación de fondos, mediante la solicitud de donaciones de particulares, empresas, fundaciones benéficas, o agencias gubernamentales. Aunque la recaudación de fondos normalmente se refiere a los esfuerzos para reunir fondos para organizaciones sin fines de lucro, a veces es utilizado para referirse a la identificación y solicitud de los inversionistas u otras fuentes de capital de empresas con fines de lucro.

Captación de fondos es una manera significativa en que las organizaciones sin fines de lucro podrán obtener el dinero para sus causas. Estas causas pueden implicar una muy amplia gama de temáticas, como religiosas o grupos filantrópicos, tales como organizaciones de investigación, entidades públicas, y las campañas políticas. Algunos ejemplos de organizaciones benéficas incluyen estudiantes de becas premios por méritos deportivos o los logros académicos, las preocupaciones de carácter humanitario, socorro en casos de desastre, los derechos humanos, la investigación, y otras cuestiones sociales.(Wikipedia)

- Cinco claves de la política 2.0 en el 2008
- Internet y Tecnología. Leer PDF

Branding:

Entrevista realizada a Sol Sender, quien dirijió el equipo de diseño para el logotipo de Obama.

Estos son algunas de las propuestas que se presentaron a la hora de seleccionar la Marca de OBAMA.

Sitio Web: www.barackobama.com. Al ingresar al sitio, la primera página que sale es la página de Donaciones. Más de un millón de personas donaron en la campaña de Obama. Leer artículo escrito por Juan Gigli.

Obama Web 2.0

Innovación, la campaña política de Barack Obama y el uso de las tecnologías de información
Aplicación para iPhone que la campaña de Barack Obama creó y puso de forma gratuita a disposición de todos los usuarios.

Miguel Garcia-Gosalvez, señala:

El tema mas interesante para mí es el del programa y asuntos políticos ("Issues"). Todos los temas importantes están representados y para cada uno de ellos se presenta el problema actual y cuales son las soluciones que se proponen por parte de Obama. Esta forma de presentar la información permite estar informado, sin sesgo de las posiciones de Obama, de sus planes y acceder a los mismos desde cualquier lugar.

...Si miramos las diferentes opciones incluidas en la aplicacion no hay nada que destaque por ser nuevo desde el punto de vista tecnológico (email, SMS, páginas web, etc.). Lo innovador no es la tecnología en sí misma sino el juntar todas estas opciones en una sola aplicación, así como el uso de la misma. Desde el punto de vista tecnológico el riesgo es minímo ya que todo lo que se usa está más que probado.

Barack TV: The Movement
¿Café con Obama o con McCain?
People Top: Posicionamiento de personas
Blog: Obama / Biden - www.change.gov
Galería de Imágenes: Flickr
Sección de Descargas: Downloads

Mailing que enviaron a través de correo eletrónico. Recomiendo leer: "Email Marketing Obama y Política 2.0"

Marketing Viral: Video y formulario de envío

Marketing de Permisos: Campaña: Se el primero en saberlo
Sitio: Be the First to Know

Obama en Second Life:

En El Geeky señalan:

a través de sus avatares cibernéticos se reúnen en Second Life para recordarles a ese mundo virtual, que deben apoyarlos y bueno, no lo hacen escribiendo mensajes que van de boca en boca a través del IM, sino mediante la creación de atuendos como camisetas, pancartas, letreros, etc, a la que la gente de la comunidad puede hacerse sin ningún problema.

Publicidad en Video Juegos:

Super Obama World. "Obama tiene su propio videojuego, Super Obama World, un remake del clásico de Nintendo Super Mario World".

Barack Obama pone anuncios en videojuegos online

Motion Graphics:

.

Ayuda en línea: Para aprender a usar las herramientas de My.BarackObama.com

Fragmentos de artículos dedicados al análisis de la Campala de Obama:

La lógica de la "web 2.0" (o internet de segunda generación) está permeando silenciosamente la política. Esto significa que las personas ya no son receptores pasivos de mensajes, sino que tienen la posibilidad y las armas para involucrarse, participar e influir activamente.

Como dice Joe Trippi, uno de los expertos electorales más reputados en EE.UU., "El juego cambió de una manera que la elite necesita entender". Ya no se trata de lo que las campañas puedan hacerle a la gente. Sino de lo que las mismas personas, usando herramientas como los blogs, YouTube o los teléfonos celulares, pueden hacerles a las campañas.(Tomado de La República 2.0).

Fernández Jaime (2008) en el Sitio Web www.marketalia, señala:

Con una audiencia de decenas de millones de navegantes, la web de Obama www.barackobama.com ha sido la nave nodriza de la campaña en Internet. Además de los usos tradicionales de las páginas web, que permiten conocer los programas, candidatos y su agenda, esta vez se puso a disposición del público un instrumento multimedia muy poderoso que permitía interactuar con el usuario. El internauta podía sentirse parte integrante de la campaña electoral. Junto al blog de campaña del candidato se podía colgar un blog personal, realizar donaciones al partido, bien directamente o indirectamente a través de merchandising electoral o con las descargas de tonos (600 millones $ en total), se podían realizar llamadas a los amigos indecisos, hacerse voluntario para expandir el mensaje de Obama e incluso podía calcular el importe de sus impuestos si era este elegido presidente...

...Pero el mayor éxito de la campaña web de Obama ha sido el uso de youtube. Los videos del demócrata se han visto 77 millones de veces desde el inicio de octubre frente a los sólo 20 millones del republicano. La capacidad productiva audiovisual de Obama se ha incrementado según se acercaba la fecha de los comicios llegando incluso a volcar 20 videos al día durante la última semana. El youtube oficial de Obama cerró la campaña con 1822 videos frente a los apenas 330 de McCain. Entre los videos colgados en su página encontramos entrevistas, intervenciones en mítines, apariciones en tv, mensajes de apoyo, videos musicales, videos de simpatizantes, consejos sobre cómo votar, mensajes específicos para hispanos, etc.

Lecciones de la campaña de Barack Obama

Inspiración:

Tutorial para realizar un Poster Político: El siguiente tutorial es para realizar un Poster al estilo de Barack Obama, quien ha definido una tendencia. Sigan los pasos, cambien los colores de acuerdo a su partido político, y voila!!!. Ir al Tutorial >>

Tutorial para realizar un Botón de Campaña

Y finalmente, un poco de humor:

Fuentes:
Fernandez, Jaime. (2008). Barack Obama o el triunfo del ciber candidato. Artículo disponible en línea: www.marketalia.com

[+/-]

Agrandar / Achicar texto de la entrada

TUTORIAL ACHICAR / AGRANDAR
Generalmente este script lo utilizan los Periódicos online, pero es importante colocarlo en todos los Blogs, dándoles la opción a los usuarios de elegir el agrandar o achicar el tamaño de la letra de los artículos.

Recuerden descargar su plantilla antes de realizar algún cambio en la misma.
Para observar un ejemplo de este tutorial, Uds. podrán observar en la esquina superior izquierda de las entradas de este Blog, 3 recuadros con 3 letras: -A, A, +A, que al hacer clic sobre ellas, el tamaño de las letras de los artículos aumentan o disminuyen.

PASOS:

1. Abrimos nuestro administrador de Blogger: www.blogger.com
2. Ir a Diseño/Edición HTML
3. Buscar CTRL + F la siguiente parte del código: </head>
4. Justo antes de </head>, pegamos el siguiente código:

<link href="http://www.geocities.com/internetuide/doctextsizer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/internetuide/doctextsizer.js">

/***********************************************
* Document Text Resizer Script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>

5. Guardamos la Plantilla
6. Buscamos con CTRL + F: ]]></b:skin>, y antes de ]]></b:skin> pegamos el siguiente código:


/* AGRANDAR-ACHICAR LETRA
---------------------------------------------
*/

.contentarea{
font-size: 16px;
}

.smallview .contentarea{ /*CSS for "small font" setting*/
font-size: 10px;
}

.normalview .contentarea{ /*CSS to return page to default setting (with no additional CSS rules added)*/
font-size: 12px;
}

.largeview .contentarea{ /*CSS for "large font" setting*/
font-size: 14px;
}

Guardamos la plantilla.
7. Buscamos con CTRL + F la siguiente parte del código: <div id='main-wrapper'>. Si no lo encontramos vamos reduciendo la búsqueda, por ejemplo buscamos solamente main-wrapper. Insertamos el siguiente código en la Plantilla HTML, después de <div id='main-wrapper'>. Haz clic sobre VER SCRIPT, selecciona el código con CTRL + A, cópialo con CTRL + C y pégalo después de <div id='main-wrapper'>.

VER SCRIPT

8. Guardamos la Plantilla
9. Ir a Configuración > Formato
10. Pegar la siguiente línea en la caja de PLANTILLA DE ENTRADA:

<div class='contentarea'>Aquí va el texto a achicar o agrandar</div>

11. Guardar Configuración
12. Abrir CREAR UNA NUEVA ENTRADA y en Edición de HMTL, les va a aparecer la línea del código anterior, y en lugar de "Aquí va el texto a achicar o agrandar", colocar el texto e imágenes correspondientes a su entrada".

Para los que tienen la opción de Leer más en la plantilla:

El código en CONFIGURACIÓN / FORMATO / PLANTILLA DE ENTRADA les deberá quedar:

<div align="justify"><div class="contentarea">
Colocar aquí resumen de la entrada

<span class="fullpost">
Aquí va el texto secundario que van a expandir al hacer clic con Leer más.
</div></span></div>

[+/-]

Efecto Easing para Ir a Inicio

[+/-]

Acordeón en la Sidebar o en las Entradas

Tutorial tomado de Vagabundia. El efecto es expandir o contraer un elemento, con el fin aminorar elementos en el Blog.

El siguiente tutorial es tomado de VAGABUNDIA, bajo el post Bloques animados en la sidebar.

PASOS:

1. Implementar el siguiente código antes de </head>

<script type="text/javascript" src="http://www.geocities.com/internetuide/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

2. El código para implementar un bloque expandible es el siguiente:

<a href="javascript:nombreVAR.slideit()" style=" [estilo del botón] "></a>
<div id="nombreID" style="width:100%;">
<div style=" [estilo del contenido] "> [contenido] </div>
</div>
<script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)
</script>

Los nombres nombreVAR y nombreID deben ser únicos, si se colocan varios bloques expandibles, cada uno debe ser diferente.

El contenido de STYLE del DIV nombreID puede ser cualquier otro. Utilizando width:100% abarca el total de la sidebar.

tiempo indica la duración del efecto y es un valor expresado en milisegundos (1000 = 1segundo).

estadoinicial puede ser true o false e indica el estado inicial del bloque. Si es true, estará expandido y si es false, estará contraido.

DEMO EJEMPLO COLOCADO EN UN POST:

EJEMPLO ENLACE IMAGEN:

<div style="width: 100%;">
<a href="javascript:nombreVAR.slideit()" style=""><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 100%; height: 25px;" src="url_de_la_imagen" border="0" /></a>

<div id="nombreID" style="width: 100%; background-color: rgb(255, 255, 255);">
<div style="padding: 5px; color: rgb(0, 0, 0);">
Colocar el texto que irá dentro de la caja que se expanderá.
</div>
</div>
<script type="text/javascript">var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)</script>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ejercicio para realizar en clase:

EJEMPLO ENLACE TEXTO:


<div style="width: 100%;">
<a href="javascript:ejemploA1.slideit()" style="">[+/-] EXPANDIR / CONTRAER</a>
<div id="A1" style="width: 100%; height:100px; background-color: rgb(255, 255, 255);">
<div style="padding: 5px; color: rgb(0, 0, 0);">
Colocar el texto que irá dentro de la caja que se expanderá.
</div>
</div>
<script type="text/javascript">var ejemploA1=new animatedcollapse("A1", 100, false)</script>
</div>

[+/-] EXPANDIR / CONTRAER

Colocar el texto que irá dentro de la caja que se expanderá.

Otra ejercicio para aplicar en clase:

Cuando se desea colocar un enlace para EXPANDIR y otro para CONTRAER.

<a href="javascript:ejemploA3.slidedown()">EXPANDIR</a> || <a href="javascript:ejemploA3.slideup()">CONTRAER</a>
<div id="A3" style="width: 100%; height: 100px; background-color: #dadfdf;">
<div style="color: rgb(0, 0, 0); text-align: center;">
 Colocar aquí texto que se expanderá y contraera al ejecutar cada acción del enlace.
 <script type="text/javascript">var ejemploA3=new animatedcollapse("A3", 500, false)</script></div></div>

EXPANDIR || CONTRAER

Este es el contenido del DIV.

[+/-]

Clase 21 y 22 Enero: Favicon, Pullquote...

[+/-]

Añadir un Favicon a tu Blog

CREAR UN FAVICON
Añadir un FAVICON a tu dirección URL

Favicon es una imagen pequeña que aparece en la parte superior, junto a la dirección URL de tu sitio web, normalmente se trata de una imagen con extensión .ico.

El generador de favicon más conocido es http://www.favicon.cc/ y te permite importar la imagen de tu icono desde cualquier extensión, es solamente necesario que la imagen sea cuadrada y tenga un tamaño de 16x16 px.

Descargar el Favicon a su computador y subirlo a un hosting gratuito como www.geocities.com

Agregar el siguiente tag en la plantilla html, entre <head> y </head>

<link href='url_del_favicon' rel='icon' type='image/png'/>
<link href='url_del_favicon' rel='shortcut icon' type='image/png'/>

Reemplazar el URL DEL FAVICON por la dirección donde está alojado su favicon.ico

Ejemplos para aplicar en clase con imágenes ya alojadas en Geocities.

EJEMPLO 1: BLOGFESOR FAVICON

<link href='http://www.geocities.com/internetuide/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://www.geocities.com/internetuide/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

EJEMPLO 2: FLOR FAVICON
Favicon en formato .ico

<link href='http://www.geocities.com/internetuide/rosa.ico' rel='icon' type='image/x-icon'/>
<link href='http://www.geocities.com/internetuide/rosa.ico' rel='shortcut icon' type='image/x-icon'/>

EJEMPLO 3: GIF FAVICON
Favicon en formato .gif


<link href='http://i265.photobucket.com/albums/ii210/internetuide/blogfesor/faviconico1.gif' rel='icon' type="image/gif"/>
<link href='http://i265.photobucket.com/albums/ii210/internetuide/blogfesor/faviconico1.gif' rel='shortcut icon' type="image/gif"/>

En el tutorial que presenta anieto2k, señala:

a) <link href='url_del_favicon' rel='icon' type='image/png'/>
b) <link href='url_del_favicon' rel='shortcut icon' type='image/png'/>
En la mayoría de navegadores basta con usar la opción (a) ya que el rel debe indicar que se trata de un icono, aunque navegadores como Internet Explorer tienen problemas con este rel. Para evitar dicho problema se suele usar la opción (b), que producirá que los navegadores más estandares omitan la palabra “shotcut” y lo traten como si una “icon” se tratara.

Ruta

En el href, indicaremos donde se encuentra la imagen que mostraremos. Podemos usar rutas absolutas o relativas, lo que nos permite un gran grado de personalización en este aspecto, pudiendo tenerlo en un servidor externo o tener varios por servidor.

Interesante: Si llamamos al fichero favicon.ico y lo alojamos en la raiz de nuestro servidor, esta imagen será usada en cualquier sitio del sitio web.

Imágenes

Usaremos una imagen que puede ser de tipo:

* ICO
* GIF
* PNG

Dependiendo del tipo de imagen que usemos deberemos cambiar el type de nuestro tag para informar sobre el tipo de imagen que hemos optado usar y que el navegador va a cargar.
ICO) <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon" /> //M$
ICO) <link rel="icon" href="/favicon.ico" type="image/x-icon" /> //Estandar
GIF) <link rel="icon" href="/favicon.gif" type="image/gif" />
PNG) <link rel="icon" href="/favicon.png" type="image/png" />

[+/-]

Tarea: Motion Graphics

[+/-]

Motion Graphics

[+/-]

Pullquote

DESTACAR TEXTO EN POST
"Un pullquote es un elemento, normalmente de texto, que se destaca dentro de una entrada".

Recuerden descargar su plantilla antes de realizar algún cambio en la misma.

Generalmente este estilo sirve para resaltar una frase de un texto, enfatizar un concepto. Lo ocupan en Diarios, revistas, etc.

En esta entrada podrán encontrar un ejemplo de Pullquote y los pasos para adaptarlo a su Blog.

PASOS:

1. Abrir su administrador de Blogger: www.blogger.com
2. Ir a la pestaña Diseño/Edición HTML
3. Buscar con CTRL + F, la siguiente parte del código: ]]></b:skin>
4. Pegar el siguiente código antes de ]]></b:skin>


.pullquote {
width: 150px;
float: right;
padding:20px 10px 10px 30px;
margin:10px auto auto 10px;
background-color:transparent;
background-image: url(http://img47.imageshack.us/img47/457/comillasil6.gif);
background-repeat: no-repeat;
background-position: 2px 15px;
color:#990000;
border:0px solid #cccccc;
text-align:left;
font-weight:normal;
font-size:24px;
font-style:none;
font-family:impact;
line-height:24px;
}
.pullquote:first-letter {
color:#300C06;
display:block;
font-size:50px;
font-family:arial;
font-weight:bold;
}

5. Guardar la Plantilla
6. Creen una entrada con texto y al iniciar este pegar el siguiente código:

<span class="pullquote">Colocar aquí el texto que desean resaltar</span>

Fuente: Pullquote. Entradas con Estilo

Recuerden que cada miércoles antes de la clase los trabajos prácticos son calificados y los que no los tengan en su Blog van aminorando su nota...

OTRA OPCIÓN:

Esta es otra opción para definir un pullquote. El siguiente código fue tomado de Mandarin Design.

CSS Magazine Style Pullquotes in Orange

Los PASOS a seguir son sencillos y el código se incluye directamente en Creación de Entradas.

Por lo tanto:

1. Ir a Creación de Entradas y pegar el siguiente código:

<div style="float: right; width: 250px; margin-top: 10px; margin-bottom: 15px; margin-left: 10px; padding-bottom: 10px; line-height: 24px; color: rgb(255, 102, 0); text-align: right;font-family:Arial,Helvetica,Georgia;font-size:28px;"><span style="color:gold;">...Colocar</span> en este espacio <b>el texto</b> el texto<span style="color:orange;"> a resaltar...</span>
</div>

2. Cambiar en donde dice texto, con las frases que desan colocar en el Pullquote.
3. Publicar la entrada.

[+/-]

Paginación en Blogger

TUTORIAL PAGINACIÓN
Prácticas para las clases del 21 y 22 de enero.
Paginar los posts de Blogger.

PASOS:
1. Abrir su administrador de Blogger: www.blogger.com
2. Ir a Diseño/Elementos de Página
3. Añadir un gadget: HTML/JavaScript
4. No colocar título y pegar el siguiente código.


<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

5. Guardar
6. Arrastrar el HTML/JavaScript añadido y colocarlo debajo de Entradas del Blog
7. Guardar
8. Editar Entradas del Blog y en Número de entradas en la página principal, colocar 5 entradas.

Fuente: Page Navigation Menu Widget for Blogger

[+/-]

Meta Tags más utilizados

[+/-]

Ayuda para el Trabajo Final

[+/-]

MooSlide, Etiqueta "Title" o "Alt", Meta Etiquetas

[+/-]

Efecto MooSlide para su Blog

[+/-]

Traductor para tu Blogger

[+/-]

Efecto Lytebox para su Blog

Tutorial tomado de HACKTIME y GEMABLOG.
Con este JavaScript aprenderemos a mostrar diversidad de archivos en una ventana nueva, pero no del navegador, sino en el mismo blog. Para dar una apariencia más profesional.

Recuerden que antes de realizar cualquier cambio en su plantilla, deben guardar la plantilla actual con la que trabajan, en caso de que ocurra algún error en el proceso.

PASOS:

1. Abrir nuestro administrador de Blogger: www.blogger.com
2. Hacer clic en la pestaña Diseño/Edición HTML
3. Buscar CTRL + F, la siguiente parte del código: </head>
4. Antes de </head>, pegar el siguiente código:

<script src='http://www.geocities.com/vanalexa/lytebox.js' type='text/javascript'/>
<link href='http://www.geocities.com/vanalexa/lytebox.css' rel='stylesheet' type='text/css'/>

5. Guardamos la Plantilla
6. Alojar las imágenes que ocuparemos en www.photobucket.com
7. Para aplicar el efecto tendremos que colocar el siguiente código cada vez que se lo quiera utilizar:

<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>

En Url de la imagen, copiar la dirección donde aloja phothobucket, el Direct Link

Debemos tener en cuenta que si deseamos cambiar el texto junto a la imagen, debemos cambiar el texto que van entre comillas en TITLE, si no desean colocar ningún texto deben dejarlo en blanco, title="".

DEMO:

CÓDIGO ENLACE A IMAGEN

<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>

CÓDIGO GRUPO DE IMÁGENES

<a href="Url-de-la-imagen" rel="lytebox[NOMBRE]" title="Título">texto o imagen 1</a>
<a href="Url-de-la-imagen" rel="lytebox[NOMBRE]" title="Título">texto o imagen 2</a>
<a href="Url-de-la-imagen" rel="lytebox[NOMBRE]" title="Título">texto o imagen 3</a>

La diferencia en el grupo de imágenes es que se coloca el atributo rel="lytebox[NOMBRE]"
(Sustituir NOMBRE por el nombre adjudicado al grupo de imágenes) ejemplo: docentes, alumnos, aulas...

CÓDIGO SLIDESHOW

<a href="Url-de-la-imagen" rel="lyteshow[NOMBRE]" title="Título">texto o imagen 1</a>
<a href="Url-de-la-imagen" rel="lyteshow[NOMBRE]" title="Título">texto o imagen 2</a>
<a href="Url-de-la-imagen" rel="lyteshow[NOMBRE]" title="Título">texto o imagen 3</a>

La diferencia para aplicarlo mediante un Slideshow es añadiendo la etiqueta rel="lyteshow[NOMBRE]". Se dbe sustituir NOMBRE por una etiqueta adjudicado al grupo de imágenes) ejemplo: docentes, alumnos, aulas...

CÓDIGO PARA LLAMAR UN SITIO WEB DENTRO DEL BLOG
La posibilidad de añadir un iframe con la etiqueta rel="lyteframe" o rel="lyteframe[NOMBRE]" resulta muy útil cuando tratamos de mostrar una página si necesidad de salir del blog.

<a href="iframe-único" rel="lyteframe" title="Título">texto o imagen</a>

Al usar Lyteframe podemos añadir barra de scroll y escoger tamaño, lo haremos con la etiqueta rev

<a href="Url-de-la-pagina" rel="lyteframe" title="Título"
rev="width: 500px; height: 450px; scrolling: no;">texto o imagen</a>

En "Título" añadiremos el título de la imagen.

Donde "Url-de-la-imagen" y "Url-del-iframe" la Url correspondiente según el caso.

En "texto o imagen" escribiremos el texto que servirá de enlace. Si es una imagen sustituiremos "texto o imagen" por

.

Insertar tablas en las entradas de blogger

Clase 4 y 5 de Febrero: Tutoriales

Inspiration: Diseño de Blogs

Trabajo: Gráficos en Movimiento

Clase 28 y 29 de Enero: Tutoriales

Tabla de Contenidos para tu Blog

Paleta de Colores RGB

Calendario de Archivos

Código para colocar una imagen en HTML y un hipervínculo

Ayuda: Proyecto Marketing Político en Internet

LogoInstant.com

Lecciones de Campaña Obama / Biden

Agrandar / Achicar texto de la entrada

Efecto Easing para Ir a Inicio

Acordeón en la Sidebar o en las Entradas

Clase 21 y 22 Enero: Favicon, Pullquote...

Añadir un Favicon a tu Blog

Tarea: Motion Graphics

Motion Graphics

Pullquote

Paginación en Blogger

Meta Tags más utilizados

Ayuda para el Trabajo Final

MooSlide, Etiqueta "Title" o "Alt", Meta Etiquetas

Efecto MooSlide para su Blog

Traductor para tu Blogger

Efecto Lytebox para su Blog

Blogfesor UIDE LOJA

Categorías

Los + Leídos

Implementa un Blog en tu empresa

Blogs recomendados

Archivos

Columna 1, fila 1	Columna 2, fila 1	Columna 3, fila 1
Columna 1, fila 2	Columna 2, fila 2	Columna 3, fila 2

remplaza_fecha('28 enero 2009');

remplaza_fecha('27 enero 2009');

remplaza_fecha('26 enero 2009');

remplaza_fecha('25 enero 2009');

remplaza_fecha('24 enero 2009');

remplaza_fecha('23 enero 2009');

remplaza_fecha('19 enero 2009');

remplaza_fecha('18 enero 2009');

remplaza_fecha('17 enero 2009');

remplaza_fecha('16 enero 2009');

remplaza_fecha('15 enero 2009');

remplaza_fecha('14 enero 2009');

remplaza_fecha('08 enero 2009');

Blogfesor UIDE LOJA

Categorías

Los + Leídos

Implementa un Blog en tu empresa

Blogs recomendados

Archivos