Quiero que le diga cómo se llegó a la antipixel BlogBabel , utiliza técnicas de programación y la valiosa contribución, directa e indirecta, de las que Blogger, que ha hecho todo esto muy divertido! 
Me di cuenta de la antipixel BlogBabel en la versión de la imagen! Gracias a uno de los servicios ofrecidos por tools.blogflux.com ahora puede mostrar su rango BlogBabel en formato GIF. El código que se utiliza es la siguiente:
1 2 3 | <-! Iniciar Rango BlogBabel -> <-! Ranking Final BlogBabel -> |
Como siempre sustituida por [blog] el código. Esta versión no requiere de Flash! Sin embargo, permite la visualización de fondo rojo o verde en función de la mejora de su rango. Obviamente, el menú contextual no está disponible como en la versión de Flash Player. La elección es suya y todo lo bueno antipixel
Para resolver la activación y el control de Internet Explorer para mejorar la validación de W3C han cambiado - y lo hizo más fácil - la instalación dell'antipixel BlogBabel Rank. El nuevo código se utiliza:
1 2 3 | <-! Iniciar Rango BlogBabel -> <-! Ranking Final BlogBabel -> |
Reemplace [blog] con las métricas de código habituales previstos en BlogBabel .
Uso de prototype.js y Scriptaculous aquí es cómo llevar a cabo la tira simple ficha de un sitio Web En esta versión el sujeto no es el TabStrip, pero su funcionamiento. La característica esencial de este script se encuentra en la sencillez de uso y capacidad de mantener una página accesible, incluso cuando JavaScript no está habilitado. En la práctica, incluso se puede añadir páginas a esta técnica ya se han completado y que respeten el mínimo de la sintaxis HTML se muestra a continuación.
Para mantener la accesibilidad en el caso de HTML Javascript desactivado así que vamos a empezar desde el caso estándar, es decir, cuando se inserta el ancla dentro de una página, en el formato:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < ul > = "#tbs1" > Link 1 < / a >< / li > < a > < un href = "# Tbs1"> Enlace 1 </ un > </ viaje > = "#tbs2" > Link 2 < / a >< / li > < a > < un href = "# tbs2"> Enlace 2 </ un > </ viaje > = "#tbs3" > Link 3 < / a >< / li > < a > < un href = "# tbs3"> Enlace 3 </ un > </ viaje > </ ul > "tbs1" >< / a > < en el name = "Tbs1"> </ un > < div > p > < p > Contenido # 1 </ p > </ div > "tbs2" >< / a > < un name = "tbs2"> </ un > < div > p > < p > Contenido # 2 </ p > </ div > "tbs3" >< / a > < un name = "tbs3"> </ un > < div > p > < p > Contenido # 3 </ p > </ div > |
El código HTML anterior funciona, ya que no absolutamente hacer uso de Javascript! Ahora en nuestro código discreto:
1 2 3 4 5 6 7 8 9 10 11 12 13 | window , 'load' , function ( ) { Evento. Observar (ventana, 'load', function () { ) . each ( function ( element ) { $ $ ('A [href ^ = #]: No ([href = #])') Cada uno (función (elemento) {. 'click' , function ( event ) { elemento. observar ('click', function (evento) { ) . each ( function ( element ) { element. next ( ) . style . display = "none" } ) $ $ ('A [nombre])'). Cada elemento de la pantalla {. Siguiente (). Estilo. = "None"} (function (elemento)) 'a[name="' + this . hash . substr ( 1 ) + '"]' ; var c = 'a [name = "' + este hash substr (1) +. '".]'; . each ( function ( element ) { new Effect. Appear ( element. next ( ) ) } ) ; $ $ (C) Cada (function (elemento) {Efecto nueva comparecencia (element. siguiente ()).}).; event ) ; } . bindAsEventListener ( element ) ) . Evento Stop (evento);.} BindAsEventListener (elemento)) }) 0 ; var i = 0; ) . each ( function ( element ) { if ( i > 0 ) element. next ( ) . style . display = "none" ; else i ++; } . $ $ ('A [nombre])') Cada uno (función (elemento) {... Elemento if (i> 0) Siguiente () estilo de visualización = "none"; otra i + +;} ); } ); |
Este código - en nuestro lugar - no sólo transforma nuestra TabStrip en una lista con viñetas, pero gracias a Scriptaculous , sino que también añade un agradable efecto de fundido al pasar de un enlace a otra pestaña.
Para producir realmente cautivadora TabStrip no es una técnica que permite especialmente adecuado para mediar en los problemas entre los gráficos y el código Javascript. Veamos en primer lugar, cómo construir un templete en Photoshop para nuestro TabStrip:
Después de fijar el Undolog gráficos y de realizar los toques finales a algunos de los títulos (ver recuadro), he disfrutado con los acoplados prototype.js y Scriptaculous , de una manera no intrusiva (discreto)! Aquí hay un video (pero se puede probar por ti mismo aquí ) Con la característica interesante que he añadido a la barra lateral Undolog, que no sólo que sea más agradable Espero que lo hace aún más funcional!
El código que he utilizado es muy sencillo:
1 2 3 4 5 6 7 8 9 | window , 'load' , function ( ) { Evento. Observar (ventana, 'load', function () { ) . each ( function ( element ) { element. style . cursor = "pointer" ; $ $ ('H2.dropdown') Cada uno (función (elemento) {elemento de estilo del cursor = "puntero"...; 'click' , function ( event ) { elemento. observar ('click', function (evento) { this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. siguiente () el estilo de visualización == "") Efecto nueva BlindUp (this. next (), {duration: 0.5});. Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Efecto otra nueva BlindDown (this. next (), {duration: 0.3}).; event ) ; . Evento Stop (evento); ( element ) ) }. BindAsEventListener (elemento)) }) }) |
También tenga en cuenta que la primera vez que cargue la página de inicio se cierra automáticamente el panel de categorías Undolog - identificado por ID tit_category :
1 | window , 'load' , function ( ) { new Effect. BlindUp ( $ ( "tit_category" ) . next ( ) , { duration : .5 } ) } ) . Evento Observar (ventana, 'load', function () {nuevo efecto BlindUp ($ ("tit_category") Siguiente (), {duration:.. 0,5})}) |
Los títulos en la barra lateral se definen, pues, de esta manera:
1 2 3 4 |
da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato… A través de la clase dropdown identifica los títulos de H2 para hacer dinámicas, gracias a la doble de dólares ($ $) de prototype.js - ya hemos hablado de ...
Yo afirmo que estamos hablando de WordPress 2.0.6. Si se intenta establecer las categorías de "combo" - desplegable - atento a los síntomas propuestos en el sitio de WordPress . Cuando la construcción de un formulario HTML con un botón Submit debe tener cuidado de no poner el nombre de la etiqueta INPUT sólo para "enviar", vale la pena arruinar todo lo que tratando de submittare el formulario a través de Javascript.
En el sitio de WordPress se propone el siguiente código:
1 2 3 4 5 6 | <li id="categories"> 'Categories:' ) ; ?> <Php _e ('Categorías');?> <li> $PHP_SELF ?> " method="get"> <?php dropdown_cats ( ) ; ?> <input type="submit" name="submit" value="view" /> </form> <Form action = "? <Php echo $ PHP_SELF>" method = "get"> <Php dropdown_cats ();?> <input Type="submit" name="submit" value="view" /> </ form> </ Li> </ ul> </ Li> |
Tenga en cuenta que el botón de envío tiene el nombre del atributo en "enviar". Si un intento para la ejecución de código Javascript como esto:
1 | . submit ( ) ; ... documento forma nomeform submit (); |
El intérprete se confunde, ya que no distingue el método submit () elemento de "enviar", que es un botón! La solución es simple: Llame el botón que quieras, pero no en "enviar"!
El código que utiliza para ver las categorías en el modo de menú desplegable que es el siguiente:
1 2 3 4 5 | <div id="cmb_months"> <form name="xcats" id="xcats" action="/index.php" method="get"> ; ?> <Php dropdown_cats ();?> </ Form> </ Div> |
También tuve que modificar el núcleo de WordPress (que no se debe hacer ...). En el archivo "plantilla de las funciones-category.php" modificado que los dropdown_cats function () en la preparación de la etiqueta SELECT que agregó:
1 | onchange = "document.forms ['xcats'] submit ();". |
Aquí está el pedazo de código para realizar un seguimiento de:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $wpdb -> get_results ( $query ) ; Categorías = $ $ wpdb -> get_results ($ consulta); . " \n " ; "<select name="cat" class="postform" onchange="document.forms[\'xcats\'].submit();">" echo "\ n".; intval ( $optionall ) == 1 ) { if ( intval ($ optionall) == 1) { apply_filters ( 'list_cats' , $all ) ; Todo = $ apply_filters ('list_cats', $ todo); <option value='0'>Seleziona una Categoria</option> \n " ; echo "\ t <option value='0'> Seleccione una Categoría </ option> \ n"; } intval ( $optionnone ) == 1 ) if ( intval ($ optionnone) == 1) <option value='-1'>" . __ ( 'None' ) . "</option> \n " ; . echo "\ t <option value='-1'>" __ ('Ninguno') "</ option> \ n".; $categories ) { if ($ categorías) { $categories as $category ) { foreach ($ $ categorías categoría) { apply_filters ( 'list_cats' , $category -> cat_name , $category ) ; Apply_filters cat_name = $ ('list_cats', $ categoría -> cat_name, $ categoría); <option value= \" " . $category -> cat_ID . " \" " ; echo "\ t <option value= \"". $category -> cat_id." \ ""; $category -> cat_ID == $selected ) if ($ categoría -> cat_id == $ seleccionado) ; echo 'selected = "selected"'; ; echo '>'; ; echo $ cat_name; intval ( $optioncount ) == 1 ) if ( intval ($ optioncount) == 1) . $category -> cat_count . ')' ; echo '('. $ categoría -> cat_count. ')'; intval ( $optiondates ) == 1 ) if ( intval ($ optiondates) == 1) . $category -> lastday . '/' . $category -> lastmonth ; ..''. echo $ category -> lastday '/' $ categoría -> lastmonth; " ; echo "</ option> \ n"; } } " ; echo "</ select> \ n"; |
Una de las cosas que hace la función se ajusta el combo de la categoría que escogió cuando se vuelva a cargar la página ... cuando tengo tiempo me veo mejor.
Como es sabido por todos, en aras de la exhaustividad, cabe señalar que se debe actuar con un código no intrusivo (discreto) en lugar de entrar en el onchange directamente en la construcción del combo. Por otra parte, las categorías que aparecen en el combo no son accesibles para navegadores con JavaScript desactivado. Sin embargo, esto puede ser resuelto mediante el uso de la etiqueta NOSCRIPT en la barra lateral y ver las categorías como una lista de enlaces - el modo por defecto de WordPress - ajustes que pronto se .
La inserción de objetos (sobre todo los objetos de Flash) en las páginas web se ha convertido en una estresante a menudo últimamente. En otros mensajes que ya han abordado el tema de la forma de detectar Flash y páginas insertadas adecuadamente. Como ya comentamos técnicas discreto, marcamos dos conocidos script puede detectar (y, eventualmente, instalar) e insertar objetos Flash en una página, de una manera muy discreta y afficiente: SWFObject y UFO .
Ambos scripts tienen esencialmente las mismas características y funcionamiento idénticos. El enfoque consiste en sustituirla por una cierta necesidad de activar la etiqueta con el contenido Flash. Como sabemos, este procedimiento elimina el problema de la activación del objeto Flash impuesto por Internet Explorer, sin embargo, implica que esté activado Javascript en el navegador de destino.
Ambas secuencias de comandos no utiliza ninguna bibliotecas externa como prototype.js , por ejemplo. La diferencia más importante entre los dos es que SWFObject se llama cuando el TAG que ser reemplazado ya está cargado en la página, no exactamente como discreto. He aquí un extracto de código que muestra la secuencia de llamada:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | "flashcontent" > < div id = "flashcontent"> strong > < fuerte > Necesitas actualizar tu Flash Player </ fuerte > Esto se sustituye por el contenido de Flash. Coloque el contenido alternativo aquí y los usuarios sin el plugin de Flash o con Javascript apagado puede llegar a ver esto. > noscript < / code > Este contenido le permite dejar de lado < código de línea = "true"> NoScript </ código > etiquetas. "swfobject.html?detectflash=false" > bypass the detection < / a > if you wish. Incluya un enlace a < un href = "swfobject.html? detectflash = false"> pasar por alto la detección </ un > si lo desea. </ div > "text/javascript" > < script de type = "text / javascript"> / / <! [CDATA [ , "sotester" , "300" , "300" , "9" , "#FF6600" ) ; var = new SWFObject para ("so_tester.swf", "sotester", "300", "300", "9", "# FF6600"); ) ; // this line is optional, but this example uses the variable and displays this text inside the flash movie so.addVariable ("flashVarText", "esto se pasa a través de FlashVars por ejemplo, sólo") / / esta línea es opcional, pero este ejemplo se utiliza la variable y muestra este texto dentro de la película flash ; so.write ("flashcontent"); / /]]> </ script de > |
UFO , sin embargo, permite un'approccio mucho más en línea con el guión discreto clásico. La sustitución de la etiqueta está en modo transparente, sin secuencias de carga abbligare, como se muestra en el ejemplo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < cabeza > title > < título > discretos objetos Flash (OVNI) | Página de ejemplo </ title > "Content-Type" content = "text/html; charset=iso-8859-1" / > < meta http-equiv = "Content-Type" content = "text / html; charset = ISO-8859-1" /> "text/javascript" src = "ufo.js" >< / script > < script de type = "text / javascript" src = "ufo.js"> </ script de > "text/javascript" > < script de type = "text / javascript"> var FO = {película: "test8.swf", ancho: "300", la altura: "120", MajorVersion: "12", construcción: "0", XI: "true"}; UFO.create (FO, "ufoDemo"); </ script de > </ cabeza > < cuerpo > "ufoDemo" > < div id = "ufoDemo"> p > < p > Reemplazo de contenido </ p > "border: none;" / >< / a >< / p > Macromedia Flash Player "style =" border: none; "/> </ un > </ p > </ div > </ cuerpo > |
En el código fuente del script de ovnis , de hecho, usted puede usar inmediatamente - más apropiado - un evento que atenta para cargar totalmente la página antes de la sustitución es, el enfoque por lo tanto, mucho más apropiado a la escritura no intrusiva.
Entre las diversas bibliotecas-o conjunto de bibliotecas (marco real), dedicados a Ajax, HTML y Web 2.0 Extensión de la interfaz que he visto, Ext. es sin duda digno de mención. El sitio web y la documentación están bien hecho y organizado, también la demostración de que no se puede perder. La interfaz gráfica de usuario, compatibilidad con Prototype y Scriptaculous y impletazione de Utilidades de Yahoo, lo convierten en un sistema interesante, por lo menos! Tenga cuidado sin embargo de la licencia! A pesar de que se presente como de código abierto y gratuito para uso personal, requiere una cuota para mejorar el uso y cuidado. Este último, de hecho, nunca debe ser subestimada en el marco de una cierta complejidad.
Para obtener la documentación y la demostración , haga clic aquí .
En particular, menciona este sistema, todavía estoy analizando en detalle, ya que se ha utilizado para crear lector de alimento fresco , una de las aplicaciones de ejemplo que con el lanzamiento de Adobe Apollo Alpha (ver Adobe Apollo Alpha Release ). fresco, por lo tanto, es un ejemplo de dos de Apolo, lo que demuestra su capacidad de usar HTML y Javascript, como máximo. Fresco, de hecho, no es un puro Apolo, sino que utiliza el marco Ext. - y JavaScript y HTML - Apolo en el motor! Gran!
Aquí es una herramienta nueva e interesante para la compresión y el oscurecimiento de código Javascript (véase también ingeniería inversa: los compresores de código ).
En el sitio web de Dean Edwards también se puede descargar el código fuente de este Javascript compresor. Además, el autor ha puesto a disposición de las versiones de servidor de Microsoft. NET Framework versión 1.1, Perl, PHP 5 y WHS.
En línea es una versión de trabajo disponibles para tratar de inmediato , menos complejo - para ser honesto - una que presentó recientemente . El hecho permite comprimir el código con sólo dos opciones: la Base62 codificar, lo que oscurece el código y las variables Shrink, las variables del optimizador.
En comparación con la versión anterior se han corregido algunos errores que, en situaciones de extrema truco (y muy interesante) como:
1 | /*@cc_on!@*/ false ; isMSIE var = / * @ * @ cc_on / falso!; |
no cumplió con la salida generada. Ahora, tanto el apoyo adecuado comentarios condicionales para Microsoft, tanto en el + / - en condiciones tales como:
1 | b ; c = a + + + b; |
Como se indica en la página de ayuda , sin embargo:
En caso de secuencias de comandos de pic nic éxito descomprimir en todos los navegadores soporta JavaScript Eso. Sólo la funcionalidad básica de JavaScript se utiliza para decodificar la secuencia de comandos de empaquetado.
Algunos navegadores no sea compatible con la propia empacadora. La Interfaz Web requiere soporte de Sun. Navegadores antiguos se mostrará la interfaz con discapacidad.
Así, la atención al usuario final y el tipo de soporte de los navegadores ... como siempre!
Últimos Comentarios
Gabriel : Hola, interesante artículo. Yo necesito algo similar pero con algunos cambios. En una ...
sebastian : Gran proporción - ¡gracias!
Asunto : muy útiles por cierto! Lo he probado y es justo lo que necesitaba. Ahora me pregunto ¿cómo puedo obtener ...
Vik : Con la ayuda estratégica!
Pimienta : Hola, no sé si usted es uno de los creadores del plugin WP Bannerize. He visto un ...