Sección herramientas. Conversores: RGB-HEX y HTML-TXT | Oloblogger Hace unos días inauguramos un nuevo apartado en el blog que por la influencia del calor y de las vacaciones (o del frío y del laboro, depend...

9 de septiembre de 2012

Sección herramientas. Conversores: RGB-HEX y HTML-TXT

Hace unos días inauguramos un nuevo apartado en el blog que por la influencia del calor y de las vacaciones (o del frío y del laboro, depende de la latitud), probablemente ha pasado desapercibido.

Se trata de una serie de páginas que hemos englobado dentro de otra a modo de índice y que hemos denominado Herramientas Online. Actualmente podéis ver el enlace en la parte de abajo a la izquierda del blog.

De momento no hay muchas, pero a medida que vaya visitando los sitios que normalmente utilizo, no dudéis que allí irán a parar. Para mí será una buena chuleta y espero que para vosotros también lo sea.

Hay un par de enlaces que van a otras tantas utilidades marca de la casa y hechas en JavaScript en parte por necesidad y en parte por divertimento, pero pensé que con unos pocos ajustes de estilo quizás servirían para otros y ahí están.

Si se me ocurre hacer algunas más las iré incorporando en el mismo apartado, pero de momento son sólo dos...


HTML a texto plano


Esta es una de las cosas que más echaba de menos.

Publicar código tiene la complicación de que si lo pegas tal cual en cualquier entrada, el navegador interpreta las etiquetas HTML y no se visualiza nada. Al contrario, incluso puede desbarajustar todo el aspecto del blog dependiendo del código que sea.

Es casi lo mismo que ocurre cuando en un comentario queréis explicar qué hicistéis con vuestro blog, pegando en el casillero el código HTML que usasteis. La diferencia es que en este último caso lo que ocurre es que el código desaparece del comentario. Medidas de seguridad de Blogger... supongo.

Pero la solución es bastante sencilla, ya que es suficiente con eliminar los símbolos < y > y el navegador lo interpreta como texto normal. Pero claro, esto a veces lleva a confusión, así que casi mejor sustituimos esos símbolos por entidades que imprimen esos caracteres pero que no son realmente ellos. Sólo es para que se vean.


En el caso de los dos mencionados, las entidades correspondientes son &lt; y &gt;, así que el script lo único que hace es sustituir los símbolos por las entidades. Se pega allí, se convierte, se copia la traducción dónde corresponda y asunto resuelto.

Algunas veces lo que estorban son las comillas, así que hay un segundo casillero para realizar esta tarea. Si se quieren simultanear ambas sólo hay que pasar por uno y después por el otro.

Espero que a partir de ahora ya no tengáis problemas. Cuando queráis pegar código en un comentario sólo tenéis que pasar primero por el conversor y listo.


Colores RGB a Hexadecimal y viceversa


Este conversor es quizás menos necesario, pero alguna vez también me hubiera venido bien tener uno a mano.

Lo que hace este conversor es simplemente transformar los códigos de colores hexadecimales (por ejemplo #ff00ff) a sus equivalentes en formato RGB (255,0,255).

Aquí no hay ningún secreto para los que controlen un poco los sistemas de numeración. El script lo único que hace es separar de dos en dos los números hexadecimales (ff-00-ff) y pasarlos a sus homólogos en base decimal (255-0-255).

También hace el camino contrario permitiéndonos conocer el código hexadecimal de un color en formato RGB y adicionalmente muestra el color tecleado ¿A qué es muy mono?


Lo más habitual es usar sólo hexadecimal para los colores, pero en alguna ocasión nos viene bien aplicar transparencia y ahí lo más fácil es usar RGB. La propiedad sería algo así:

color: rgba(255,125,0,.5);

Los tres primeros valores representan respectivamente la proporción de rojo, verde y azul en el resultado final, siendo 0 ninguno y 255 el valor máximo (#FF).

Y el cuarto parámetro es el interesante, pues es el que indica el nivel de transparencia. Puede tomar cualquier valor entre 0 y 1 ambos inclusive, siendo 0 totalmente transparente y 1 totalmente opaco. En el ejemplo figura un .5 o lo que es lo mismo, trasparencia al 50%.

¿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

17 comentarios :

  1. Muy buena la entrada Oloman lo tendré muy en cuenta.
    Saludos

    ResponderEliminar
  2. Genial :) nada como un poco de Javascript para hacer las cosas más fáciles para los demás.

    Un detalle en el primero (para escapar también las &amp;): Antes de
    ht=ht.replace(/</g,'<')

    pon

    ht = ht.replace(/&/g, '&');

    Porque si no hay muchos caracteres que no se convertirán ;)

    ResponderEliminar
    Respuestas
    1. Perdón, cambia '&' por '&amp;'

      Eliminar
    2. Pensé incluir la sustitución de &, pero al final lo descarté porque por lo general no hace falta. Lo mismo me pasó con las comillas pero ahí decidí hacerlo de manera adicional para quién quisiera ¿en qué tipo de caracteres estás pensando cuando dices que "no se convertirán"?

      Eliminar
    3. Me refiero a que si tú quieres poner literalmente la entidad (&amp;) (o cualquier otra), no la convertirás y quedará su representación gráfica. Por ejemplo. Si tú quieres poner la frase:

      Para poner el símbolo < en un comentario tienes que escribir &lt;

      Saldría:

      Para poner el símbolo < en un comentario tienes que escribir <

      (es un ejemplo muy tonto, seguro que hay mejores, pero vale ;) )

      Eliminar
    4. Vale, ahora entiendo. La verdad es que a nosotros sí que nos da la lata eso, pero cómo a la mayoría de gente no pues tampoco quise complicar la cosa. Me vale con que sirva para que puedan pegar código en los comentarios, aunque quizás incorpore un día que tenga un rato eso que dices. Gracias por la observación.

      Eliminar
    5. Hoy tuve la necesidad y finalmente he decidido incorporarlo aunque sólo me sirva a mí ;)

      Eliminar
  3. Hola de nuevo Oloman.

    Mi pregunta no tiene que ver con este post pero si con uno que publicaste hace poco tiempo.
    Mira, hace unos dias coloque en mi blog el efecto banda en los gadgets de la sidebar. Tras mucho tocar los valores que tu tenias en el codigo, pude adaptarlo para que se viera en mi blog. El tema es que me gustaria que el ancho de la banda ocupara simplemente el ancho del gadget y no el de toda la columna lateral. He variado todos los valores y consigo darle el ancho del gadget pero no consigo que los triangulos que hacen el efecto banda aparezcan de ninguna de las maneras.

    A ver si me pudieras echar una mano.
    Muchas gracias.
    Un abrazo.

    ResponderEliminar
    Respuestas
    1. Pero... si le das el ancho del gadget quedará raro. Necesitarías añadirle un borde interior que ahora no tienes para que simulara salir desde ahí o mejor dicho, que los extremos se pliegan hacia atrás de algo ¿no?

      Quizás no te entendí bien lo que quieres. Si es ese el caso mejor haces una captura y "dibujas" en ella lo que quieres.

      Eliminar
  4. No te preocupes Oloman, ya lo he resuelto. Como tu bien dices, le he añadido ese borde interior del que hablas pero ahora si al gadget en si. Antes lo tenia a lo que era el ancho de la columna lateral y se veia una banda demasiado grande.

    Asi es como me ha quedado:
    https://dl.dropbox.com/u/15277672/BANDA%20PLEGADA.jpg

    Muchas gracias por tu atencion amigo.

    Un abrazo.

    ResponderEliminar
    Respuestas
    1. Ah, perfecto. Ya lo vi pero pensaba que todavía querías "enmarcar" más. Por eso te decía que no quedaría bien :)

      No hay de qué...

      Eliminar
  5. Ola:
    Me han dicho en el blog Ciudad blogger que viniera a este blog a preguntar mi duda aber si tu me puedes ayudar:
    Mira en mi blog tengo una seccion donde tengo una tabla de google docs la seccion es esta:
    http://tuttostriker.blogspot.com/p/merkastriker.html
    Y lo que queria saber es como crear un filtro de busqueda para cada columna o un buscador para la tabla.
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola. No soy especialista siquiera en lo que escribo, pero aquí encontré una ayuda sobre lo que preguntas: Cómo filtrar los datos en Google Docs

      A ver si te sirve.

      Eliminar
    2. Ola perdona que te moleste de nuevo
      Pero e mirado lo que me dijiste y yo lo que quiero es como un buscador o filtro que la gente en la pagina del blog busque por ejemplo los jugadores que empiezen por Ma y le aparezan todos no se si me explico bien
      Gracias

      Eliminar
    3. Perfectamente, pero no sé cómo hacerlo, por eso te remití a esa entrada que indicaba cómo filtrar datos. Supongo que la dificultad está en que ese filtrado se pueda hacer desde el blog. Eso es seguro lo más difícil... para mí al menos.

      Eliminar
  6. Me gustaría presentarles una herraminta para convertir colores que acabo de publicar.
    Permite convertir un color RGB / Hexadecimal / HSL, o HSB y también descargar esquemas de color pregenerados sencillos en JSON.
    Pueden verla en http://rgb.to

    Un saludo:
    CC

    ResponderEliminar
    Respuestas
    1. OK. Suelo borrar los enlaces "propagandísticos", pero dejaré el tuyo porque me parece útil ;)

      Eliminar