HTML

28 entradas

HTML and CSS flex grid 3 columns 1 row

Rejilla de contenidos mobile-first con puro HTML y CSS

El diseño sensible al dispositivo, responsive o mobile-first, que se adapta al tamaño de la pantalla en donde se visualiza una web, se puede construir con puro HTML y CSS. Con unos pocos estilos, y estructura en los contenidos, podemos manejar la disposición de éstos contenidos en pantalla. Si nos fijamos en cómo se visualiza el contenido en rejilla de uno de los principales framework mobile-first, que se llama Bootstrap, salta a la vista que se basa en dos ideas. La primera es el visualizar las cajas en pocas filas con muchas columnas cuando la pantalla en lo bastante ancha. Y mostrar las cajas en muchas filas con pocas columnas cuando hay pocos pixeles de ancho de la pantalla.

Logo de Wordpress

WordPress: haciendo una plantilla de página

Este post es un codekata o howto sobre WordPress para hacer plantillas de páginas individuales. Es decir, tenemos lo que se llaman temas completos para el frontend de WordPress. En los temas de WordPress todo el diseño web viene definido, y a veces nos traen una serie de plantillas que se pueden asignar individualmente a cada página, a cada post, a cada contenido.. Estas plantillas de página, podemos además maquetarlas y programarlas para que tengan cierto aspecto visual. Podemos crear nuevas y definir nuevas estructuras. Por ejemplo, en el tema de Customizr que estoy usando actualmente en este blog, tenemos una plantilla de página que nos proponen, y podemos crear nuevas replicándola y editándola fácilmente.

Mobile

Javascript: las Progressive Web Apps y el futuro de las aplicaciones para móviles

¿Qué te parece si te dicen que se puede desarrollar una web, que se puede instalar como si fuera una aplicación nativa, en cualquier sistema operativo como Android, iOS, Mac o Windows? Ya sea en móviles o PCs de escritorio.. ¿Y si no hace falta que se publique en las App Store de cada sistema operativo? ¿Y si se actualizara también automáticamente? Pues esta tecnología ya está entre nosotros desde hace unos pocos años, y la mayoría de los navegadores más usados ya son compatibles. Estas aplicaciones también pueden almacenar información en el navegador, acceder a la cámara, micrófono, GPS, se pueden usar sin conexión, son seguras porque obligan al uso de SSL, pueden acceder a las notificaciones push para mostrar notificaciones de escritorio y de móviles, etc..

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.

Monstruo come galletas

Nueva versión del sencillo mensaje de aceptar cookies para tu web

Un lector me ha escrito consultando sobre un post algo antiguo, sobre cómo poner un sencillo mensaje de cookies en una web. La verdad es que no me he explicado muy bien en aquel post, los navegadores han cambiado durante estos últimos años, Javascript también.. así que aquí estoy compartiendo otro mensaje de aceptar cookies más actual. Este mensaje de aceptar cookies es una actualización de aquel antiguo que vengo usando en nuevos proyectos. Es un mensaje hecho artesanalmente que puedes copiar y pegar para tu web. El único requisito que tiene es que necesitas usar la librería de jQuery para que funcione. jQuery hoy día es como un estándar, hace tan bien su trabajo de acceder al DOM de las páginas web, que cómo no usarlo en todos los proyectos.

Symfony WYSIWYG

Symfony: cómo montar un blog con editor WYSIWYG

De nuevo traigo otro CODE-KATA, para montar un blog en Symfony Flex, Symfony 4. Así en unos pocos minutos tenemos el esqueleto de lo que puede ser un blog. También valdría para hacer páginas corporativas, incluso si lo que queremos es un editor de fichas de productos también. Es decir, este es un pequeño tutorial para arrancar un nuevo proyecto en Symfony, creando es esqueleto de una aplicación web que va a ser un blog, con un editor de texto avanzado del tipo WYSIWYG. WYSIWYG quiere decir What You See Is What You Get. Es decir, estos editores de texto son como los que tienen WordPress, Magento, Prestashop.. en donde se editan las páginas visualmente dentro del mismo navegador. Con este tipo de editores puedes organizar los textos, darles tamaño a las letras, alineación, subrayados, colores, etcétera.

Popup de Mailchimp de jnjsite.com

Popup de Mailchimp para WordPress

He tenido problemas para poner un popup de Mailchimp en esta web. Así que aquí estoy compartiendo la solución. He tratado de usar la utilidad que viene en el panel de control de Mailchimp. Pero todo apunta a que tengo algún conflicto entre los Javascripts de Mailchimp, los Javascripts de mi plantilla, algún plugin de cacheado o del minificado del código fuente. En fin, que no funcionaba y he terminado antes haciendo el popup artesanal que se puede ver en la barra lateral derecha de la web. Si has tenido el mismo problema, aquí dejo mi solución, que espero que funcione en el 100% de las webs. Simplemente necesitas tener instalado en la web jQuery, el resto viene todo en el código de abajo. Se puede copiar y pegar en el widget de WordPress donde lo quieras y adaptarlo para tu web.

Prolog enlazando PHP

Prolog: enlazando un sistema experto con PHP

Hoy traigo cómo enlazar proyectos web en PHP con partes hechas en Prolog. No he encontrado casi información en Internet, así que aquí estoy compartiendo algo sobre esto. Este es un simple HOWTO para tratar las respuestas, o muchos de los casos que puedes tener en ataques a Prolog desde PHP. La idea general es que tenemos uno o varios programas en ficheros .pl. Estos ficheros a su vez se pueden autoincluir unos en otros con sentencias del estilo include o import como en otros lenguajes. Además, también estos ficheros .pl se pueden generar automáticamente desde otras fuentes de datos. Esta dinamicidad de la parte programada en Prolog es una de las cosas más interesantes. Es decir, los programas en Prolog pueden cambiarse a si mismos, tema muy interesante en Inteligencia Artificial. Esto es, los programas en Prolog pueden aprender sobre la marcha, además de que, la base de conocimiento puede nutrirse de muchos datos externos también sobre la marcha.

Landing pages con Symfony

Symfony: creando landings con formularios, segunda parte

En el post anterior escribí sobre cómo crear una landing page rápido con Symfony 4, y se me quedó pendiente el enviar por email los mensajes del formulario. Es decir, ya tenemos en un rato una rudimentaria ‘landing page’ donde un maquetador o el equipo de marketing disfrutará poniendo cualquier cosa. Será como maquetar con HTML, CSS y Javascript sin tener ningún engorroso CMS por debajo limitándonos lo que podemos hacer. Además tendremos la base de un buen Symfony para después añadir lo que queramos. Ya tenemos la captación de contactos (o capture leads para los entendidos), que se guardan en una base de datos embebida en la propia web. Sin complicadas instalaciones ni configuraciones SQL, directamente con una base de datos SQLite embebida. Sólo queda entonces hacer 3 cosas: Instalar el módulo de Swiftmailer. Configurarlo. Y poner la acción de enviar el email. Vamos al grano.. 1. Instalando Swiftmailer Para esto basta con poner en el terminal lo siguiente: composer require symfony/swiftmailer-bundle ..esperamos, y si todo ha ido bien tenemos que ver en el terminal algo como lo siguente: Using version ^3.2 for symfony/swiftmailer-bundle ./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev) Package […]