Crear una nube de etiquetas con jQuery

ByLuis

Aunque las nubes de etiquetas ya no están tan de moda como hace un tiempo, el tutorial donde explican cómo hacer un tagscloud mediante jQuery merece la pena, ya que se trata de una explicación detallada.
No solo se centra en jQuery, sino en la parte PHP que devuelve los datos en JSON y en los estilos CSS para mostrar las etiquetas según su relevancia.
Realmente la parte jQuery solo cambia el tamaño de la letra según la frecuencia de la etiqueta.
Building a jQuery-Powered Tag-Cloud

Similar Posts

|

CSS grid: filas con misma altura

ByLuis

Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.

Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:

.grid {
  margin: 0 auto;
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  grid-auto-rows: auto;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid--same-height .cell {
  position: relative;
}
.grid--same-height .cell::before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.grid--same-height .content {
  height: 100%;
  position: absolute;
  margin-top: -100%;
}

Teniendo en cuenta que el HTML sería:

<div id="grid" class="grid">
  <div class="cell">
    <div class="content">
      <img src="https://picsum.photos/500/500"/>
    </div>
  </div>
  ...
</div>

Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.

Podéis ver un ejemplo en este pen

jsPDF: crea PDFs directamente desde Javascript

ByLuis

Interesante javascript que nos permite crear PDFs sin necesidad de aplicaciones en el servidor, sino usando únicamente una librería PDF. Su uso es muy sencillo, devolviendo una URL con Content-type y codificada en Base64:


var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');	

// Output as Data URI
doc.output('datauri');

A mí en Firefox no me ha funcionado, pero en Chrome sí.

jsPDF

Vía / DZone

Script AJAX para crear pestañas

ByLuis

Aunque es más fácil hacer copy/paste de un script o simplemente usarlo, que ver cómo funciona por dentro, os recomiendo que le echéis un ojo a este script para crear pestañas mediante AJAX.
Si os fijáis, se trata de una lista ul que mediante estilos forma las pestañas. En cada uno de los elementos li hay un enlace a cada una de las páginas que queremos mostrar. También habrá un div que contendrá la página que queremos mostrar en su interior.
Lo más interesante para mí es que la idea que se suele tener de que AJAX tiene que apuntar a un script no es cierta, apunta a una url y obtiene el resultado, si es un script, el resultado que este devuelva, y si es una página HTML, el contenido de esta.
La segunda cosa que resaltaría es una forma de programar que me parece muy limpia, escribir el HTML sin Javascripts añadidos que son complicados de seguir (sobre todo eventos: onclick, onmouseover, …) y luego que el script general se encargue de modificar los elementos HTML como corresponda, en este caso coge los enlaces y les añade el evento onclick, el cual depende del contenido del atributo href y el atributo rel.
Ajax Tabs Content script
Vía / Digg

6 formas de hacer un diseño destacable

ByLuis

A la hora de hacer diseños mucha gente puede opinar sobre ello mejor que yo, pero a mí estos consejos me han gustado. Está claro que en muchos diseños no se pueden usar, pero para algunas circunstancias sí son interesantes de aplicar.

  • Fondos de pantalla grandes: los fondos de pantalla grande pueden hacer que el diseño resalte, a parte de que son fáciles de añadir.consejos1.png
  • Layout original: no es la primera vez que veo diseños con secciones de tamaños que superan el ancho y alto del navegador y que para acceder a cada sección hay que hacer un scroll progresivo (mediante javascript). Son originales y en algunos casos muy acertados. En el ejemplo que os pongo, cada color es una sección y el tamaño original tiene un ancho de 6000px.consejos2.png
  • Navigación creativa: la navegación puede dar mucho juego para mejorar el diseño, ya sea mediante rollovers u otras cosas. Eso sí, ante todo que prime la usabilidad. En el ejemplo que os paso los menús van a juego con los colores de la calle.consejos3.png
  • Minimalismo: aunque por ahora se ha tratado de consejos con un gran diseño, eso no implica que un gran diseño tenga que ser aparatoso, puede ser perfectamente minimalista, lo cual hace que llame mucho la atención.consejos4.png
  • Logo: está claro que un buen logo hace que te represente y además te diferencie.
  • Layout horizontal: aunque la gente está acostumbrada al scroll vertical, este tipo de diseño puede llegar a ser muy atractivo, aunque haya gente que lo odie.consejos6.png

6 Methods to Make Your Website Standout

Generar documentos MS Word con phpdocx

ByLuis

Me avisan los creadores de esta librería para la generación de ficheros docx de Microsoft, la cual dispone de una versión gratuita que ofrece bastantes características e incluso las más necesarias:

  • Formato de textos
  • Formato de párrafos
  • Enlaces externos
  • Cabeceras y pies de página
  • Imágenes
  • Listas
  • Tablas
  • Imágenes
  • …
require_once('../classes/cCreateDocx.inc');
$objDocx = new cCreateDocx();
$arrParamsText = array( 'b' => 'single', 'jc' => 'center’); //b for bold and jc for alignment
$objDocx->fAddText('Hello World.', $arrParamsText);
$objDocx->fCreateDocx('hello_world.docx');

PHPDOCX

gotApi: colección de APIs

ByLuis

gotapi.pngYa hace tiempo hablamos de una web de referencias para programadores, y como cuanta más variedad de servicios parecidos tengamos, mejor que mejor. En esta ocasión os mostramos un directorio de APIs, que accediendo a las páginas originales, nos muestran las referencias que necesitamos.
Dentro de las distintas APIs encontramos referencias sobre HTML, Javascript (Prototype incluida), CSS, XML, C++, PHP, bases de datos, Java, Apache, ActionScript y mucho más que va creciendo poco a poco.
Lo que más me gusta es poder elegir el origen de referencia del API, por ejemplo para HTML puedes mirar en w3.org o en msdn.microsoft.com, aunque me hubiera gustado que se pudiera buscar también en xulplanet.com.
gotAPI.com
Vía / dzone