al pulsar sobre el enlace se dirige el navegador a una dirección a la cual se le pasa la página y alli se procesa mediante un programa en el lado del servidor el cual hace todas las modificaciones que no se pueden hacer en el template para que el blog sea valido blog modificado totalmente valido

martes, 9 de diciembre de 2008

Pasos a seguir hacer un blogger valido W3C HOWTO Validate Blogger

Borra en el template
todas las lineas que encuentres de tipo
"-----------------------------------------------------"


1.- borrar target='_blank'
buscar el atributo class anterior y cambiarlo por rel='NuevaFuncionalidad'

2.- añadir despues del <dl id='comments-block'>
lo siguiente:
<b:if cond='data:post.numComments==0'>
<dt/>
</b:if>


3.- añadir en la zona de los estilos justo antes de la line ]]>
lo siguiente
/** modificacines accesibilidad*/
.sinBorde
{
border : 0;
}
.centradoVertical
{
vertical-align: middle;
}



4.- buscar en el template con el marcado de expandir artilugios
<img
leerla y añadir alt='' en caso que no tenga, puedes añadirlo al final , justo antes de />
como por ejemplo en
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
cambiarlas por
<img src='http://www.blogger.com/img/icon_delete13.gif' alt=''/>

5.-borrar border='0'
buscar el atributo class anterior y añadir sinBorde en caso que no exista crearlo despues de la etiqueta
ejemplos
<img class='comment sinBorde' src='.......
<span class='sinBorde'

6.-borrar align='absmiddle'
buscar el atributo class anterior y añadir centradoVertical en caso que no exista crearlo despues de la etiqueta
ejemplos
<img class='comment centradoVertical' src='.......
<span class='centradoVertical'


GADGETS
1.-General:
los iframes hay que sustituirlos por objects, las img deben contener atributo alt , las listas deben tener al menos un elemento li
para sustituir los iframes por objects hay que cambiar las dos etiquetas de iframe por la palabra object y la palabra src que encontraremos entre medias cambiarla por la palabra data, como el ejemplo
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=673449746284806994&blogName=completamente+Valido+Est%C3%
A1ndares&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLUE&layoutType=LAYOUTS&homepageUrl=http%3A%2F%
2Fcompletamentevalido.blogspot.com%2F&searchRoot=http%3A%2F%2Fcompletamentevalido.blogspot.com%2Fsearch" marginwidth="0" marginheight="0"
scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" title="Blogger Navigation and Search"></iframe>
cambiar por
<object data="http://www.blogger.com/navbar.g?targetBlogID=673449746284806994&blogName=completamente+Valido+Est%C3%
A1ndares&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLUE&layoutType=LAYOUTS&homepageUrl=http%3A%2F%
2Fcompletamentevalido.blogspot.com%2F&searchRoot=http%3A%2F%2Fcompletamentevalido.blogspot.com%2Fsearch" marginwidth="0" marginheight="0"
scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" title="Blogger Navigation and Search"></object>

2.-Subscripcion al blogger:
buscar la etiqueta subscribe y realizar los cambios anteriores sobre
1- <img sin alt
2- sustitucion de border y aling
3-target blank
y asi con todos los que salen hasta la etiqueta </b:widget>
4.-ul sin li asi que a cada elemento de tipo
<a class='feed-reader-link' expr:href='"http://www.google.com/ig/add?source=bstp&feedurl=" + data:feed.encodedUrl' rel='NuevaFuncionalidad'>
<img alt='' expr:src='data:imagePathBase + "subscribe-google.png"'/>
</a>
hay que ponerlo entre tag li quedando
<li><a class='feed-reader-link' expr:href='"http://www.google.com/ig/add?source=bstp&feedurl=" + data:feed.encodedUrl' rel='NuevaFuncionalidad'>
<img alt='' expr:src='data:imagePathBase + "subscribe-google.png"'/>
</a></li>

3.-google calendar
http://hosting.gmodules.com/ig/gadgets/file/116287936210312120217/calendar-for-your-site.xml
introducido mediante añade tu propio, este es el original , si lo buscas entre los gadgets hay muchos que se llaman igual y no funcionan
cambiamos iframes por objects , y src por data
ponemos alt
frameborder , usar la misma tecnica que con border='0'
la linea
id='data:moduleId' expr:name='data:moduleId'
cambiar por
id='"module"+data:moduleId' expr:name='"module"+data:moduleId'

4.-del icio us tag roll de http://delicious.com/help/tagrolls
del código que sale cuando preparas la configuración solo tienes que buscar los & y cambiarlos por &

5.-seguidores registrarte uno mismo como su primer seguidor
cambiar
expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"'
expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"'
expr:width='data:follower.imageWidth'

lo que hacemos es quitar el evento onload, dejando que se carge directamente , y ademas quitamos el evento onerror por que si no hay imagen se cargará el alt de todas formas, quedando
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:src='data:follower.imageUrl'
expr:width='data:follower.imageWidth'/>

6.-lista de blogs
border

7.-elementos compartidos del google reader
añadido mediante el codigo que se genera en el google reader en elementos compartidos , pinchando en Añade un clip a tu sitio web o blog.
amp

y al fina usa esta dirección para comprobar que valida
http://vecinos.urbanizacioncasasverdes.org/web2/trucos/home.php?miBlog=elquesea.blogspot.com

cambia "elquesea" por tu nombre

codigo PHP que se ejecuta para limpiar

cualquier aportación se agradece, tambien me estoy planteando usar la libreria que acabo de descubrir llamada html-Purifier

archivo http://vecinos.urbanizacioncasasverdes.org/web2/trucos/home.php

<?php

error_reporting(E_ALL);

ini_set("display_errors", 1);

include ('configuracion.php');
require_once ('Funciones.php');
$laPagina="";
if (isset($_GET['miBlog']))
{
$urlDeTuBlog="http://".$_GET['miBlog'];
}

if (isset($_GET['vieneDe']))
{
$laPagina=$_GET['vieneDe'];
}
else
{
$laPagina= $urlDeTuBlog."/index.html";
}


$todo=Funciones::leeLaPagina($laPagina);
$original=$todo;
//cambiamos las amp que estan mal
foreach($SitiosDondeReemplazarElAmp as $donde=>$clave){
Funciones::cambiaAmper($clave);
}
//cambiamos los iframes por object y los src por data
foreach($SitiosDondeReemplazarElIframe as $donde=>$clave){
Funciones::cambiaIframe($clave);
}
//Borrar codigos de maquetado despues del body que estan mal puestos
foreach($codigosAQuitar as $donde=>$clave){
Funciones::borrarCodigo($clave);
}
foreach($SitiosDondeCerrarEtiquetaMalCerrada as $donde=>$clave){
Funciones::cerrarEtiquetas($clave);
}

//redireccionar los links para que vengan aqui
Funciones::cambiarTodosLosLinks($urlDeTuBlog);
foreach($SitiosDondeReemplazarTodasLasAparicionesDelAmp as $clave )
{
$desde=($clave["desde"]);
$hasta=($clave["hasta"]);
Funciones::cambiarTodasLasAparicionesDeAmpEn($desde,$hasta);
}
Funciones::quitaTodosLosTargetConfig($urlDeTuBlog);
Funciones::cambiarMayusculasPorMinusculas($urlDeTuBlog);


echo "$todo";
?>

archivo http://vecinos.urbanizacioncasasverdes.org/web2/trucos/funciones.php

<?php

class Funciones
{

public static function leeLaPagina($url)
{
$retorno = "";
$todo="";
$url_web = fopen ("$url", "r");
if (!$url_web) { echo "<p>Error obteniendo codigo fuente de la web.\n"; exit; }
while (!feof ($url_web))
{
$contenido = fgets ($url_web);
$todo.=$contenido;
}
fclose($url_web);
$retorno=$todo;
return $retorno;
}

public static function cambiaAmper($despuesDe)
{
global $todo;
$donde=strpos($todo,$despuesDe);
if ($donde)
{
$elAmp = strpos($todo, '&', $donde);
$retorno=True;
if($elAmp) $todo= substr_replace ($todo, 'amp;',$elAmp+1, 0);
}
}
public static function cambiaIframe($cual)
{
global $todo;
$donde="";
$queQuito="";
$elIframe="";
$elScr="";

$donde=strpos($todo,$cual);
$queQuito="iframe";
$elIframe = strpos($todo, $queQuito, $donde);
$todo= substr_replace ($todo, 'object',$elIframe,strlen($queQuito) );
$queQuito="src";
$elSrc = strpos($todo, $queQuito, $donde);
$todo= substr_replace ($todo, 'data',$elSrc,strlen($queQuito));
$queQuito="iframe";
$elCierreIframe = strpos($todo, "/".$queQuito, $donde);
$todo= substr_replace ($todo, 'object',$elCierreIframe+1, strlen($queQuito));


}

public static function borrarCodigo ($cual)
{
global $todo;
do {
$donde=strpos($todo,$cual);
if ($donde) $todo= substr_replace ($todo, '',$donde,strlen($cual) );
}while ($donde);
}

public static function quitaTodosLosTargetConfig ($cual)
{
global $todo;
$desde=0;
do {
$donde=strpos($todo,"target='config",$desde);
if ($donde)
{
$dondeEstaElProximoApostrofo=strpos($todo,"'",$donde+8);
$espacioQueHayQueBorrar=($dondeEstaElProximoApostrofo+1-$donde);
$todo= substr_replace ($todo, '',$donde,$espacioQueHayQueBorrar );
$desde=$espacioQueHayQueBorrar;
}
}while ($donde);
}





public static function cambiarTodosLosLinks($urlDeTuBlog)
{
global $todo;
$queBusco="href=\"".$urlDeTuBlog;
$loQueLePongo="http://vecinos.urbanizacioncasasverdes.org/web2/trucos/home.php?vieneDe=";
do {
$donde=strpos($todo,$queBusco);
if ($donde) $todo= substr_replace ($todo,$loQueLePongo,$donde+6,0 );
}while ($donde);
$queBusco="href='".$urlDeTuBlog;
$loQueLePongo="http://vecinos.urbanizacioncasasverdes.org/web2/trucos/home.php?vieneDe=";
do {
$donde=strpos($todo,$queBusco);
if ($donde) $todo= substr_replace ($todo,$loQueLePongo,$donde+6,0 );
}while ($donde);

}





public static function cambiarTodasLasAparicionesDeAmpEn ($desde,$hasta)
{
Funciones::cambiaQue_PorQue_Como_Desde_Hasta("&","amp;","meter",$desde,$hasta);
}

public static function cambiaQue_PorQue_Como_Desde_Hasta ($cadenaDesdeDondeMetemos,$cadenaQueVamosAMeter,$accion,$desde,$hasta)
{
global $todo;
$aunHay=TRUE;
$pordonde=0;
$espaciosQueQuitamos=0;
$primerDesde=strpos($todo,$desde,0);
$caracteresMetidos=strlen($cadenaQueVamosAMeter);
if ($accion=="meter") $espaciosQueQuitamos=0;else
{
$espaciosQueQuitamos= strlen($cadenaDesdeDondeMetemos);
}
if ($primerDesde)
{
do{
$donde=strpos($todo,$desde,$pordonde);
$pordonde=$donde;
if ($donde)
{
$hastaDonde=strpos($todo,$hasta,$donde);
do{
$PosicionDelComentario = strpos($todo, $cadenaDesdeDondeMetemos, $pordonde);
if ($PosicionDelComentario<$hastaDonde && $PosicionDelComentario>0)
{
$todo= substr_replace ($todo, $cadenaQueVamosAMeter,$PosicionDelComentario+1, $espaciosQueQuitamos);
$hastaDonde=$hastaDonde-$espaciosQueQuitamos+$caracteresMetidos;
$pordonde=$PosicionDelComentario+1;
$quedanmasaqui=true;
}
else
{
$pordonde=$hastaDonde;
$quedanmasaqui=false;
}
}while ($quedanmasaqui);
}
}while($donde);
}
}









public static function cerrarEtiquetas($cual)
{
global $todo;
$donde="";
$desde=0;
do{
$donde=strpos($todo,$cual,$desde);
if ($donde)
{
$laEtiquetaCerradaMal = strpos($todo, '>', $donde);
$todo= substr_replace ($todo, '/',$laEtiquetaCerradaMal, 0);
}
$desde=$donde+1;
}while($donde);
}

public static function cambiarMayusculasPorMinusculas ($url)
{
global $todo;
$queBusco="";
global $etiquetasAPonerEnMinusculas;
foreach($etiquetasAPonerEnMinusculas as $clave)
{
$desde=0;
do {
$donde=strpos($todo,$clave,$desde);
$loQuePongo=strtolower($clave);
if ($donde) $todo= substr_replace ($todo,$loQuePongo,$donde,strlen($clave));
$desde=$donde+1;
}while ($donde);
}
}

}
?>


archivo http://vecinos.urbanizacioncasasverdes.org/web2/trucos/configuracion.php

<?php
$urlDeTuBlog="http://completamentevalido.blogspot.com";
$SitiosDondeReemplazarElAmp;
$SitiosDondeReemplazarElAmp["LinkDelNavbar"] = "http://www.blogger.com/dyn-css/authorization.css?targetBlogID";
$SitiosDondeReemplazarTodasLasAparicionesDelAmp;
$SitiosDondeReemplazarTodasLasAparicionesDelAmp["LinkDelDeleteComment"]['desde'] = "href='http://www.blogger.com/delete-comment.g?";
$SitiosDondeReemplazarTodasLasAparicionesDelAmp["LinkDelDeleteComment"]['hasta'] = "onclick";

$SitiosDondeReemplazarTodasLasAparicionesDelAmp["elLinkDelComment"]['desde']="href='https://www.blogger.com/comment.g?blogID";
$SitiosDondeReemplazarTodasLasAparicionesDelAmp["elLinkDelComment"]['hasta'] = "onclick";

$SitiosDondeReemplazarTodasLasAparicionesDelAmp["elLinkDeLosPostEdit"]['desde']="<a href='http://www.blogger.com/post-edit.g?blogID=";
$SitiosDondeReemplazarTodasLasAparicionesDelAmp["elLinkDeLosPostEdit"]['hasta'] = "title=";

$SitiosDondeReemplazarTodasLasAparicionesDelAmp["LinkDelQuikedit"]['desde'] = "href='http://www.blogger.com/rearrange?blogID";
$SitiosDondeReemplazarTodasLasAparicionesDelAmp["LinkDelQuikedit"]['hasta'] = "onclick";

$SitiosDondeReemplazarTodasLasAparicionesDelAmp["laImagendelcalendar"]['desde'] = "src='http://gmodules.com/ig/rgp";
$SitiosDondeReemplazarTodasLasAparicionesDelAmp["laImagendelcalendar"]['hasta'] = "/>";


$SitiosDondeReemplazarTodasLasAparicionesDelAmp["objectDataDelCalendarGoogle"]['desde'] = "object data='http://1.blogger.gmodules.com/gadgets/ifr";
$SitiosDondeReemplazarTodasLasAparicionesDelAmp["objectDataDelCalendarGoogle"]['hasta'] = "/object>";



$SitiosDondeReemplazarElIframe;
$SitiosDondeReemplazarElIframe["iframeDelNavBar"] = "<iframe src=\"http://www.blogger.com/navbar.g?targetBlog";
$SitiosDondeCerrarEtiquetaMalCerrada["laDelParamQueGeneraAlMeterUnVideoPorElEditorDePost"]="<param name=";
$codigosAQuitar["elMarginWithDeLosIframes"]="marginwidth=\"0\"";
$codigosAQuitar["elMarginHeightDeLosIframes"]="marginheight=\"0\"";
$codigosAQuitar["elscrollingDeLosIframes"]="scrolling=\"no\"";
$codigosAQuitar["elTargetBlankDeLosLinks"]="target='_blank'";
$codigosAQuitar["elFrameBorderDelosIframes"]="frameborder=\"0\"";
$codigosAQuitar["elBorderDelasImagenes"]="border=\"0\"";

$etiquetasAPonerEnMinusculas[]="<A ";
$etiquetasAPonerEnMinusculas[]="<A>";
$etiquetasAPonerEnMinusculas[]="</A>";
$etiquetasAPonerEnMinusculas[]="<P>";
$etiquetasAPonerEnMinusculas[]="</P>";
$etiquetasAPonerEnMinusculas[]="HREF=";
$etiquetasAPonerEnMinusculas[]="REL=";
$etiquetasAPonerEnMinusculas[]="<BR>";
$etiquetasAPonerEnMinusculas[]="<BR/>";
$etiquetasAPonerEnMinusculas[]="<I>";
$etiquetasAPonerEnMinusculas[]="</I>";
$etiquetasAPonerEnMinusculas[]="<B>";
$etiquetasAPonerEnMinusculas[]="</B>";

?>

Etiquetas Blogger NO VALIDAS

Estas son la etiquetas que introduce blogger o alguno gadget que producen códigos no válidos :

La inclusión fuera de template de la nav-bar que tiene dos errores, el & y el objeto iframe

codigos del template que provocan marcado erróneo

data:post.addCommentUrl
data:post.editUrl
data:comment.url
data:comment.deleteUrl
data:renderingUrl (google calendar)
data:trackingUrl (google calendar)


crea un target="_blank"
<b:include name='quickedit'/>


crea etiquetas en mayúsculas
data:comment.body



codigos que crean un atributo id o name erroneo:
data:moduleId

Diario de un Validador

PROCESO PARA CONSEGUIR UN BLOGGER ACCESIBLE

Este artículo es una especie de diário de como se ha sacado toda la información para preparar los cheatsheet de un blog valido que aparecen en este mismo blog.


1.- suprimimos los gadgets que instala por defecto para evitar ruido en las validaciones
45 Errors, 30 warning(s)
error a solucionar:
Warning Line 17, Column 4: multiple comments in comment declaration .

-----------------------------------------------------

solucion aplicada:
borrar del html

13 Errors, 3 warning(s)
error a solucionar:
Warning Line 424, Column 127: cannot generate system identifier for general entity "zx" .
análisis del error:
se trata de la inclusión que supone la linea de nav-bar
códigos generados automáticamente:
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/widgets/3825235830-widget_css_bundle.css' /> <link rel="stylesheet" type="text/css" href="http://www.blogger.com/v-css/3727950723-blog_controls.css"/>
<link rel="stylesheet" type="text/css" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=673449746284806994&zx=df470120-433a-413c-90f3-93055f2279a4"/>
<style type="text/css">#navbar-iframe { display:block }
</style>
y tambien el iframe
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=673449746284806994&blogName=completamente+Valido+Est%C3%A1ndares&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLUE&layoutType=LAYOUTS&homepageUrl=http%3A%2F%2Fcompletamentevalido.blogspot.com%2F&searchRoot=http%3A%2F%2Fcompletamentevalido.blogspot.com%2Fsearch" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" title="Blogger Navigation and Search"></iframe>

Solución aplicada:
uso del script php que filtra la información y modifica el texto erroneo
texto erroneo:
a)
etBlogID=673449746284806994&zx=df470120-433a-4
sustituir por
etBlogID=673449746284806994&zx=df470120-433a-4
b)
<iframe src="http://www.blo
sustituir por
<object data="http://www.blo
c)
marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%"
sustituir por
entradas en los meta para una nueva hoja CSS , ponerlas debajo de las lineas
<head>
<b:include data='blog' name='all-head-content'/>

<link href='http://vecinos.urbanizacioncasasverdes.org/web2/css/navBarBlogger.css' rel='stylesheet' type='text/css'/>
texto de la hoja de estilos
#navbar-iframe
{
margin:0;
border:none;
height:30px;
width:100%;
}

This document was successfully checked as XHTML 1.0 Strict!

introducimos un post sencillo desde la solapa redactar y
5 Errors, 5 warning(s)
error tipo
<a class='comment-link' href='https://www.blogger.com/comment.g?blogID=673449746284806994&postID=6294255208796914339' onclick=''>0
comentarios</a>
solucion aplicadad:
filtrar para cambiar los amp de las etiquetas que empiezen por
<a class='comment-link' href='https://www.blogger.com/comment.g? -------------- generado por 'data:post.addCommentUrl'
y tambien el de
<a href='http://www.blogger.com/post-edit.g?blogID= -------------- generado por 'data:post.editUrl'

This document was successfully checked as XHTML 1.0 Strict!

en la vista de una sola noticia
crea una dl que en caso que no exista comentarios la deja como
<dl id='comments-block'>
</dl>
el correcto marcado de xhtml no permite comenzar una dl si no hay luego una dt o dd al menos
por lo tanto basta con añadir una <dt/> en la plantilla de forma condicional
poner en la plantilla despues de donde pone <dl id='comments-block'> meter

<b:if cond='data:post.numComments==0'>

<dt/>

de forma que si no hay comentarios en ese post mete una tag de dt/ para que se valido

luego este codigo
data:comment.url del template provoca un & mal codificado , lo pasamos por el php para que lo cambie
<a href='https://www.blogger.com/comment.g?blogID=673449746284806994&postID=5110113343461581414' onclick=''>Publicar un comentario en la entrada</a>


This document was successfully checked as XHTML 1.0 Strict!
ahora le ponemos un post con todo lo que permite el formulario
34 Errors, 5 warning(s)
esto es por que al introducir una imagen pone un border="0" que no se puede, ademas no te pregunta para que le pongas el alt a la imagen , dejando "" por defecto
29.jpg" alt="" id="BLOGGER_PHOTO_ID_5275122856462227410" border="0" /
esto lo genera a nivel de la plantilla la orden
<data:post.body/> que podia filtrarlo aunque lo mejor seria hacerlo en el formulario de creacion del post que se hace con scripts de java propios de google que se encuentran en blogger.com/v-app/scripts/ como por ejemplo este 3733652184-editor.js

la solución pasa por mandar un mensaje a google para que cambien el script que crea el código, podria mirarlo y buscarlo, lo dejo para mas adelante, mientras la solucion mia es que en el php de la pagina me quite todos los border="0" que se encuentren despues de una etiqueta <img y ademas poner un recordatorio al revisar el código al postear que diga que mires en las etiquetas img y que te carges el border="" poniendo class="imagenConBorde" o class="imagenSinBorde" lo que metemos como un stylo en la plantilla de forma
.imagenConBorde
{
border : 0,2 em;
}
.imagenSinBorde
{
border : 0;
}

problema:
cuando mete un blockquote el editor que tiene de javascript para los post, no mete despues que tipo de parrafo es asi que no es valido, falta meter despues del blockquote una <p> por lo menos, tambien tendria que preguntar por el cite="" en su caso
solucion:
pedir que cuando generen el código metan que ponga un <p> al abrir y un </p> al cerrar
solucion mia:
al editar el post ir al html y poner una <p> poner un recordatorio al editar
de forma que queda <blockquote><p>...........</p></blockquot>
poner un recordatorio para que ponga un cite="la fuente"
problema:
Error Line 477, Column 6301: end tag for "param" omitted, but OMITTAG NO was specified .
esto es que al introducir el codigo que genera la entrada de los videos no cierra bien el tag param
solucion: decirselo a los de editor de post para que camibien el script que genera el texto o a los responsable de meter el video con la linea
<object id="BLOG_video-1770bc270b86de1a" class="BLOG_video_class" contentid="1770bc270b86de1a" height="266" width="320"></object>
solucion mia:
filtrar por php que cuando encuentre un <param ponga una / antes del >
La inclusion de videos desde esta opcion genera muchos problemas lo mejor es usar otro proveedor de video e incrustar el video que te generen, vamos a probar distintos
se puede usar el de youtube, se quita todo lo de la etiqueta embed y se añade amp; detras de cada &, tambien se pone una linea para que ponga una imagen si no tienes el plugin y un mensaje de texto alt con esa imagen .
This document was successfully checked as XHTML 1.0 Strict!
ponemos un comentario con todo lo que nos permite
14 Errors, 3 warning(s)
problemas con el salto de linea <BR/>
esto lo genera en el template con data:comment.body que es lo que tienen que cambiar en blogger, yo lo que hago es meter ordenes de sustitucion a lowwercase de todo lo que encuentre <BR/>,<A>,</A>,<B>, <B>, <I>, <I>, <HREF>, <REL>.
tambien en el template vemos que existe una etiqueta
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
eso lo quitamos directamente del template (target='_blank')
quitamos otro de
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
tambien en estas lineas no pone alt
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
cambiarlas por
<img src='http://www.blogger.com/img/icon_delete13.gif'alt=''/>
la linea del template
<a expr:href='data:comment.deleteUrl'
produce una url con un & que hay que sustituir por un &
This document was successfully checked as XHTML 1.0 Strict!
meto el gadget de poder suscrivirse al blogger
32 Errors, 14 warning(s)
alt sin poner cambios template
1.- <img class='subscribe-dropdown-arrow' expr:src='data:arrowDropdownImg'/>
lo cambio en el template por
<img alt='' class='subscribe-dropdown-arrow' expr:src='data:arrowDropdownImg'/>
2.-<img expr:src='data:imagePathBase + "subscribe-google.png"'/>
lo cambiamos por
<img alt='' expr:src='data:imagePathBase + "subscribe-google.png"'/>
3.- <img expr:src='data:imagePathBase + "subscribe-bloglines.png"'/>
cambiar por
<img alt='' expr:src='data:imagePathBase + "subscribe-bloglines.png"'/>
y asi con todos los que salen hasta la etiqueta </b:widget>

border y aling cambios template
<img align='absmiddle' alt='' border='0' class='feed-icon' expr:src='data:feedIconImg'/>
lo borro en el template y le pongo classs imagenSinBorde y en lugar de align ponermos clase centradoVertical
<img alt='' class='feed-icon imagenSinborde centradoVertical' expr:src='data:feedIconImg'/>
añadimos en la zona de los estilos la clase
.centradovertical
{
vertical-align: middle;
}
y asi con todos los que salen hasta la etiqueta </b:widget>
target blank :cambios en el template
1.- <a class='feed-reader-link' expr:href='"http://www.google.com/ig/add?source=bstp&feedurl=" + data:feed.encodedUrl' target='_blank'>
quitamos el target y ponermos un rel='NuevaFuncionalidad' queda la linea
<a class='feed-reader-link' expr:href='"http://www.google.com/ig/add?source=bstp&feedurl=" + data:feed.encodedUrl' rel='NuevaFuncionalidad'>
2.- <a class='feed-reader-link' expr:href='"http://www.bloglines.com/sub/" + data:feed.url' target='_blank'>
lo mismo que en la anterior
<a class='feed-reader-link' expr:href='"http://www.bloglines.com/sub/" + data:feed.url' rel='NuevaFuncionalidad'/>
y asi con todos los que salen hasta la etiqueta </b:widget>
han puesto tambien un ul sin li asi que a cada elemento de tipo
<a class='feed-reader-link' expr:href='"http://www.google.com/ig/add?source=bstp&feedurl=" + data:feed.encodedUrl' rel='NuevaFuncionalidad'>
<img alt='' expr:src='data:imagePathBase + "subscribe-google.png"'/>
</a>
hay que ponerlo entre tag li quedando
<li><a class='feed-reader-link' expr:href='"http://www.google.com/ig/add?source=bstp&feedurl=" + data:feed.encodedUrl' rel='NuevaFuncionalidad'>
<img alt='' expr:src='data:imagePathBase + "subscribe-google.png"'/>
</a></li>
& mal construidas
este código del template 'data:post.editUrl' provoca url no validas por el tema del & lo meto en el php para que lo cambie
tambien en ese mismo código que

aqui tambien le quitamos el target y ponermos rel='Nuevafuncionalidad'
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>

lo mismo aqui
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
tambien en la linea <b:include name='quickedit'/> crea un atributo target= para el <a> que no es valido y que lo borramos por php

VOY POR AQUI
This document was successfully checked as XHTML 1.0 Strict!
metemos el gadget de enlaces:
sale 1 error de un target que lo saca el código del template
<b:include name='quickedit'/>
se puede quitar simplemente y cuando quieras editar algo entras por el escritorio o bien
pedir a google que cambien el código que genera esta orden y quiten lo de target='configLabel1'
lo añado al php para que lo elimine pues no se pierden funcionalidades
This document was successfully checked as XHTML 1.0 Strict!
ahora ponemos el google calendar este (http://hosting.gmodules.com/ig/gadgets/file/116287936210312120217/calendar-for-your-site.xml es el original de google)
66 Errors, 88 warning(s)
en el template en la parte que hay a partir de <b:widget id='Gadget1' locked='false' title='Google Calendar' type='Gadget'>
cambiamos iframes por objects , y src por data
ponermos alt="" en la img que hay
91 Errors, 88 warning(s)
meto el codigo del object para que el programa cambie sus amp que ha creado otra vez la orden 'data:renderingUrl'
borro el frameborder="0"
meto el código para que me cambie la imagen que sale del google calendar en el php creada por el código del template 'data:trackingUrl'
el código del template 'data:moduleId' usado en este gadget para producir la id y el name del object da un número, y los id deben empezar por letra
lo cambiamos por
id='"module"+data:moduleId' expr:name='"module"+data:moduleId'
otro atributo target='configGadget1' mal por el código del quikedit,
lo pong en el código php para que lo elimine
a partir de ahora se eliminan todos los target='config____'
This document was successfully checked as XHTML 1.0 Strict!
ponemos el del icio us tag roll de http://delicious.com/help/tagrolls
cambiamos la config que queramos y luego en el código que nos pone para copiar le cambiamos las amp que sea necesario
This document was successfully checked as XHTML 1.0 Strict!
instalamos el gadget de seguidores
me registro yo mismo como seguidor
2 Errors
quito esto
expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth'
lo que hacemos es quitar el evento onload, dejando que se carge directamente , y ademas quitamos el evento onerror por que si no hay imagen se cargará el alt de todas formas, quedando
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:src='data:follower.imageUrl' expr:width='data:follower.imageWidth'/>
PENDIENTE : vamos a ponerle un div que con javascript ocultamos mediante display:none y cuando la carga de la pagina ha acabado le pongo display : true
This document was successfully checked as XHTML 1.0 Strict!
meto mi perfil
This document was successfully checked as XHTML 1.0 Strict!
añado mi lista de blogs
1 Error
un border en el template que hay que borrar
This document was successfully checked as XHTML 1.0 Strict!
ahora meto elementos compartidos del google reader
añadido mediante el codigo que se genera en el google reader en elementos compartidos , pinchando en Añade un clip a tu sitio web o blog.
ponemos un amp que no estaba
This document was successfully checked as XHTML 1.0 Strict!












contenido de los avisos de edicion en formulario:
si introduces una imagen
luego ve a html busca el texto <img y
rellena el atributo alt="" que veras con la descripción de tu imagen si no es puramente decorativa, en el caso que la descripción sea mas de 255 caracteres pon un atriburo longdesc="direccion url del texto que quieres que sea la explicación, puedes poner el de wikipedia si te vale"
borra el atributo llamado border="lo que ponga" en su lugar introduce al lado de <img el siguiente cógigo class="imagenSinBorde" o class"imagenConBorde" según te convenga
Si has usado el boton de las Comillas, deberas saber que es para citar a alguien o algo, por lo tanto ve al código html
busca <blockquote>
en esa linea primero deberas introduci justo despues una etiqueta <p> para que valide , y otra </p> antes de </blockquote>
justo despues de <blockquote antes de cerrar con el > debes introducir src="aqui la url de lo que estas citando en su caso" esto encaso que conozcas la fuente de la cita
Si has usado la introduccion de videos
recuerda editar el html y borrar el contenido de la etiqueta embed, tambien introducir una imagen alternativa si no tienen el lector y todo eso

el & se pone en hexa & para las veces que en el template no lo reconoce

pendiente: que el php repase el texto y te aparezca un modal por cada alt="" y por cada blockquote sin cite=""





martes, 2 de diciembre de 2008

entrada con todas las funcionalidaddes

Mis dos hijos haciendo el ..NIÑO
Dos niños disfrazados uno de lobezno y otro de hombre de hierro
Esta entrada intenta incluir todas las funcionalidades que tiene el formulario por defecto de entrada del blogger para noticias
empezamos cambiando de fuente
este texto esta escrito en fuente por defecto
este texto esta escrito en fuente por arial
este texto esta escrito en fuente por courier
este texto esta escrito en fuente por georgia pero parece que no funciona y lo deja en arial
este texto esta escrito en fuente por lucida grande este texto esta escrito en fuente por arial
este texto esta escrito en fuente por times pero parece que no funciona
este texto esta escrito en fuente por trebuchet
este texto esta escrito en fuente por verdana pero parece que no funciona
este texto esta escrito en fuente por Webding
ahora usaremos los tamaños de letra
este texto está escrito en el mas pequeño
este texto esta escrito en el pequeño
este texto está escrito en el normal
este texto esta escrito en el grande
este texto está escrito en el mas grande
ahora probamos negrita, cursiva, cursiva y negrita ,cambiamos el texto a
verde, azul, rojo , amarillo, violeta
ahora ponemos un enlace a ningun sitio
ahora justificado central
justificado a la izquierda
justificar el texto a ambos lados a la vez pero el texto debe llenar una linea entera por eso estoy soltando este rollo macaveo
ahora una lista ordenada marcando los puntos con números:
  1. punto primero
  2. punto segundo
  3. no se puede poner subpuntos
ahora una lista desordenada:
  • primer punto de la lista desordenada
  • segundo punto de la lista desordenada
ahora un

entrecomillado
pero no se como dejar que este entrecomillado


vale es dandole una flecha a delante de mas, ahora vamos a probar un entrecomillado sin datos






veamos a ver si casca con eso
ahora introduciremos una imagen


ahora intentamos subir un video de youtube directamente copiandolo aqui

lunes, 1 de diciembre de 2008

Primera noticia

Estoy redactando una noticia con el editor que viene por defecto sin usar ninguna de las utilidades para formatear el código la solapa redactar