webs

97 entradas

Android Chrome debug remote devices port forwarding

Cómo acceder a localhost dentro del emulador de Android

Dejo aquí un howto, un apunte resumen, para configurar el emulador de Android y poder programar accediendo a localhost, desde el dispositivo emulado. Se hace haciendo lo que se llama port forwarding en el dispositivo emulado desde ciertos puertos al host de nuestro sistema operativo. Esto sirve para probar Service Workers (PWAs) localmente, webs localmente, apps que accedan a servicios que estemos programando localmente, etc..

WAF Web Application Firewall

Cómo empezar un cortafuegos en PHP

Este post es un sencillo howto para ejecutar un código, antes de cualquier ejecución en PHP en una aplicación web. Sirve para montar lo que se llama un WAF en la capa de aplicación, cuyas siglas significan Web Application Firewall. Así después, le podemos añadir toda la lógica que necesitemos. Con ésta técnica, en cada petición que se reciba en PHP, se ejecutará lo que pongas en el WAF antes de la ejecución de nuestra aplicación web.. 🧐

Objetos relacionados base de datos

WordPress: cómo crear una tabla para un plugin

Este es un pequeño codekata o howto para crear un plugin que cree una tabla en la base de datos. Como reza la documentación oficial, no se recomienda crear nuevas tablas para almacenar los datos, pero según que caso, puede ser la mejor opción, tendremos entonces que ocuparnos nosotros de su mantenimiento. El siguiente código simplemente es un esqueleto de plugin con el que se puede crear una tabla en el momento de la activación de dicho plugin. También cuando se desactiva el plugin se borrará dicha tabla.

GNULinux

GNU/Linux: montando un sistema de despliegue manual con Git

Dejo aquí un pequeño howto o codekata para configurar un despliegue manual de una aplicación mediante Git. Con este codekata se instala el repositorio en un directorio, mientras que los ficheros de trabajo que finalmente corren la aplicación estarán en otro directorio diferente. Internamente los sistemas de despliegue automatizado usan configuraciones de este estilo para hacer lo que se llama Continuous Deployment (CD). Para este post sólo se trabaja la forma manual de hacer el despliegue. Que si quisieras, podrás automatizarlo añadiendo luego webhooks a tu repositorio, y recibir estos webhooks para lanzar este despliegue. Clonado del repositorio Suponiendo que queremos poner la aplicación y repositorio en el mismo directorio, vamos al directorio y podemos ejecutar lo siguiente: Si estamos en el directorio /ruta/al/directorio/ entonces tendríamos los siguientes directorio: /ruta/al/directorio/el_repo/ /ruta/al/directorio/la_app/ Comandos de despliegue machacando modificaciones

Logo de Javascript

Javascript: objetos y ficheros, escalando un programa

Sencillo codekata o tutorial para comprender cómo en Javascript se importan ficheros, o se puede organizar el programa en varios ficheros. No es plan tener todo junto en un mismo fichero. Hay que encapsular todo en objetos, en ficheros, con funciones, todo bien desacoplado, etc.. para que el programa sea mantenible y legible. A partir del Ecma Script 6 tenemos disponible en Javascript mecanismos para esto. Una sugerencia es lo siguiente. Cargar como módulo un fichero principal y dentro de este a base de import lo demás. Dependerá del proyecto que quizá entonces hay que usar una estructura definida..

Logo de Javascript

Javascript: tomando una foto de la cámara en una web

Pequeño howto o codekata para tomar una foto desde la webcam en una web. Con este script incrustado en una web, se le preguntará al usuario por el permiso para acceder a los dispositivos de vídeo y audio disponibles en el dispositivo. Entonces si el usuario da permiso para su uso, se mostrará una caja con el vídeo y audio que se reciben en tiempo real. Sólo se usa HTML y Javascript. Simplemente se pinta en la caja de video el stream de vídeo con audio en tiempo real. Y tenemos también un canvas en donde podemos pintar una captura de un fotograma del vídeo que estamos viendo. La captura del fotograma que se pinta en el canvas se hace con el botón disponible.

Logo de Javascript

Javascript: obtener las coordenadas geográficas de una visita a la web

Sencillo codekata para obtener las coordenadas de una visita a una web mediante Javascript. Funciona en navegadores de ordenadores y dispositivos móviles. Mostrará un mensaje emergente cuando se haga la consulta de las coordenadas. Devuelve latitud y longitud según el navegador. Este script pide al navegador las coordenadas. Si estamos en un móvil con Android con Google Chrome, por ejemplo, el GPS del dispositivo móvil le servirá las coordenadas exactas al navegador, y el navegador a la web, si el usuario da el permiso. Al grano, el código fuente

VueJS hola mundo 2

Hola mundo con VueJS

Uno de los principales frameworks Javascript a fecha de hoy es VueJS. Los más populares, según los resultados en varias páginas encontradas con Google, son Angular, React y VueJS. Y en concreto VueJS me ha sorprendido por lo sencillo de empezar a usarlo. Es un framework progresivo para desarrollo del frontend, que hace que podamos comenzar a usarlo progresivamente. Es decir, podemos usarlo en parte para hacer algo muy concreto en una parte de la web, o más, incluso llegando a ponerlo a controlar el frontend al 100%. Es una librería muy ligera, que proporciona un sistema, a base de Javascript con el que con directivas y poco más, podemos hacer que la web sea mucho más interactiva sin tener que picar casi código Javascript.

Datos

Javascript: almacenando datos en el navegador de los visitantes

Todos estamos como locos venga a poner mensajes de cookies en las webs 🤪 pero hay otras 4 formas, que aquí dejo en estos codekatas, para guardar información en los navegadores de los visitantes. Estas otras formas, además, permiten guardar incluso más información que con las cookies 🤔 información totalmente segura y única para cada visitante. Esta es la evolución natural de las webs hacia el mundo de los escritorios de los PC y aplicaciones para móviles. Es el siguiente paso para convertir una web normal, en una aplicación web instalable en PCs y móviles. Estas webs que se pueden instalar, y pueden trabajar sin conexión a Internet, se llaman PWAs (Progressive Web Apps). Además, las PWAs no necesitan instalarse desde la App Store de Google, ni de Apple, ni de Microsoft 😜 se instalan directamente porque son la misma web.. pero esto es tema para otro post..

Probando web en el emulador de Android

GNU/Linux: aceleración hardware para el emulador de Android

Hoy traigo un pequeño howto para activar y disfrutar la aceleración hardware con el emulador de móviles Android. Parte del post también sirve para disfrutar de esta aceleración con otro software de virtualización como VirtualBox o VMWare. También traigo cómo tener disponible en el escritorio accesos directos a los móviles emulados que necesites. Así no hay que arrancar el Android Studio completo si estás programando webs, también podrás probar todo el Javascript que use funciones de dispositivos móviles como cámara, GPS, conectividad, etc.. y también sirve para probar PWAs! Este post contiene los pasos probados para GNU/Linux compatible con Debian, o derivados como Ubuntu, Ubuntu Mate, etc.

Drupal review

Drupal, un pedrusco de oro en la mina de los CMSs

Este CMS reluce como el oro por fuera, y por dentro es oro puro, una joya del software 😉 Es uno de los mejores CMSs Open Source que tenemos disponibles para los proyectos. Hoy os traigo una review, tratando de remarcar el porqué es uno de los más usados en el mercado, sobretodo en proyectos complejos para universidades, gobiernos y en las empresas más tecnológicas. Es uno de los CMS que hay que conocer. Espero resumir bien las principales características, sobre todo desde el punto de vista de un programador 😎 aunque trataré también temas para marketeros y agencias. Es uno de los más flexibles y escalables. Inicialmente tenía su propio framework, pero luego comenzó incorporando Symfony 2, y en las últimas versiones viene incorporando Symfony 3. Ya está integrado con Composer. Internamente, prioriza las mejores técnicas de desarrollo para garantizarte una solución robusta para tus proyectos. Externamente, es de lo más personalizable sin tener que invertir demasiado tiempo. Tiene un gran ecosistema de configuraciones, temas y módulos disponibles. Sobre todo una gran comunidad de desarrolladores con casi 50000 módulos y casi 3000 temas disponibles a fecha de hoy, en el marketplace de Drupal.org.

EasyAdmin generando a partir de la BD

Generando un panel de control en pocos minutos con EasyAdmin en Symfony

¡Hola! Jugando y jugando, probando software, aquí que vengo de nuevo y os traigo un codekata en Symfony. Es para hacer ingeniería inversa de cualquier proyecto en el que tengas una base de datos. También traigo una joya del software que se llama EasyAdmin, un bundle/componente para Symfony. Este codekata se puede aplicar a cualquier base de datos compatible con Symfony, más en concreto, con cualquiera compatible con Doctrine, que es el componente ORM que te conectará con la BD. Quizá tienes que hacer un panel de control que sólo acceda a la información X del proyecto, a ciertas tablas. También sirve para bases de datos completas. Podría ser un proyecto legacy, de un Symfony antiguo, un Magento, un ERP como Odoo con el que trabajar con Symfony, o un WordPress, un Prestashop, Drupal, etc.. Sea cual sea el proyecto la idea es la misma.