Página web de parzibyte.me renovada
Justo hoy he publicado mi página principal totalmente renovada y hecha por mí, además de que es totalmente open source (he puesto el repositorio en línea).
Ya era hora, pues no estaba mostrando mi portafolio y la última actualización fue en diciembre del 2017.
Voy a explicar en este post cómo fue la creación y las cosas que usé para crearla; además de exponer cómo hice para que cargara rápido y otras cosas.
El código fuente está en mi GitHub, y la demostración la puedes ver en el sitio personal de Luis Cabrera Benito (parzibyte).
La primera vez (cuando la página no estaba completa) obtuve una puntuación de 100 en móvil y en ordenador, después de agregar los observadores de intersección bajó a 94 en móvil y se mantuvo en 100 desde una computadora.
Puedes ver la puntuación aquí.
Aunque al momento de escribir esto había como 35 imágenes, todas fueron cargadas conforme el usuario las requería, además de que quité saltos de línea y tabulaciones del documento HTML; reduje la calidad de las imágenes, retrasé la carga de iconos y cargué los estilos y fuentes en paralelo.
A pesar de que es un HTML al final, el código es generado con PHP; pero decidí no generarlo en tiempo de ejecución sino generarlo una vez y crear un HTML para acelerar todavía más las cosas.
Aquí voy a explicar cómo utilicé cada cosa para hacer la página.
El diseño y la alineación de las cosas es gracias a una variante de Bootstrap llamada Sketchy que puede ser encontrada aquí.
Sabemos que PHP genera HTML, así que lo usé para ello; pero para ahorrarle carga al servidor (es decir, que no renderizara siempre) decidí poner el contenido generado en un HTML.
De esta manera se servía un HTML, no un PHP, es decir, algo estático pero que fue generado por PHP.
Luego de ello removí los saltos de línea y tabulaciones para que el HTML pesara menos y escribía lo generado en un nuevo documento:
Acabo de notar que no estoy usando la variable $salida para file_put_contents pero luego lo arreglo. Lo importante es notar el uso de ob_start y ob_get_clean.
Gracias a la API de IntersectionObserver para el Lazy loading pude cargar las imágenes conforme el usuario hace scroll. Por defecto todas tienen una imagen de placeholder (la cual se define con $imagenGenerica desde PHP) y van cambiando su ruta cada que el usuario las va a ver:
Como programador perezoso que soy, puse todos mis datos en el código y así logré hacer una plantilla personalizable:
Para mis habilidades puse algunos iconos CSS de desarrolladores, pero iban a gastar ancho de banda y hacer más lenta la carga aunque el usuario no quisiera ver mis habilidades en ese momento.
Entonces, siguiendo la técnica para las imágenes, cargué los iconos solamente cuando el usuario anda navegando en esa sección.
Las cosas en paralelo son más rápidas porque se ejecutan al mismo tiempo y no esperan a que una termine para que la otra comience. Con ese principio cargué los estilos CSS y la fuente de manera paralela:
Me salté algunas cosas pero de todas ellas ya he hablado en mi blog, a la derecha encontrarás las categorías desde donde puedes explorar cada tema que toco.
Es hora de mostrar lo que compone mi página web, excepto el inicio pues ese ya todos lo vimos. Por cierto, así se ve en móvil:
Con tarjetas muestro las cosas que he creado. Ni siquiera yo sabía que son 30 cosas; claro que no todas son complejas pero puse todo mi esfuerzo en ellas.
En los casos en donde el código es mío o el sistema es gratuito agregué algunos enlaces para probar o estudiar el source code.
Tienen el título, una descripción personal sobre ellas y una barra que indica qué tanto sé sobre ellas.
He sido lo más humilde posible, por cierto.
Hay otras cosas pero dejaré que las veas tú mismo entrando a mi sitio web.
Bueno nunca había escrito sobre ello, pero si llegaste hasta aquí mereces saberlo. Hace muchos años (como en el 2011) estaba felizmente leyendo en mi teléfono algunos libros que había conseguido por ahí, pero me llamó mucho la atención uno llamado Ready Player One (no supe el nombre hasta después)… leí el inicio y me enganchó, pero el libro estaba incompleto y me quedé con las ganas de leerlo.
Pasó el tiempo, olvidé que existía pero por casualidad lo volví a encontrar; lo leí completo y me gustó mucho así que lo leí otras veces hasta que se convirtió en mi libro favorito. Entonces decidí que mi nombre de usuario iba a ser parzival como el avatar de Wade en la historia (si no has leído el libro, te lo recomiendo) y así fue.
Más tarde me registré en algunos sitios con ese username pero en varios ya estaba ocupado, fue hasta diciembre del 2015 que elegí parzibyte porque mi nombre tenía relación con la informática y aparte de ello no estaba ocupado, así que me quedé con parzibyte y así comenzó todo.
Por cierto, si no era parzibyte podría ser parzival777, ¿no?
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios