Comprobando código, Dabblet nos hace la vida más fácil | Oloblogger Ya he citado un par de veces este servicio llamado Dabblet , pero como fue muy de pasada llegó el momento de comentarlo un poco más. Pero só...

10 de mayo de 2012

Comprobando código, Dabblet nos hace la vida más fácil

Enlace a Dabblet
Ya he citado un par de veces este servicio llamado Dabblet, pero como fue muy de pasada llegó el momento de comentarlo un poco más. Pero sólo lo justo, lo prometo.

Se trata de un sitio de pruebas que permite escribir CSS y HTML en dos espacios diferentes y que, en tiempo real, según se teclean caracteres, nos muestra el resultado en un tercer hueco.

Captura servicio Dabblet


La utilidad para los que trabajamos con código parece evidente, ya que permite comprobar rápidamente cómo funciona lo diseñado y realizar ajustes viendo sobre la marcha cómo van quedando las cosas.

Para una primera impresión hay una opción (-prefix-free) que nos simulará el uso de prefijos para compatibilidad con los distintos navegares y así evitaremos triplicar o cuadruplicar líneas CSS. Una vez todo en orden y comprobado ya habrá tiempo de añadirlos.


Existen tres modos diferentes de visualización, opción para ajuste de tamaño de fuente y la posibilidad de que el código se solape o no por encima del resultado.

No requiere registro aunque será necesario hacerlo en Github si queremos guardar los resultados para después compartirlos directamente, mediante un enlace o embebiendo en otro sitio.


Este es un ejemplo para ver directamente en Dabblet o en Github. En el primero comprobaréis que podéis trastear cambiando, añadiendo o quitando cosas del CSS o del HTML.

Lo siguiente sería el resultado de embeber aquí la parte de código HTML (sólo como ejemplo, para no hacerlo muy extenso) con el código que nos da Github.



Hay otros servicios similares pero la simpleza de la interface de este me resulta bastante práctica y muy agradable.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

10 comentarios :

  1. muy buen aporte mi estimado! gracias de nuevo! ya tengo un nuevo bookmark.

    en mi caso utilizaba uno mas "sencillo" y es que cuando lo conocí estaba el "BOM" de los instant http://www.htmlinstant.com/

    aver que te parece es muy similar! y ami me sirve para hacer pequeñas cosas, pues si bien esto no precisamente mi gran inspiración si me atrae y distrae!

    Un saludo gracias pro el aporte.

    ResponderEliminar
    Respuestas
    1. Le he echado un rápido vistazo y también parece estar bien. Por sacarle un pero, el CSS hay que insertarlo mediante etiquetas STYLE pero lo cierto es que funciona como debe. Personalmente me sigue gustando más este de Dabblet, pero es otra opción por si alguien quiere probar. Gracias.

      Eliminar
  2. En tu ultimo articulo lo recomendaste, es de verdad una excelente herramienta.

    ResponderEliminar
  3. Hola Olomán,hacia ya un tiempo que no te saludaba aunque tu pagina es todo inspiración para mi.

    Te vengo a preguntar/proponer si sabes o se puede crear un script que pueda poner en mi pagina de música y que llame al vídeo de youtube que coincida con el titulo del post.

    El motivo es que muchos vídeos los eliminan y como yo pongo en cada post el vídeo,la letra,la traducción y la biografía, cuando quitan un vídeo de un post pasado yo muchas veces no me entero,pero con ese ¿posible? script siempre aparecería el primer vídeo así titulado en youtube sin importar que hayan quitado el que yo alojé en un principio.Así la pagina siempre estaría actualizada en ese sentido.

    ¿muy complicado?

    Estaré atento a tu respuesta y te envío un saludo.

    Milú

    P.s. Se que no es el tema del post de hoy y me disculpo por ello,aunque si lo ves posible es una idea para un futuro post.

    ResponderEliminar
    Respuestas
    1. La idea me parece buena y se me pasa por la cabeza una manera de hacerlo que habría que comprobar. No obstante, lo que no imagino es cómo el programa iba a saber si el vídeo ha sido eliminado o no por YouTube, ya que las direcciones las siguen manteniendo con otro vídeo que avisa de la eliminación. Es decir ¿cómo diferencia un programa si el vídeo de la página tiene contenido o un aviso? Ahí no se me ocurre nada de nada...

      Eliminar
    2. No se,quizas digo una tontería,pero yo por ej pongo los videos en autoplay,si el video no arranca antes de 3 o 4 segundons que pasara al siguiente,aunque supongo que eso ya sería complicarlo aun mas,¿no?.

      Estaré atento de todos modos por si se te ocurre algo y gracias de todos modos por la ayuda que nos das siempre.

      Milú

      Eliminar
    3. Me has dado una idea con lo que has dicho y es que puedes montar una lista de reproducción de vídeos con el mismo contenido y luego embeber esa lista. El resultado serían sucesivos vídeos iguales pero no sé si funcionará cuando uno deje de existir. Puedes hacer la prueba con alguno que conozcas que ha desaparecido poniéndolo el primero de la lista.

      Sinceramente no sé siquiera si funcionará cómo quieres, pero con probar nada pierdes. A lo que decías en primera instancia le veo el irresoluble -por mi parte- problema comentado: cómo hacer para que el script o lo que sea detecte que el vídeo no existe..

      Eliminar
    4. Por eso te decía lo de los videos en autoplay,porque me he fijado que en las listas de reproducción de youtube cuando han bloqueado o suprimido un video se ve que está en la lista pero con el titulo en gris y ya ni se detiene ahí,salta al siguiente directamente;y por eso te puse lo de si no arrancaba en un tiempo minimo que saltara,porque ademas en unos paises los bloquean y otros no.

      Así con ese supuesto script si alguien tiene bloqueado en su pais el video tambien saltaría al siguiente que en su pais no estaría bloqueado.

      No se si me he explicado sobre por que sería mejor algún tipo de script que tenga en cuenta eso,que el video arranque antes de 3 segundos por ej. tras cargar la pagina y que sino salte al siguiente.Tendría infinidad de utilidades.No se..

      Gracias de todos modos Olomán

      Eliminar
  4. que alquin me ayude a diseña la plantilla notepad chaos para un blog de biogracia

    ResponderEliminar
    Respuestas
    1. Esa tiene poco diseño pues ya va muy completa. Sólo descarga la plantilla y luego la subes a tu blog.

      Eliminar