CSS Compressor como su nombre indica es un compresor de CSS, resulta útil si queremos que los estilos de nuestra plantilla no se hagan interminables, por lo que he comprobado no altera ni suprime ninguna propiedad pero sobra decir que el vista previa hay que usarlo tantas veces sea necesario.
Vas a Inicio / Ejecutar, escribes el comando y haces clic en Aceptar
Observación:
Algunos de estos comandos pueden ser peligrosos (por ejemplo SYSKEY) y pueden ocasionar problemas que pueden requerir el formateo del disco.
Otros comando no son ejecutados por Windows XP o versiones anteriores, no han sido probados todos. Los contribuidores son libres de hacer las correcciones necesarias.
Bajo Vista “Ejecutar” no aparece por defecto en el menú “Inicio”. Para hacerlo visible, ver este truco
Vosotros podéis añadir también vuestro propio comando, ver este truco
Holaaa... como ya les había dicho anteriormente el sorteo de plantillas es una realidad, y esta es la primera de muchas más, en esta ocasión se pueden llevar la plantilla Metamorfosis edición Nocturna .
¿qué tienes que hacer para tenerla? solo vas a comentar que la quieres y darás una descripción del blog en el cual quieres usarla, esta también es una manera de darle difusión a tu blog, así que hechanos tu rollo, deja tu link (opcional) y luego te envío las instrucciones para que puedas bajarla o bien el código de esta, para que lo pegues en la edición HTML de tu plantilla.
Requisitos:
Tener un mínimo de 5 posts en tu blog (que conste que le baje eh, eran 10)
Estar suscrito a mi Blog.
Así que si te interesa esta es tu oportunidad para llevártela.
Hasta pronto y que tengas un excelente fin de semana.
La mayoría de las plantillas tienen el número de comentarios y su enlace en la parte del footer del post, es decir, al final de la entrada, pero igual podemos ponerlo arriba de la entrada encima de un icono para que sea más visible y atractivo para los lectores.
La modificación es sencilla, sólo entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:
Y listo, tendrás el número de comentarios arriba de la entrada. Por supuesto puedes cambiar el icono por otro, sólo cambia lo que está en color rojo por la URL de tu icono. Si cambias el icono deberás cambiar donde dice width (ancho) y height (alto) por las medidas del nuevo que has puesto. El tamaño de los números se cambia donde dice font-size:24px; y la posición de los mismos en donde dice padding:5px 7px 0 5px;
ACTUALIZACIÓN (02/06/2010)
El ícono con el número de comentarios también aparecerá en las Páginas estáticas, se deseas que no aparezca ahí entonces encierra el código anterior así:
De ese modo sólo aparecerá en las entradas pero no se mostrará en las Páginas estáticas.
ACTUALIZACIÓN (08/06/2011) En las plantillas hechas con el Diseñador de Plantillas de Blogger se debe quitar el float:right; del código, eso lo pondrá del lado izquierdo y quizá no se vea muy estético, pero si no se hace entonces el enlace a los comentarios no funciona.
Cada blog tiene algunos post que tienen un mayor número de visitas que otras entradas, lo que se refleja muchas veces en una mayor cantidad de comentarios. Hoy veremos cómo agregar un gadget que ayudará a nuestros lectores a tener presente las entradas más populares de nuestro blog.
Este gadget es sencillo de implementar siguiedo los siguientes pasos:
1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget y HTML/Javascript.
Deberemos de sustituir http://TUBLOG.blogspot.com/ por la URL de nuestro blog. Damos click a Guardar.
3.§ En el código podemos modificar lo siguiente: » aBold = true; si no queremos que los títulos estén en negrita podemos cambiar true por false. » numposts=200; es el número de post de donde se saca el promedio de post populares; si tenemos más de 200 post deberemos cambiar este número. » maxshowresult=10; es el número de post que se mostrarán en el gadget; podemos aumentarlo o disminuirlo.
4.§ También podemos agregar algunos estilos al gadget. Para ello vamos a Diseño - Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin> y encima de éste pegaremos lo siguiente:
#Popular { /*Estilos para el contenedor */ } #Popular ul { /*Estilos para la lista de links */ } #Popular li { /*Estilos para cada link de la lista */ } #Popular a { /*Estilos para los links */ } #Popular a:hover { /*Estilos para los links cuando pasamos el mouse encima*/ }
Dentro de las llaves {} escribiremos el estilo que querramos darle a nuestros enlaces del gadget y damos click a Guardar.
Hace unos días en la entrada sobre el editor HTML online puse un menú de ejemplo y si bien instalarlo es fácil para la mayoría, otros me han preguntado cómo ponerlo en el blog. Y bueno, además de esto se me ocurrió que el menú tuviera un mensaje en marquesina para que pudieran anunciar algo, dar la bienvenida o promocionar una entrada.
ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.
Para ponerlo en tu blog entra en Diseño > Edición de HTML y pega antes de ]]></b:skin> lo siguiente:
#menu-title { padding:5px; background:#333; /* Color de fondo de la marquesina */ border-bottom:1px solid #fff; } #menu-title h3 { padding:0; margin:0; color:#ccc; /* Color de texto de la marquesina */ font-family:Verdana, serif; font-weight:bold; font-size:130%; /* Tamaño de la letra de la marquesina */ } #nav { float:left; width:100%; margin:0; padding:0; list-style:none; background:#ccc; /* Color de fondo del menú */ border-bottom:1px solid #999; } #nav li{float:left; margin:0; padding:0;} #nav a { float:left; display:block; padding:6px 30px 6px 5px; text-decoration:none; font-family:Verdana, serif; font-weight:bold; font-size:90%; /* Tamaño del texto del menú */ color:#666; /* Color del texto del menú */ /* Color de fondo del menú */ background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieiV6HTl_I07RvDuLit7J4igNtIj5Ga0uGaYcD_Tg60XaetLuEXgqv2TfMX2Wg-UGuhg_maGnWZ_Q3eznn-pkzBsM3JUDzqFL87NJzMnccXep5ysRUie02sF5cZUxw8p9m2HBrgVdNdcE/s400/nav_slant.gif)no-repeat top right; } #nav #nav-1 a {padding-left:20px;} #nav a:hover {color:#000;}
Ahora después de <body> pega lo siguiente:
<div id="menu-title"> <h3><marquee behavior="alternate">Aquí va el mensaje</marquee></h3> </div> <ul id="nav"> <li id="nav-1"><a href="URL del enlace">Inicio</a></li> <li><a href="URL del enlace">Directorio</a></li> <li><a href="URL del enlace">Contacto</a></li> <li><a href="URL del enlace">Acerca de</a></li> </ul><div class='clear'/>
Eso hará que el menú quede arriba de la cabecera, si lo deseas debajo de la cabecera o en otro lugar entonces entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y pega ahí el contenido, ya después arrastra el elemento donde quieras.
Ya sabes que, lo que está en color rojo hay que remplazarlo por el mensaje de bienvenida y por las URL de los enlaces correspondientes. Para personalizar los colores y texto cambia las partes que están en color verde.
Seguro que más de una vez te ha ocurrido lo siguiente: intentas eliminar un fichero y recibes un mensaje de error diciendo que dicho archivo ya está en uso, o que no tienes permisos de acceso... En resumen: no puedes borrarlo.
Ahora cuentas con un aliado, se llama Unlocker y es un sencillo programa capaz de detectar qué aplicaciones y procesos tienen bloqueado tu archivo. Unlocker puede cerrar estos procesos, o desvincularlos de tu archivo, de modo que lo puedas borrar. No es infalible, pero sí de gran ayuda.
No tienes más que hacer clic derecho sobre el fichero en cuestión, elegir la opción “Unlocker” y liberar el fichero. ¡Listo!
Este sencillo generador de botones está creado por CSS-Tricks la forma de utilizarlo es muy sencilla, en el panel de la derecha vamos escogiendo los distintos colores y tamaño para el botón. A la izquierda veremos los cambios que vamos realizando. Marcaremos sobre el botón una vez lo tenemos listo y nos proporciona el código para añadir en la plantilla.
Añadiremos ese código justo antes de ]]></b:skin> guardamos los cambios y nos situamos justo donde deseamos mostrarlo añadiendo:
<a class="button" href="#">texto-link</a>
En href="#" sustituimos la almohadilla por la url que vamos a enlazar. El texto lo añadimos sustituyendo "texto-link" por nuestro texto.
El tren nunca se detiene en la estación pero los pasajeros desembarcan en ella. Una innovación china: Cómo subir y bajar de un tren bala sin que éste se detenga.
No se pierde tiempo. El tren bala está en continuo movimiento. Si hay 30 estaciones entre Beijing y Guangzhou, sólo para detenerse y volver a arrancar en cada estación se pierde tiempo y energía.
Una simple parada de 5 minutos por estación (a los pasajeros ancianos no se los puede apurar) resultará en una pérdida total de 5 minutos x 30 estaciones , o sea, 2 horas y media del total del viaje!
Los chinos han sido lo bastante creativos para desarrollar un concepto de tren sin parar. Cuando el tren llega a la estación no se detendrá para nada. Los pasajeros en esa estación se habrán embarcado en una cabina conectora mucho antes de que el tren siquiera llegue a esa estación.
Cuando el tren llegue a la estación no se detendrá en lo absoluto. Sólo disminuirá su velocidad para recoger la cabina conectora que se estará moviendo con el tren sobre el techo del mismo.
Mientras el tren aún se está alejando de la estación, los pasajeros lo abordarán desde la cabina conectora montada en el techo del tren. Después de haber descargado a todos sus pasajeros la cabina conectora se moverá hacia la parte trasera del tren de modo que el siguiente grupo de pasajeros que quieren bajar en la próxima estación se embarcarán en ella, en la parte trasera del tren.
Cuando el tren llega a la siguiente estación simplemente descarga por completo la cabina conectora y la deja atrás en la misma estación. Los pasajeros que desembarcan allí, lo hacen sin prisa, mientras el tren ya se está alejando. Al mismo tiempo el tren estará recogiendo, en la parte delantera de su techo, otra cabina conectora, donde estarán los pasajeros que querían embarcar en esa estación.
De modo tal que el tren siempre dejará una cabina conectora de la parte trasera de su techo y recogerá, de la parte delantera de su techo, una nueva cabina conectora, en cada estación.
Hola, por fin ya estoy aquí escribiendo para todos ustedes y con muchas ganas de compartir, después de estar inactiva en mi blog por varios días, debido a algunos asuntos personales que me tenían muy atareada.
Hoy veremos que es el RSS, me lo han preguntado algunos usuarios y considero también que es importante que lo sepan todas las personas que navegan por la red, ya que es una herramienta disponible que te puede ayudar enormemente a ti como administrador de un blog a afianzar más lectores, y a ti como usuario para mantenerte actualizado con el contenido de un sitio o página web que te interese.
Y que mejor que mostrar este video que encontré en Youtube como una forma introductoria:
Puntos importantes sobre RSS:
-Como pueden ver, gracias a RSS, podemos mantenernos informados sobre el contenido y recibir todas lasactualizaciones de un sitio o página web, para ello es necesario suscribirnos a dicho sitio, y para conseguir esto, es necesario hacer click en el ícono de RSS de el blog o página web y seleccionar la opción de suscripción de tu preferencia.
-También como se mostró en el video, este ícono puede venir en diferentes presentaciones, esto debido a que algunos administradores de páginas o blogs lo adaptan al diseño de su plantilla, pero finalmente es lo mismo.
-Muchas de las páginas web o blogs que facilitan esta herramienta, lo administran a través de Feedburner, quien es un servidor que te permite administrar tu feed, conocer estadísticas de cuantas personas visitan una entrada de tu blog, entre otras características muy útiles.
-Necesitas elegir un lector o agregador para poder leer el contenido de los blogs o sitios web a los que te suscribas, por ejemplo:
-Algunos sitios web, también incluyen los botones de dichos lectores para que puedas suscribirte, y es ahí donde podrás ver la información actualizada de todos los sitios a los que te has suscrito.
-Otra forma de leer el contenido de un sitio, es elegir la opción de suscribirse, recibiendo las actualizacionesn por medio del correo electrónico (e-mail), en lo personal es mi favorita, ya que el correo electrónico lo reviso regularmente, y puedo estar al tanto de las actualizaciones de los sitios a lo que me he suscrito.
-Algunos sitios tienen una sección en su blog, donde tu simplemente necesitas escribir tu correo electrónico y suscribirte, claro que tendrás que confirmar dicha suscripción en tu bandeja de correo, para poder activar tu suscripción y luego recibirás todas las actualizaciones ahí.
Conclusiones:
Si tienes un blog de Blogger u otro servidor sería bueno que contemplaras añadir esta opción a tu blog, ya que de este modo podrás tener lectores fieles que verán tu contenido; en lo personal es muy motivante saber que hay personas que les interesa saber sobre el contenido de mi blog, y que de alguna forma corresponden al trabajo que haces en blog.
Como puedes ver, Suscribirse a un sitio web o blog es muy fácil y útil para poder estar siempre actualizado con el contenido que a ti te interesa seguir.
Es siempre un servicio Gratuito, incluso he visto algunos sitios que motivan a los usurios para que se suscriban, obsequiando por ejemplo un e-book ó un boletin interesante y exclusivo.
Entonces, tu como administrador de un blog no esperes más y dale a tus usuarios la posibilidad de mantenerse actualizados con el contenido de tu blog, ó tu como lector, no te pierdas las noticias ó información de el blog o página que te interesa, suscribiendote a los sitios de tu preferencia.
SliderNav es un plugin para jQuery que te permite añadir dinámico, deslizamiento de contenido mediante una barra de navegación vertical (índice). Está compuesto principalmente por listados alfabéticos, pero se puede utilizar con cualquier cosa, aunque las palabras más largas pueden mirar un poco incómodo. El plugin agrega automáticamente la navegación y establece el alto del objeto basado en la altura de la navegación es, a fin de garantizar que los usuarios tengan acceso a toda la lista. También usé el overflow: auto; de propiedades para el contenido real de lo que puede usar su rueda del ratón para desplazarse por el contenido, así.
El plugin ha sido probado (y funciona bien) en Firefox 3, Chrome 5, IE7, Safari 4 y Opera 10.
Como ya comenté en alguna ocasión la idea de este blog era para mostrar algunos ejemplos sobre dudas que se planteaban en un foro sobre Blogger. Al desaparecer el foro decidí seguir en la misma línea, es decir escribía sobre las cosas que aprendía y sobre las dudas que iban surgiendo. Eliminé algunas de las primeras entradas, ya no se trataba de tener un borrador sino de actualizar un blog así que necesitaba un poco de organización y darle un cambio a la triste pero preciada plantilla Minima.Después de esa limpieza y tal día como hoy un 26 de Mayo este blog lanzaba al aire su primer post "en serio"
Y pasó un año y el blog seguía actualizándose quien iba a decirlo, me hace mucha gracia ver entradas de aquellos tiempos, mis gustos han cambiado considerablemente y mis ganas de probar cosas nuevas fue en aumento. En aquellos días me familiarizaba con la famosa plantilla de Blogger beta, tropezaba mil veces y otras tantas me levantaba, una sacudida en la ropa para limpiar la caída... Y a caerse de nuevo, ya no sé si tanta caída es ley de vida o de la gravedad.
Cuando el blog cumplió el primer año no preparé una gran fiesta pero al menos tuve tiempo de crear un post. El segundo año no pudo ser y no es por coquetería o que me quitara edad sino que en aquella fecha me encontraba de viaje. Con el tercero surgió otro viaje inesperado, pero este año no podía faltar porque no hay viaje ni excusa y si mucho agradecimiento, este año puedo gritar a los cuatro vientos que lo que era un proyecto de blog cumple cuatro añazos, son muchas horas dedicadas a un blog, muchas idas y venidas usando el vista previa, muchas imágenes subidas y capturas realizadas, enlaces y multitud de códigos, parrafadas a granel, algunas dudas resueltas y otras sin resolver. Saludos, menciones, alguna entrevista y muchas, muchas risas entre comentario y comentario. A veces da la sensación que se trata de una vida entera.
Cuatro años dan para mucho y aportan mucho al autor de un blog, mil y pico de entradas resumidas en una sola palabra "diversión" algo que sólo se consigue cuando las cosas se hacen con ilusión y mientras dure esa ilusión por aquí estaremos celebrando otros cumpleaños y con ellos nuevas cosas que contar.
"Gracias a todos por estar porque hicieron agradable este largo camino"
Desde hace ya varios meses muchos blogs han tenido problemas tanto con el número de entradas que se muestran en el blog así como con los comentarios que desaparecen.
El primero surgió desde diciembre del año pasado y sucede con los comentarios. Según a palabras de Irene H, empleada de Google, Blogger está actualizando su plataforma y los comentarios hechos desde diciembre de 2009 hasta ahora, pueden desaparecer momentáneamente.
Esto no sucede en todos los blogs, pero sí es común que de repente veas en una entrada 10 comentarios cuando en realidad tenías 20 (por decir algo)
O que en el link de comentarios diga que hay tantos comentarios cuando en realidad puede haber una cantidad mayor.
Y otro más, que cuando escribimos un comentario éste no aparece o marca un error al publicarlo.
Primero, ya sabemos que Blogger está actualizando sabe Dios qué tantas cosas, así que hasta cierto punto es "normal" que sucedan estos problemas, así que no hay que desesperarse, más bien, esperarse a que Blogger termine de hacer lo que tenga que hacer.
Segundo, si tu blog ha perdido muchos comentarios y ya pasaron varios días sin que reaparezcan expón tu caso en el siguiente hilo del foro de ayuda de Blogger dejando la dirección de tu blog, así como de las entradas donde has perdido los comentarios:
Y tercero, si al publicar un comentario en un blog (incluyendo este) ves que tu comentario no se ve, no es necesario volverlo a escribir, sólo fíjate que abajo del formulario de comentarios aparezca la leyenda 'Se ha publicado tu comentario.'
Una vez que veamos ese mensaje tendremos la certeza de que el comentario ha sido publicado. Algunas veces tarda unos minutos en aparecer, en otras ocasiones tarda varias horas, pero aparecerá, a menos claro, que el autor del blog tenga moderados los comentarios y no lo publique.
El otro problema es con el número de entradas que se muestran en el blog. Como Rosa ya nos había avisado antes, desde el mes de febrero Blogger está haciendo experimentos para implementar la autopaginación. Esto ha traído el problema de que, el número de entradas a mostrar que han configurado no es el que corresponde en el blog, así que puede sucederte que si tienes configurado para mostrar (por ejemplo) 9 entradas sólo aparezcan 3 o 4 o X número de entradas distinto al programado.
Al igual que el otro problema, Blogger sugiere que te dirijas al siguiente hilo del foro de ayuda:
Ahí deja un comentario con la dirección de tu blog, especifica si la plantilla es de Blogger o de terceros y si se ha modificado desde la Edición de HTML, el número de entradas que has configurado desde Configuración > Formato, y el número de entradas que se muestran actualmente, y además especifica si utilizas la opción de Leer más.
Mientras tanto y aunque ya haya pasado mucho tiempo sin que haya una solución en concreto recuerda que todos los inconvenientes que nos pueda dar ahora las actualizaciones de Blogger se supone que serán para tener más ventajas en el blog, así que no hay más remedio que esperar.
Se trata de Ascii TextArt, una página para crear nuestro nombre en código de programación ASCII.
Así los comentarios son mucho más visibles.
La utilidad trae bastantes opciones, como la posibilidad de incluir una regla para medir el resultado, signos de comentarios de diversos lenguajes de programación, diferentes opciones de espaciado entre letras.
Si sos programador lo podes incorporar en los códigos como Css, JavaScript, etc...
Hace unas semanas en los comentarios se habla de problemas al intentar añadir las páginas estáticas en el espacio del header, días más tarde haciendo unos arreglos encontré una solución que es la que Isaac está esperando, no digo que sea la más acertada o más correcta pero una solución al fin y al cabo. La idea es disponer de páginas estáticas enlazándolas con cualquier menú y que dicho menú esté ubicado en el bloque de la cabecera.
Lo primero que haremos será añadir las páginas y situarlas justo después de la cabecera en el gadget del crosscol. Recordemos que personalizamos los títulos siguiendo estos pasos más adelante lo que haremos será ocultarlas por lo que si aún no las personalizamos no es necesario añadir color ni imágenes.
A continuación buscamos los estilos de header-wrapper para dar altura a la cabecera y dejar espacio para añadir el menú (el valor es una referencia ya que la altura depende de cada cabecera)
#header-wrapper {
background:#ccc;
height: 125px;
width:860px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
Sin marcar para expandir la plantilla buscamos el bloque de la cabecera y hacemos unos pequeños cambios:
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)'
type='Header'/>
</b:section>
</div>
Donde dice maxwidgets='1' cambiamos a maxwidgets='2' y en showaddelement='no' lo cambiamos a showaddelement='yes' eso nos dará la opción de añadir un nuevo gadget, si ya la tenemos omitimos ese paso, también cambiaremos locked='true' por locked='false' con esto último consegumos arrastrar el gadget de la cabecera a nuestro antojo.
Añadimos a continuación el menú que tenemos preparado, es decir los estilos los añadimos en la plantilla justo antes de ]]></b:skin> y el html para los enlaces en un gadget justo después de la cabecera.
Para el ejemplo añadí el menú Revolution elements pero puede ser cualquier otro.
Nos quedaría entonces el menú justo después de la cabecera ya continuación las páginas estáticas.
Lo que haremos ahora será lo siguiente, enlazaremos cada pestaña del menú con la página deseada, es muy simple, marcamos sobre una pestaña de las páginas y copiamos la url de la barra del navegador. En los enlaces del menú pegamos esa url que traemos copiada, de esa forma estamos enlazando la página que deseamos mostrar.
Una vez tenemos todos los enlaces añadidos vamos a ocultar las páginas, nos situamos en los estilos de las páginas y añadimos display:none de la siguiente forma.
#PageList1 { display:none; width: 100%; }
O bien desde el mismo gadget de páginas procurando no marcar las páginas para no mostrarlas.
Y nos queda nuestro menú enlazando el mismo contenido que tendrían las páginas.
Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:
Plantilla para Blogger, 2 columnas principales, 3 columnas en el footer, 860px de ancho, Optimizada para SEO, Colores minimalistas, Comentarios numerados, Comentarios destacados
Incluye:
Plantilla XML, Instrucciones de instalación, Licencia
Inicialmente estaba diseñando una plantilla para Ciudad Blogger pero poco a poco me fui alejando de lo que tenía en mente hasta que di con una combinación que me gustó mucho para compartirla con todos ustedes.
Quo es una plantilla gratuita de dos columnas principales y tres columnas más en la parte del footer para poder colocar ahí más gadgets, tiene una cabecera reducida alineada a la izquierda para que el contenido de las entradas inicie desde la parte superior.
El diseño de la plantilla es minimalista, los colores blanco y negro predominan en ella y un elegante color rojo resalta ciertas áreas como la letra inicial de cada título de entrada. Es una plantilla que denota seriedad pero al mismo tiempo simplicidad y modernidad.
Personalización:
La cabecera tiene un ancho máximo de 320px por lo que se recomienda usar un título pequeño o un logotipo que no exceda esa medida; si se desea poner un título largo se recomienda ajustar el tamaño de la letra del título a un tamaño más pequeño, se modifica en esta área:
Es compatible con todos los navegadores más conocidos (arriba se especifica cuáles) según la última versión actual de cada uno de ellos.
Los títulos se han optimizado para SEO con la finalidad de ser más amigables para los robots de los buscadores y facilitar el posicionamiento en la web.
Espero que les guste y sobre todo que la disfruten.
ACTUALIZACIÓN 1.0 Ya se ha corregido el problema de visualización en Internet Explorer 7. El color del texto de las entradas así como el texto de la cabecera ya es visible.
Image chef es un sitio donde podremos enmarcar nuestras fotos, pero adicionalmente ofrece muchas utilidades, como mosaico de letras, tablas de dibujo y muchísimas utilidades más. Aquí, una pequeña muestra:
Si quieres saber más sobre HTML5, te presentamos un interesante sitio en el que nos muestran ejemplos y demostraciones de esta nueva versión de HTML.
Ejemplos y Demos de HTML5 tiene los ejemplos básicos del uso de HTML5 y los soportes de los navegadores más conocidos. Entre ellos Internet Explorer, Mozilla Firefox, Safari, Opera y Google Chrome.
Sólo como ejemplo muestro un bloque del cual podemos editar el texto, mostrado en ContentEditable:
Código:
<section id="editable" contenteditable="true"> <h2>¡Este texto se puede editar!</h2> <p>¿Por qué no lo intentas? Un párrafo cualquiera</p>
<ol> <li>el primer ítem</li> <li>el segundo</li> <li>y el tercero</li>
</ol> </section>
Ejemplo:
¡Este texto se puede editar!
¿Por qué no lo intentas? Un párrafo cualquiera
el primer ítem
el segundo
y el tercero
Al añadir el atributo contenteditable="true" hacemos que ese bloque se pueda editar, como si estaríamos usando TinyMCE o FCKEditor. El código anterior funciona en todos los navegadores modernos.
Capturar la pantalla es necesario muchas veces, sobre todo para los que escribimos blogs.
Greenshot es un Software libre para Windows, con el que podrás capturar tu pantalla y también hacer anotaciones sobre las imágenes.
Al ejecutar el programa te encontrarás con un icono en la bandeja de sistema.
Desde este icono se puede acceder a todas las opciones del programa. Podrás capturar una región de la pantalla, la pantalla completa, una ventana o capturar la última región que hayas especificado.
Una vez echa la captura se abrirá una ventana en la cual podrás agregarle texto, recuadro, circulo, linea o flecha, pudiendo modificar con distintos estilos, color, tamaño, traer al frente o hacia atrás, etc.. luego poder guardar la imagen en varios formatos.
Añadimos la aplicación y seguidamente le concedemos permisos.
En el siguiente paso debemos añadir nuestro nombre en Twitter y contraseña.
Una vez tenemos la aplicación con nuestro nombre de usuario y contraseña podemos ver el siguiente campo desde donde podemos twittear sin necesidad de acceder a Twitter.
En nuestro muro se mostrará como una actualización con el icono de Twitter.
-Tweet es una publicación o actualización de nuestro estado en Twitter.
Con Google Font API podemos mostrar otras familias de fuentes en nuestro blog, independientemente de las que ya tenemos por defectos en los navegadores.
Hace mucho mucho tiempo, un niño paseaba por un prado en cuyo centro encontró un árbol con un cartel que decía: soy un árbol encantado, si dices las palabras mágicas, lo verás.
El niño trató de acertar el hechizo, y probó con abracadabra, supercalifragilisticoespialidoso, tan-ta-ta-chán, y muchas otras, pero nada. Rendido, se tiró suplicante, diciendo: "¡¡por favor, arbolito!!", y entonces, se abrió una gran puerta en el árbol. Todo estaba oscuro, menos un cartel que decía: "sigue haciendo magia". Entonces el niño dijo "¡¡Gracias, arbolito!!", y se encendió dentro del árbol una luz que alumbraba un camino hacia una gran montaña de juguetes y chocolate.
El niño pudo llevar a todos sus amigos a aquel árbol y tener la mejor fiesta del mundo, y por eso se dice siempre que "por favor" y "gracias", son las palabras mágicas
En MyFonts podemos encontrar una opción que se llama WhatTheFont desde ahí podemos saber qué tipo de fuente se está usando cuando accedemos a una página, es tan sencillo como añadir la url de la página en cuestión o subir una captura de la fuente.
Seguramente te ha pasado que ves un gadget y lo quieres para tu blog, pero no sabes cómo se verá el gadget o si realmente funciona. Lo mismo cuando queremos probar nuevos códigos, dar formato a un texto, crear tablas, etc. suele ser cansado tener que entrar al blog, hacer pruebas, guardar, ver el blog cómo quedó, regresar a editar, volver a probar... en fin, es un procedimiento que puede ser muy agotador.
Para estos casos es muy útil usar un editor de HTML online que nos muestre cómo se ven las cosas que queremos hacer en tiempo real.
¿Para que sirve? Para escribir los códigos HTML que queremos usar y obtener la muestra inmediata del código en cuestión, así no tenemos que estar entrando al blog cientos de veces para probar algún código, simplemente lo escribirmos en el editor online y veremos los resultados inmediatos de lo que estamos haciendo.
Para hacer la prueba de ver cómo funciona entra a Real-time HTML Editor y en la parte de arriba borra las letras que hay y en su lugar pega el siguiente código:
Cuando comencé a escribir en bolsanegra una de las funciones que más me gustó fue la opción de vista previa en las entradas, me parece una función estupenda y de mucha utilidad y desde ayer ya podemos hacer uso de ella en Blogger si accedemos por Blogger in Draft
Johnson Zachary es el creador de este fantástico efecto de iluminación creado con la propiedad text-shadow. Utiliza una imagen PNG que es la que aporta la iluminación al efecto y JavaScript con el fin de simular las sombras en tiempo real de la propiedad text-shadow.
Funciona en Firefox, Safari, Opera y Chrome. Si queremos ver el efecto en nuestro blog aunque sea simplemente por curiosidad podemos añadirlo en un gadget de html de la siguiente forma.
Antes de </head> pegamos el contenido del siguiente archivo que son el script y los estilos,
El archivo contiene la imagen PNG de fondo, recuerdo que es conveniente alojarla en nuestro propio servidor para evitar futuros problemas con el servidor donde la he alojado.
Se encuentra en los estilos en background: url(spotlight.png) top center;
Guardamos los cambios y nos situamos en plantilla de diseño, allí editamos un nuevo gadget de HTML y pegamos en su interior lo siguiente:
Sustituimos Gem@ BLOG por vuestro título y para que ocupe todo el ancho y alto de vuestro gadget modificamos el ancho en width: 990px y el alto en height: 406px lo haremos en los estilos donde dice:
