Hacker of the Web
Tus ideas en código!...y mas

[+/-]
Mensaje de suscripción en pagina de cada etiqueta

Al hacer clic en alguna etiqueta de cualquier blog, el enlace posiblemente nos puede enviar a la página donde solamente estén entradas con esa etiqueta, o probablemente nos puede dirigir a la página de suscripción por feed de la etiqueta mencionada.

Incluso puede dirigirnos hacia una página de suscripción donde muestre también las entradas mas recientes de la etiqueta. En Blogger se puede lograr lo antes dicho, solamente con un gadget genérico, que he desarrollado:
<b:widget id='Label101' locked='false' title='Feed de etiquetas' type='Label'>
<b:includable id='main'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<span class='feedEtiqueta'>Tal vez te interese suscribirte a "<a expr:alt='"Suscribirse a " + data:label.name' expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name' expr:title='"Suscribirse a " + data:label.name'><data:label.name/> <img src='http://lh4.ggpht.com/_6CFlQEBRtLc/Sd5VV0eiB2I/AAAAAAAAB9Q/kxC1Ee_35EI/SynIco.png' style='border:0px'/></a>", para recibir entradas de "<data:label.name/>" actualizadas<br/> <b>URL:</b> <data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/></span>
</b:if>
</b:loop>
</b:includable>
</b:widget>

[1] Para agregar el gadget tendrás que entrar en Edicion HTML en la pestaña diseño de tu blog.
[2] Debes agregar el gadget justo despues de cualquier </b:widget> que veas. Luego podrás moverlo en Diseño, lo que obtendrás será
algo como esto:

Feed de etiquetas en sus páginas


[3] Luego para modificar el estilo del gadget en CSS será algo asi como esto:
.feedEtiqueta {
background: #CADAE4;
border:1px dashed black;
display:block;
margin:0 auto 0 auto;
padding:5px;
width:500px;
}

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

|✔| También puedes optar por aprender CSS y en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-]
Las intimidades del gigante de Internet

Despues de que Google, publicara su logo del cumpleaños de Samuel Morse:

Logo de google

Estuve navegando por la web y me encontré con algunas páginas de google, como:

Los logotipos oficiales de Google
http://www.google.com/stickers.html

Todos los logotipos de dias festivos de Google
http://www.google.com/holidaylogos.html

Y la galería de la central de Google en Picasa Web
http://picasaweb.google.com/googjobsmain/

Y otra página interesante, ya que estamos hablando de Samuel Morse, un traductor a morse:
http://elezeta.net/morse/

[+/-]
Recuperar el editor por defecto de Blogger

Ya son bastantes los que necesitan saber como cambiar de editor en Blogger, pues en blogger existen dos tipo de Blogger.
El primer tipo de editor y mas común es el editor llamado WYSIWYG (what you see is what you get).

Editor normal


El segundo tipo de editor es mucho mas liviano y no tiene tantas funciones.

Editor liviano


Para cambiar el tipo de editor, es necesario entrar en la pestaña Configuracion del blog y después buscar hasta abajo algo como la siguiente imagen:

Recuperar o cambiar el editor

Y si quieres tener el primer tipo de editor tendrás que cambiarlo a Si, pero si quieres el segundo tipo de editor bastará con cambiarlo a No.

Cabe rescatar que los editores son muy similares, solo que el editor WYSIWYG es mas pesado y si no conoces mucho de HTML ni de CSS, te lo recomiendo. Pero si conoces bien como dar formato al texto en CSS y HTML, te será muy estorboso ese editor ya que tiene muchisimas funciones y algunas de ellas no las utilizaremos muy amenudo.

|✔| También puedes optar por aprender CSS y en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-]
Objetos flotantes en el blog (drag and drop)

El efecto drag and drop(arrastrar y soltar), es un efecto con el cual podemos mover algún objeto, como por ejemplo el siguiente "div" tiene añadido dicho efecto:
[1] Para agregar el efecto debes descargar el siguiente Archivo Zip, que contiene:
Drag.html
Script.js


[2] Despues debes alojar el archivo Script.js a un host de internet.


[3] Ahora necesitas vincular el archivo a la página, de la siguiente manera:
<script type='text/javascript' src='URL del archivo'></script>
<script type='text/javascript'>
onload=function(){
arrastrable.call(_$('pp'),_$('pp'));
}
</script>
Todo eso antes de la etiqueta </head>

El código en color amarillo es el id del elemento al que quieres agregar el efecto.

Por ejemplo, si necesitará agregar el efecto a los siguientes elementos:
<div id='footer'></div><div id='content'></div>
En el código anterior tendría que agregar el código anterior de la siguiente manera:
<script type='text/javascript' src='URL del archivo'></script>
<script type='text/javascript'>
onload=function(){
arrastrable.call(_$('footer'),_$('footer'));
arrastrable.call(_$('content'),_$('content'));
}
</script>
El efecto lo puedes agregar a cualquier elemento del blog, que tenga un ID. Y se moverá por la página web junto con todo su contenido.

[+/-]
Agregar imagenes de forma sencilla en un post

Con conocimentos en javascript, puedes conseguir que la página funcione exactamente como quieres que lo haga, en este caso desarrollé un algoritmo o una funcion que agrega todo el código, simplemente debes agrega la URL y el nombre de dicha imagen, por ejemplo:

Este código se debe agregar antes de la etiqueta </head>:
<script type='text/javascript'>
imagen = function(url,titulo) {
if(typeof(url)!='string' || typeof(titulo)!= 'string') return title;
code = '<img src="'+url+'" alt="'+titulo+'" title="'+titulo+'" />';
document.write(code);
}
</script>
Que se utilizaría de la siguiente manera:
<script type='text/javascript'>imagen('http://img0.gmodules.com/logos/earthday09_res.gif','google')</script>
Recuerda que en la parte del código HTML en el código javascript puedes modificarlo o agregarle cosas, por ejemplo, si quiero que justo debajo de la imagen me muestre el nombre:
<script type='text/javascript'>
imagen = function(url,titulo) {
if(typeof(url)!='string' || typeof(titulo)!= 'string') return title;
code = '<div><img src="'+url+'" alt="'+titulo+'" title="'+titulo+'" /><br/><p><i>'+titulo+'</i></p></div>';
document.write(code);
}
</script>
Puedes agregar funciones para que las acciones repetitivas en tu blog, se hagan cada vez menos pesadas, por ahora simplemente agregaras poco menos código a la hora de agregar imágenes en tus entradas.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[+/-]
Manual basico de CSS

Que es, en si, el CSS?

Son las siglas de Hoja de estilos en cascada(Cascading Style Sheet), lenguaje desarrollado con fines de estilizar la estructura HTML de las páginas, es decir, separar la presentación de la estructura en la página. El funcionamiento de dicho lenguaje es darle formato a las estructuras de la página mediante unas simples reglas, entre las cuales están: Tamaño de texto, tipo de texto, margenes, tamaño del elemento, color de fondo, etc.

Cascading Stye Sheet

Es un lenguaje desarrollado por la W3C, el cual cada vez se ha hecho mas imprescindible para los diseñadores, ya que el funcionamiento y manipulación de dicho lenguaje es compatible con casi cualquier navegador.

El entender CSS tendrá como consecuencias un mejor manejo y configuración de los elementos de una página web, consiguiendo menos peso en las páginas y un código mas legible.


Elementos de CSS

Este lenguaje tiene principalmente tres partes fundamentales, que necesitas conocer:

Elementos en CSS


Valores.
Son para definir que tanto o como se modificará el atributo del elemento. Por ejemplo el color de fondo se cambiará el valor de la propiedad "background" por "blue"


Propiedades.
Cada elemento HTML de una página tiene diversas propiedades, como lo son el fondo, color de letra, borde, tipo de letra, etc. Los cuales se pueden modificar asignandole un nuevo valor


Selector.
Se utilizan para hacer referencia a que elemento(s) HTML de la página se quiere cambiar el aspecto. Para cambiar el fondo a la página se utiliza el selector "body", para referirse a la etiqueta <body> del elemento HTML


Existen tres tipos de selectores, el de:
Identificador.
El selector de identificador, hace referencia solo al elemento o etiqueta HTML (los identificadores en HTML, no se pueden repetir), que utiliza el identificador, es decir, si tuviesemos que hacer referencia a la etiqueta:
<div id='header'></div>
Para cambiar su color de fondo en CSS se vería algo así:
#header {
background-color:blue;
}

Clase.
Este otro tipo, hace referencia a todas las etiquetas, independientemente de que tipo de etiqueta utilice la clase mencionada, por ejemplo, si necesitaramos cambiar el tipo de fuente a todas las etiquetas HTML con la clase "b_lateral", en HTML se vería algo así:
<div class='b_lateral'></div>
<p class='b_lateral'></div>
y en CSS:
.b_lateral {
font-family:Arial;
}

Etiqueta.
El selector de tipo etiqueta hace referencia a todas las etiquetas HTML de la página a las que se hacen referencia, por ejemplo, si quisieramos cambiar el color de letra de todos los enlaces de la página, que en HTML se verían algo así:
<a href='http://santyweb.blogspot.com'>Hacker of the Web</a>
y en CSS:
a {
color:green;
text-align:right;
}

La sintaxis

La sintaxis, como acabas de ver en los ejemplos anteriores consta de la declaración del selector, seguido de una llave "{" dentro de la cual se escribirán las propiedades, separadas con un espacio o un salto de linea, a modificar del/los elemento(s) HTML seguida de dos puntos ":" y por penultimo el valor deseado y por ultimo el punto y coma ";" que cerrará la declaracion del valor. Una vez que se ha terminado de modificar los valores del selector se cerrará con otra llave "}".

Para colocar comentarios, que servirán después de un tiempo al querer cambiar algun elemento HTML, simplemente deben estar dentro de un "/**/", por ejemplo:
/* Estilo de enlaces */
a {
color:green;
font-style:italic;
font-weight:bold;
}

Aplicación

Para aplicar CSS en un documento HTML, existen cuatro formas de hacerlo, una de ellas es tener el código CSS en un archivo.css de texto plano por separado del archivo HTML y vinculado a este ultimo, de la siguiente forma:
<link href='archivo.css' rel='stylesheet' type='text/css'>
Aunque puedes vincular la hoja, de esta otra manera:
<style type='text/css'>
@import url("archivo.css");
</style>
Otra forma de aplicar CSS a un documento HTML es agregar el código dentro de etiquetas "style":
<style type='text/css'>
/* Aqui el código CSS */
</style>
Estas tres formas anteriores deben de estar antes de la etiqueta </head> y despues de la etiqueta de cierre <head>, es decir:
<html>
<head>
<!-- Aqui -->
</head>
<body>
</body>
</html>
Deverá estar cualquiera de las tres formas anteriores, aunque puedes utilizar las tres al mismo tiempo.

Pero en una ultima instancia, puedes agregar el estilo directamente en la etiqueta HTML, por ejemplo:
<body style='background:blue;font-family:georgia;text-size:14px;'>
</body>
De esta forma no es muy recomendable, ya que la página se vería muy engorrosa al momento de modificar y una de las cosas por las que fue desarrollado el lenguaje fue separar el estilo de la estructura HTML y facilitar el mantenimiento de la página.

Recuerda que la práctica hace al maestro, puedes comenzar poco a poco a separar la presentación de la página de su estructura HTML, ya que el CSS es un lenguaje muy potente, por lo cual, no se aprende a utilizar a la perfección de la noche a la mañana.

Yo personalmente inicié cambiando el color de fondo en las tablas y después de la página web, y fui agregando elementos al código CSS hasta que logre un buen manejo del lenguaje.

Espero añadir un manual avanzado de CSS pronto!!

[+/-]
Expandir o contraer, cada gadget

Los gadgets contraíbles tienen la misma funcionalidad que las entradas contraíbles. Puedes utilizarlo en los gadgets que quieras!!

Gadgets expandibles


[1] Para colocarlo simplemente debes dirigirte a Diseño>Edicion HTML>Expandir plantillas de artilugios y agregar las siguientes lineas de código antes de la etiqueta </head>, para cargar los archivos JavaScript, que contienen los códigos necesarios para el efecto de desplazamiento(Prototype.js y scripttaculous.js):
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Ahora solo tienes que buscar por su nombre al gadget que quieres agregar el efecto:
<b:widget id='HTML101' locked='false' title='miGadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


[3] Y modificarlo como el siguiente ejemplo:
<b:widget id='HTML101' locked='false' title='miGadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><sup><a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:widget.instanceId + &quot;_miGadget&quot; + &quot;\&quot;,\&quot;slide\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none;'>[+/-] </a></sup><data:title/></h2>
</b:if>
<div class='widget-content' expr:id='data:widget.instanceId + &quot;_miGadget&quot;'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Lo mejor en estos casos es tener como referencia la etiqueta:
  <b:includable id='main'>
Ya que esta etiqueta es la que muestra el contenido de cada gadget, asi que cada gadget la tiene. Dentro de ella estará siempre el código que necesitas modificar.

Suerte!!

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[+/-]
Estructura de un gadget en Blogger II

Anteriormente había explicado la estructura de un gadget, pero la estructura no se lleva solamente una entrada. Pues faltan por explicar algunos aspectos. Como lo son los b:includables, con los cuales reutilizaremos código fácilmente. Es decir sin tener que escribirlo dos veces.


La estructura por defecto de un gadget es la siguiente:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


Los b:includables son muy útiles a la hora de escribir código mas de una vez, ya que almacena el código en el y solo con llamarlo el código será incluido en donde fue llamado.

La estructura del b:includable es:
<b:includable id='IDENTIFICADOR'>
CODIGO
</b:includable>
Y para llamarlo:
<b:include name='IDENTIFICADOR'/>

Para utilizarlo debe colocarse de la siguiente manera:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='icono-santy'>
<img src='santy.png' />
</b:includable>

<b:includable id='main'>
<b:include name='icono-santy'/>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
<b:include name='icono-santy'/>
</div>
<b:include name='quickedit'/>
<b:include name='icono-santy'/>
</b:includable>
</b:widget>


Si agregamos el gadget anterior a la plantilla, este mostrará una imagen antes del titulo, una imagen antes del contenido del gadget y una después del icono de editar. Todo esto agregando el código dentro del b:includable y llamar al b:include, con la identificación apropiada cuantas veces queramos.

[+/-]
Estructura de un gadget en Blogger

Para comenzar a explicar la estructura de un gadget en Blogger, es necesario saber que existen varios tipos de gadget, y por defecto Blogger les da una estructura predefinida. Esta estructura se puede modificar al gusto de cada quien para un mejor manejo del blog y reutilización de código, que nos dará como resultado una mejora en la carga del blog.

La estructura por defecto de un gadget es la siguiente:

<!-- Inicia el gadget -->
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<!-- Inicia el bloque principal del gadget -->
<b:includable id='main'>
<!-- Solo mostrará el titulo si el gadget tiene titulo -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<!-- Muestra el contenido del gadget en un contenedor DIV -->
<div class='widget-content'>
<data:content/>
</div>
<!-- Por ultimo coloca al final el icono de editar -->
<b:include name='quickedit'/>
<!-- Finaliza el bloque principal -->
</b:includable>
<!-- Finaliza el gadget -->
</b:widget>


La primer linea del gadget:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
Define:
La identificación del gadget: id='HTML1'
La identificación no es nada mas que el tipo de gadget seguido del numero de gadget, que va creciendo en cada tipo de gadget, es decir, que si agregamos un gadget HTML tendrá de identificación HTML2

El estado del gadget: locked='false'
El estado del gadget puede ser true o false, si es true no se podrá mover de donde esta, pero si es false se podrá mover a cualquier sección del blog

El titulo del gadget: title=''
En el titulo del gadget es el titulo que se le agregó cuando fue agregado al blog.

El tipo del gadget: type='HTML'
Es el tipo de gadget que se agregó al blog.

La segunda linea del gadget:
<b:includable id='main'>
Es una linea tipo b:includable, es decir, que contendrá codigos que pueden reutilizarse.
Define una identificación: id='main'
Esa identificación es una palabra definida por Blogger, que es el código principal del gadget.


Y para cambios de plantillas, puedes agregar un gadget con contenido visible en la plantilla, así no tendrás que copiar y pegar códigos de gadget en gadget.
Puedes agregarlo directamente despues de un </b:widget>:
<b:widget id='HTML101' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- aqui estará el contenido visible en la plantilla -->
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.



/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.


Entradas más recientes Entradas antiguas Página Principal
Arriba