|

21 cuestiones sobre block, inline y floating en HTML

ByLuis

Una colección con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los márgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas.
CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
Vía / Pixel Groovy

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

|

Consejos para organizar tus CSS

ByLuis

Muchas veces cuando estamos diseñando nuestras páginas web, nos encontramos con que vamos añadiendo estilos a nuestras CSS, por lo que al final tenemos un CSS bastante desorganizado y caótico. Aquí os dejo unos pocos consejos para tener unas CSS limpias y organizadas.

  • Agrupa los estilos: júntalos por categorías (cabecera, tipografía, …) y sepáralos mediante comentarios.
  • Elige correctamente las categorías
  • Importa otras hojas de estilo
  • Usa tabulación y saltos de línea
  • Usa selectores para descendientes…

Squeaky Clean CSS

Vía / Caótico Neutral

10 cosas que probablemente no sepas de PHP

ByLuis

Cuando aprendemos un lenguaje (en este caso PHP) de forma autodidacta o parcialmente (un curso en la empresa), hay veces que usamos lo que conocemos porque con eso nos basta, pero no profundizamos más y nos encontramos con que hay cosas que desconocemos y que nos serían de utilidad. Por eso, el artículo que paso a traducir, nos puede ser de gran ayuda.

  • Usa ip2long() y long2ip() para guardar/recuperar las direcciones IP en la base de datos en vez de un string. Un string de 15 posiciones ocupa más espacio, cuanto menos llenemos la BD mejor que mejor.
  • Valida parcialmente la dirección de email con la función checkdnsrr(). Esta función comprueba que el dominio se corresponde a una dirección IP, así evitamos que se hayan enviado direcciones de correo con servidores erróneos. En el caso de que la validación de la existencia del email sea necesario.
  • Si usas PHP5 utiliza las funciones para acceso a MySQL mysqli_* en lugar de mysql_*, ya que están optimizadas.
  • Aprende lo que te ofrece el operador ternario (?:), te facilitará mucho el desarrollo y la comprensión del código una vez creado.
  • No reinventes la rueda, antes de meterte a hacer lo que ya está hecho, mira si existe en las librerías PEAR.
  • Usa highlight_file() cuando quieras formatear un texto como código PHP.
  • Deshabilita los logs de errores con error_reporting(0), a parte de ganar en rendimiento, evitas mostrar querys o paths de scripts. Yo personalmente recomendaría que te crearas un buen gestor de errores.
  • Usa gzcompress() y gzuncompress() para comprimir strings grandes para que no ocupen demasiado tamaño en la BD, por ejemplo en un campo BLOB.
  • Usa parámetros por referencia (&$param) para poder conseguir que la función te devuelva más valores a parte de que devuelve return.
  • Intenta comprender completamente las “magic quotes” para evitar que te ataquen mediante SQL Injection.

10 things you (probably) didn’t know about PHP.

Vía / dzone

|

Mejora la estructura de tu sitio Flash

ByLuis

flash.pngInteresante artículo que te ayuda a mejorar la estructura de tu sitio Flash. Teniendo en cuenta que no se trata del diseño gráfico, sino de cómo está formado internamente: organizando los keyframes, ActionScripts y las películas.
Una buena estructura nos puede ayudar al mantenimiento, actualizaciones, rapidez de carga … Entre los consejos que nos dan: que no debemos usar escenas, que el primer frame debe ser para recoger las variables globales, el segundo frame para reunir los archivos externos, el tercer frame para las CSS. Una lectura muy útil para aquellos que hemos aprendido a realizar animaciones Flash por nuestra propia cuenta (creo que somos la mayoría) y que por ello no realizamos animaciones del todo limpias.
The Best Structure for your Flash Site