links for 2007-02-13
-
PIONEROS Internet de América Latina – La historia contada por sus protagonistas –
Similar Posts
Agrupar puntos en Google Maps con PHP
ByLuis
A veces cuando desarrollamos mapas usando Google Maps, nos pueden quedar iconos muy pegados los unos a los otros, siendo bastante complicado apreciar algo en el mapa.
php_google_maps es una librería que nos permite trabajar facilmente con los mapas de Google, y que además añade una clase que permite agrupar puntos en el mapa según su separación.
Introduction to Marker Clustering With Google Maps
Vía / fede.carg
Librería Javascript para Facebook Connect
ByLuis
Mμ Connect es una librería Javascript muy ligera que permite utilizar Facebook Connect desde tu web y pudiendo usar tus frameworks favoritos: Dojo, jQuery, MooTools, Prototype o YUI.
Entre otras acciones nos permite loguearnos, desloguearnos, leer y escribir y añadir amigos.
Vía / WebAppers
pChart: gráficas mediante PHP
ByLuis
pChart es una clase PHP que nos ayuda a crear gráficas. Los datos que se muestran se recuperan de sentencias SQL, ficheros CSV o simplemente introduciéndolos de forma manual.
Permite realizar gráficas de líneas, barras y circulares. Su uso es bastante sencillo. Incluso permite añadir ficheros de esquemas de colores.
pChart
links for 2006-12-13
ByLuis
-
Los 10 trabajos finalistas en el concurso: ¿Cómo enseñarais a realizar páginas web? ya fueron presentados. Gracias a todos por el apoyo al concurso y esperen próximamente al gran ganador del iPod.(tags: webdevelopment concurso)
links for 2006-12-04
ByLuis
-
Desde Online-Utility han lanzado un listado con los 500 sitios en internet que más enlaces reciben de la Wikipedia en inglés. ¿Lo más destacable? El 1er puesto: findagrave.com un sitio que muestra información sobre lápidas famosas, como la de Alfons
-
Muy oportuno para estas fechas: un buscador visual que nos ayuda a encontrar cosas por semejanzas… Por ejemplo, que nos gusta este bolso que luce Jessica Alba pues nada, a un clic de distancia ya tenemos un buen repertorio en dónde escoger…
-
Sencillo script para cambiar a mayúsculas el contenido de un campo input text de un formulario. El cambio se produce al abandonar el campo.
-
Tutorial en 8 pasos y en castellano de cómo insertar un rayo en una foto
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