martes, 17 de octubre de 2006

Destripando la planilla (4)



Durante varios días me dediqué a destripar la plantilla de Blogger Beta para divertirme y, de paso, tratar de entenderla. El resultado lo resumí en tres partes:



Destripando la planilla (1ª parte)


Destripando la planilla (2ª parte)

Destripando la planilla (3ª parte)



La base de la plantilla es "Blogger Theme Beckett : Source: Typepad : Modified by: www.VirtuPlus.com", requiere de varias imágenes, dos hojas de estilo y además, contiene una serie de modificaciones personales.



Lo primero que se debe tener en cuenta es que la sintaxis del código es extremadamente estricto, no se admiten etiquetas que no tengan su correspondiente cierre.

Por ejemplo:
<img ......>

<br>
son inaceptables y debe utilizarse:
<img ...... />
<br />
Las plantillas admiten la edición incluso dentro de las widgets y el código modificado manualmente es respetado cuando se editan los elementos en la solapa Template (Layouts) Elements, sin embargo, si se inserta un nuevo elemento, este no contendrá las modificaciones.



Para evitar escribir el código una y otra vez, es conveniente utilizar las definiciones de estilo de la plantilla y preservar, hasta donde sea posible los nombres de los atributos CLASS e ID.




Hay que recordar que b:section y b:widget serán reemplazados por una etiqueta <DIV>
<b:section class='sidebar' id='sidebar' preferred='yes'>
será convertido en:
<div class='sidebar section' id='sidebar'>

y
<b:widget id='HTML1' locked='false' title='' type='HTML'>
será convertido en:
<div class='widget HTML' id='HTML1'>
El mayor problema se presenta cuando se quiere establecer el estilo de algunas widgets que contienen atributos CLASS o ID genéricos, por ejemplo:
id='main'

class='title'
class='widget-content'
son definiciones comunes. Esto hace imposible identificar una en particular a menos que se utilice el identificador del widget que, como es creado en forma dinámica, puede llevar a confusiones y problemas. Supongamos que se tiene una declaración así:
.Image1 {border: 2px solid #FFFFFF;}
si insertamos un elemento PICTURE a la plantilla, se generará este código:

<b:widget id='Image1' locked='false' title='Primera' type='Image'/>
y el resultado será una imagen con un marco blanco, pero si insertamos un segundo elemento PICTURE, se generará este código:
<b:widget id='Image2' locked='false' title='Segunda' type='Image'/>
y la imagen no tendrá borde. Así, a medida que agregamos y quitamos elementos del mismo tipo, las ID de estos irán cambiando por lo que será imposible tener una referencia a cada uno de ellos.




Sin embargo, algunas widgets son únicas (no pueden agregarse más), por lo tanto, los atributos ID pueden usarse para declarar estilos sin inconvenientes. Estos elementos únicos son: HEADER, PROFILE, POSTS (BLOG), ARCHIVES y LABELS.




Por otro lado, el elemento PICTURE no parece ser muy interesante ya que carece de flexibilidad, y los elementos LIST y TEXT son redundantes y por lo tanto, inútiles.



Los elementos LINKLIST pueden ser personalizados mediante definiciones de estilo:
.sidebar cualquier_etiqueta {.......}
aunque todas tendrán el mismo formato.




Por último, creo que el elemento HTML/JAVASCRIPT es el más flexible ya que permite ingresar cualquier código, tanto HTML como JavaScript. Su mayor dificultad es la limitadísima capacidad del editor.



Por supuesto, es más que recomendable que se GUARDE la plantilla ANTES de hacer cualquier modificación. Blogger Beta permite bajarla a la PC en formato XML y, si es necesario, volverla a cargar. Además, siempre es posible descartar el uso de las nuevas plantillas y volver a usar los modelos viejos.




















Fuentes - Fonts
SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font







free counters



Disculpen las Molestias





INFORMÁTICA - UTILIDADES





domingo, 15 de octubre de 2006

Destripando la plantilla (3)



Lista incompleta de los códigos de datos de Blogger Beta.


En las nuevas plantillas de Blogger Beta, los datos individuales son accesibles a través de la instrucción:


<data:tipo/>
De uso general (toda la página):
data:blog.titletítulo del blog
data:blog.pageTypetipo página actual item archive index
data:blog.urlurl página actual
data:blog.homepageUrlurl página de inicio
data:blog.pageTitletítulo página actual
data:blog.encodingcodificación (UTF-8, etc.)
Widget Header
data:titletítulo del blog
data:descriptiondel blog
Widget Posts
data:authorLabeltexto para mostrar al autor
data:timestampLabeltexto para indicar la fecha
data:widget.actionUrl


data:widget.instanceId

data:toggleopen

data:postslista de posts de la página
data:post.dateHeaderfecha encabezado
data:post.ididentificador
data:post.titletítulo
data:post.bodycontenido
data:post.authorautor
data:post.urlpermalink
data:post.timestampfecha
data:post.showBacklinksindica si se muestran backlinks
data:post.numBacklinkscantidad de backlinks
data:post.emailPostUrlurl formulario 'email this post'
data:post.editUrl direcciónurl formulario de edición
data:postLabelsLabeltexto para lista de etiquetas
data:post.labelslista de tags
data:label.nametexto
data:label.urlurl de la página
data:label.isLastindica el final True False
data:post.feedLinkslista de feeds
data:feedLink.urldirección
data:feedLink.namenombre Posts Comments
data:feedLink.feedTypetipo Atom RSS
data:feedLink.mimeTypetipo contenido
data:post.allowCommentsindica si se permiten True False
data:post.numCommentscantidad
data:post.addCommentUrlurl formulario 'add a comment'
data:post.backlinkslista de backlinks
data:post.backlinksLabeletiqueta para backlinks
data:post.createLinkUrlurl vínculo al post
data:post.createLinkLabeletiqueta para crear vínculo
data:post.link

data:post.addCommentOnclick

data:post.adminClass

data:post.authorLabel


data:post.timestampLabel

data:commentLabeltexto para mostrar comentarios
data:commentslista de los comentarios (página de items)
data:comment.ididentificador
data:comment.adminClass

data:comment.bodycontenido
data:comment.timestampfecha
data:comment.authorautor o 'Anonymous'
data:comment.authorUrlurl perfil del autor
data:comment.deleteUrlurl formulario eliminación
data:comment.isDeletedindica si fue eliminado
data:olderPageUrlurl post anterior
data:olderPageTitletítulo post anterior
data:newerPageUrlurla post siguiente
data:newerPageTitletítulo de post siguiente
data:backlinksLabeltexto para backlinks
data:backlink.snippet

data:backlink.author


data:backlink.timestamp

data:backlink.adminClass

data:backlink.deleteUrl

data:backlink.url

data:backlink.title

data:top.showAuthor

data:top.authorLabel

data:top.timestampLabel

data:top.commentLabel


data:top.showTimestamp

data:top.commentLabelPlural

data:top.backlinkLabel

data:interval.expclass

data:interval.toggleId

data:intervalData

Widget Archives
data:titletítulo
data:styleestilo MENU FLAT HIERARCHY
data:datalista de archivos
data:data.namenombre
data:data.urldirección
data:data.post-countcantidad de post
Widget Profile (individual)
data:titletítulo
data:userUrlurl perfil
data:locationubicación autor
data:aboutmeinformación "About Me"
data:displaynamenombre
data:photofoto
data:photo.urlurl de la foto
data:photo.widthancho en pixeles
data:photo.heightalto en pixeles
data:photo.altcontenido del atributo "alt"
Widget Profile (equipo)
data:teamindica si es individual True False
data:titletítulo
data:authorslista de autores
data:displaynamenombre
data:userURLdirección del perfil
Widgets Text y HTML
data:titletítulo
data:contentcontenido
Widget Picture
data:titletexto título
data:sourceUrldirección
data:widthancho en pixeles
data:heightalto en pixeles
data:captiontexto adicional
Widget Labels
data:titletítulo
data:labelslista de labels
data: label.nametexto
data: label.countcantidad de posts
data: label.urlurl a la página
Widget List
data:titletítulo
data:itemslista de items
Widget LinkList
data:titletítulo
data:linkslista de vínculos
data:links.nametexto
data:links.targetdirección
para widget del Logo
data:fullButtonurl logo Blogger
Widget Feeds
data:titletítulo
data:feedUrldirección del feed
data:feedDataitems del feed
data:feedData.titletítulo
data:feedData.str_publishedcuando se publicó
data:feedData.publishedcuando se publicó
data:feedData.str_updatedcuando se actualizó
data:feedData.updatedcuando se actualizó
data:feedData.authorautor
data:feedData.summarysnippet
data:feedData.alternatemás información
data:feedData.alternate.hrefpermalink
data:feedData.alternate.typetipo de contenido
data:blog.feedLinksvínculos
data:feedLinkslista de feeds
data:feedLink.urldirección
data:feedLink.namenombre
data:feedLink.feedTypetipo
data:feedLink.mimeTypemime type
  • VER: Destripando la planilla (1ª parte) ORIGINAL
  • VER: Destripando la planilla (1ª parte)
  • VER: Destripando la planilla (2ª parte) ORIGINAL
  • VER: Destripando la planilla (2ª parte)



















Fuentes - Fonts
SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font







free counters



Disculpen las Molestias





INFORMÁTICA - UTILIDADES





Correo Vaishnava