YouEmbedTube

En YouEmbedTube podemos escribir una serie de etiquetas y nos creará una presentación que tendrá entre 3 y 8 videos de YouTube que podremos insertar en cualquier página web, copiando y pegando el código correspondiente.

REFERENCIAS:

Aborregate

	GreenLife Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Pottery Barn Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Stripped Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Arena Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Chaotic Soul Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Black Wood Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	The Journalist Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Net Spiel Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Renewed Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Shoe Fetish Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER

A través de incubaweb me entero de la existencia de Nodobe, una extensión que soluciona la visualización de cierto tipo de documentos en el navegador, reemplazando los insoportables plugins de Adobe Reader.

Soporta 38 formatos diferente lo que no es poca cosa: PDF, documentos de Microsoft Office (doc, docx, rtf, xls, xlsx, ppt, pptx), imágenes (png, jpg, gif, tif, bmp, ppm, xpm), gráficos vectoriales (eps, ras), archivos de texto, documentos de OpenOffice (odt, odf, ott, odg, odp, stw, sxw, std, sxd, sti, sxi, sxc), de StarOffice (sda, sdd, sdw, vor) y de OpenDocument (otg, stp, ods, pts).

Para utilizarla es necesario registrarse ya que está integrada con un servicio llamado Vuzit que nos ofrece una serie de posibilidades más como incrustar esos documentos en una página web y que sean accesibles con cualquier navegador (Internet Explorer, Firefox, Safari y Opera). De esta manera, podemos agregar documentos subidos por nosotros (disponemos de 50 megas) o documentos que se encuentren en la web.

Los desarrolladores disponen también de la posibilidad de utilizar una serie de scripts especiales ya que las APIs que usa el servicio son accesibles de manera independiente. Una de ellas es útil para identificar cierto tipo de documentos con un ícono especial y asociarlos directamente. Con linkit basta poner ese script para que esto se haga de manera automática.

Van Gogh - Starry Night es un experimento muy impresionante.

La imagen que vemos es la reproducción de un famoso cuadro de Van Gogh realizado a manera de mosaico utilizando 210.000 pequeñas fotografías.

Haciendo click sobre la imagen podemos ir usando los controles para ampliar, reducir o navegar en ese giga y medio de información.

En DailyCoding hay un artículo que muestra una curiosidad del CSS. Sacando provecho de ella, lo que han creado es una manera simple de crear recuadros muy llamativos.

Las propiedad border es algo que usamos habitualmente, generalmente son bordes "finos" pero nada impide usar bordes más grandes:

<div style="border: 10px solid #0080C0; height: 100px; width:200px;"></div>

Tampoco nada impide que en lugar de colocar los cuatro bordes, sólo usemos uno o varios de ellos de manera indistinta:

<div style="border-bottom: 10px solid #0080C0; border-left: 10px solid #0080C0; height: 100px; width:200px;"></div>

Por supuesto, a nadie se la va a ocurrir colocar como color del borde un color transparente, o sea, igual al color del fondo ya que, a simple vista, suena absurdo colocar un borde y luego ocultarlo. Sin embargo, si lo hacemos, ocurrirá esto:

<div style="border-bottom: 10px solid #0080C0; border-left: 10px solid transparent; height: 100px; width:200px;"></div>

No, no es magia, lo que ocurre es que cuando le damos dos colores distintos a dos bordes adyacente, se produce un "conflicto" y la unión se marca sesgada. Si ambos son del mismo ancho, el ángulo formado es de exactamente de 45º.

<div style="border-bottom: 10px solid #0080C0;border-top: 10px solid #FF0000; border-left: 10px solid #008000; border-right: 10px solid #FF8040; height: 100px; width:200px;"></div>

Así que, aprovechando esta particularidad y usando bordes de color transparente, parece sencillo dibujar triángulos sólo con CSS:

border-bottom border-left	border-bottom border-right	border-top border-left	border-top border-right
border-bottom + border-left + border-right		border-top + border-left + border-right

De allí en adelante, la creación de formas no rectangulares para mostrar ciertos contenidos parece depender de la imaginación y estos son dos de los modelos sugeridos por DailyCoding:

HACIA ARRIBA

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

HACIA ABAJO

Este es el código CSS de ambos ejemplos:

<style type="text/css">
.calloutUp { /* es el borde del triangulito hacia arriba */
  border-bottom: 12px solid #FFFFFF;
  border-left: 12px dotted transparent;
  border-right: 12px dotted transparent;
  left: 0px; top: 0px;
  height: 0; width: 0; /* no tendrá dimensiones */
  margin-left: 20px; /* lo separamos del borde izquierdo */
  z-index: 10;
}
.calloutUp2 {  /* un triangulito más chico adentro del anterior */
  border-bottom: 10px solid #9999FF;
  border-left: 10px dotted transparent;
  border-right: 10px dotted transparent;
  position: relative;
  left: -10px; top: 2px; /* lo posicionamos desplazado */
  height: 0; width: 0; /* no tendrá dimensiones */
  z-index: 11;
}

.calloutDown { /* es el borde del triangulito hacia abajo */
  border-top: 12px solid #FFFFFF;
  border-left: 12px dotted transparent;
  border-right: 12px dotted transparent;
  left: 0px; top: 0px; /* lo posicionamos */
  height: 0; width: 0; /* no tendrá dimensiones */
  margin-left: 20px; /* lo separamos del borde izquierdo */
  z-index: 11;
}.calloutDown2 { /* un triangulito más chico adentro del anterior */
  border-top: 10px solid #9999FF;
  border-left: 10px dotted transparent;
  border-right: 10px dotted transparent;
  height: 0; width: 0; /* no tendrá dimensiones */
  position: relative;
  left: -10px; top: -12px; /* lo posicionamos despalazado */
  z-index: 10;
}

.divContainerUp { /* el contenido del recuadro hacia arriba */
  background-color: #9999FF;
  border: solid 1px #FFFFFF;
  color: #000000;
  padding: 10px;
  position: relative;
  text-align; justify;
  top: -1px;
  width: 500px;
  z-index: 9;
}
.divContainerDown { /* el contenido del recuadro hacia abajo */
  background-color: #9999FF;
  border: solid 1px #FFFFFF;
  color: #000000;
  padding: 10px;
  position: relative;
  text-align; justify;
  top: 1px;
  z-index: 3;
  width: 500px;
}
</style>

Y este es el código HTML que debemos emplear para utilizarlos:

<div class="calloutUp"><div class="calloutUp2"></div></div>
<div class="divContainerUp"> ... el contenido del ejemplo superior ... </div>

<div class="divContainerDown"> ... el contenido del ejemplo inferior ... </div>
<div class="calloutDown"><div class="calloutDown2"></div></div>

REFERENCIAS:

Cosas Sencillas

En un post reciente, Vera tiene la gentileza de nombrarme y recomendarme el uso de un servico llamado TextSnip con el que dice que podemos gestionar y compartir fragmentos de código online de manera sencilla.

Como tiene razón, lo mejor es crear una cuenta gratuita en unos simples pasos (nombre y contraseña) y probarlo.

Entramos y nos dan dos opciones, quick snip o custom snip que sólo se diferencian por el tipo de URL final que se genere. Probamos la más sencilla que es la que aparece por defecto, simplemente escribimos el código y le ponemos un título; damos click en el botón get my URL e inmediatamente nos darán una dirección que será pública así que podremos compartir. Por ejemplo: http://textsnip.com/c551cd

Si abrimos la página, nos mostrará el código como texto plano pero a la derecha, un control llamado Change Code View nos permite verlo con la sintaxis resaltada de acuerdo al idioma de que se trate; en este caso, elegimos JavaScript y el resultado es realmente asombroso:

Probemos entonces con otros ejemplos:

Este es un código HTML: http://textsnip.com/663693
Este es un código CSS: http://textsnip.com/31c14b
Este es un código PHP: http://textsnip.com/074581

No son los únicos idiomas soportados, también acepta XML. SQL, Ruby, Python, VB y Java.

Todos los códigos que agregamos y compartimos son accesibles desde una dirección única a la que se van agregando de forma automática.

Sencillo, simple y práctico; más, no puede pedirse.