CSS

16 entradas

Symfony 4, el manejo de formularios

Symfony: tutorial 11: los formularios

Continuando con la serie de tutoriales de iniciación a Symfony Flex, vengo aquí con otra de las mejores cosas que tiene Symfony. Esta vez se trata del manejo y creación de los formularios. Podríamos seguir creando formularios a la antigua, mediante HTML, construyendo poco a poco dichos formularios. Pero si quieres ser realmente productivo construyendo aplicaciones que gestionan mucha información, interactuando con los usuarios, deberías de usar ésta herramienta y aprovechar lo que Symfony nos ofrece.

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 web profiler

Symfony: tutorial 7: depurando todo con lupa, el profiler

En este post traigo una review del perfilador de Symfony Flex, Symfony 4, el profiler. Es una gran herramienta de desarrollo web que nos brinda Symfony. Podemos ver muchos datos internos de cómo funciona todo por dentro: la petición y respuesta, rendimiento, envío de formularios, validaciones, datos de las excepciones, logs… pasando por Doctrine, enrutamiento..

Symfony tutorial templating

Symfony: tutorial 6: las vistas, cómo se trabajan las plantillas con Twig

Recordando mientras que nos actualizamos con Symfony, traigo aquí otro code-kata o howto, esta vez, sobre plantillas. El sistema de plantillas de Symfony Flex, Symfony 4, desde hace tiempo que se basa en Twig. Es una de las mejoras cosas que le han pasado al mundo del PHP con respecto al desarrollo del frontend. Twig viene a añadir una sintaxis nueva: una serie de instrucciones a las plantillas: extends, block, for, if, etcétera.. Por un lado, Twig simplifica mucho el código fuente, queda mucho más limpio. Si eres un frontender, o un desarrollador web, te hará la vida mucho más fácil cuando te pongas a escribir códigos fuentes. Por otro lado, te ayuda a reutilizar las plantillas, no teniendo nunca que repetir el mismo código en plantillas distintas. Si estás repitiendo un código en una plantilla Twig, es que hay que refactorizar y reutilizar.

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

Traigo hoy un HOWTO para hacer landing pages sobre Symfony 4 orientadas a captación de clientes. Un code-kata con el que en menos de 1 hora tendremos la estructura básica funcional sobre Symfony 4 para recibir contactos, guardarlos en base de datos y enviárnoslos por email. Llevo un par de semanas bien ajetreadas: migrando un proyecto desde Symfony 3 al 4, otro desde un Joomla en mal estado a Symfony 4, otro proyecto terminándolo de poner en marcha con Symfony 4. Pequeños proyectos de poco tiempo que me han dado muchas ideas para escribir. Así que, cargado de ideas, sigo poco a poco redescubriendo Symfony con Symfony 4. Y me sigo sintiendo como un niño con juguete nuevo 😀 Tengo que decir que Symfony 4 ha mejorado mucho en simplicidad. No hay que saberse cómo funciona todo el conjunto con los 50-60 componentes, ni gran parte de ellos, para comenzar a hacer aplicaciones web robustas: https://symfony.com/components Ni tampoco hay que hacer complicados tutoriales muy largos antes de comenzar a construir con Symfony. Eso sí, tenemos que tener claro cómo funciona la línea de comandos con PHP, y tener muy claro cómo funciona Composer, esto ya lo expliqué en el primer […]

YoRobot4 - Text to HTML ratio

Yo, robot IV – White/Gray/Black Hat SEO – El Text to HTML ratio

El contenido es el rey para el posicionamiento, rezan muchos SEOs y muchas herramientas para SEOs. He leído por Internet que muchos hablan de que lo más importante para posicionar las páginas web es que el contenido sea bueno, que sea geniuno, interesante para el usuario. Desde nuestro punto de vista, tenemos varios enfoques para hacernos una idea de si el contenido de una web es bueno. El más sencillo es la tasa que hay entre el texto y el código HTML, CSS y Javascript de nuestra web. Realmente, es la tasa entre el texto y el HTML, CSS y Javascript, aunque muchos se olvidan de que no sólo hay HTML.. Y muchas veces este CSS y Javascript puede ser tanto que la tasa de texto resultante baje demasiado. Todo esto se reduce en la tasa llamada Text to HTML ratio.

Usuarios por dispositivo mes a mes año pasado

Qué es realmente la Accesibilidad Web, el responsive design, el mobile-first.. una puesta al día con Bootstrap

Ha llegado la hora de ponerme al día con esta herramienta de desarrollo web para proyectos mobile-first. Hablo de Bootstrap, que como reza en su web, doy fe de que es muy popular desde hace años: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Si tienes una plantilla contruída sobre Bootstrap ya tienes una página preparada para todo tipo de dispositivos. Esta herramienta creada por Twitter es todo un referente desde hace años. Puede que tu web esté mejor o peor hecha, pero si tienes Bootstrap, ya tienes un buen punto de partida. Y una de las herramientas de mayor renombre. Así que si no lo has tenido en cuenta, ya es hora de cambiar el chip, y empezar a pensar de otra forma. ¿Qué es la Accesibilidad Web? Si vamos al origen de la creación de la Web. No hablo de la creación de Internet, sino de la creación de la web. La web se creó en su origen para dar un acceso universal a la información. Normalmente se asocia la accesibilidad exclusivamente a las personas con alguna discapacidad, pero en la web, esto cobra un sentido más […]

Logo de Wordpress

WordPress: desarrollar tu propio tema personalizado 100% tuyo

¡Hola de nuevo! Continuando con el post anterior sobre el desarrollo de temas para WordPress. Inevitablemente, ya sea más tarde o más temprano, llegaremos a querer desligarnos totalmente de modificar los temas de otros. Todos hemos empezado haciendo pequeños arreglos con el editor que tiene WordPress. Si has seguido el post anterior sobre cómo hacer un theme hijo de otro te habrás quedado con ganas de más, así que continuándolo vamos a crear uno básico 100% tuyo para lo que necesites. Ahora bien, lo normal es que si estás aquí alguna vez hayas jugueteado con temas de WordPress de otros, modificándolos y llegando a un punto en el que no puedes actualizarlo porque perderías las modificaciones. Por otro lado si haces un tema hijo siempre vas a depender del padre, y también puede que haya actualizaciones del padre que rompan tu diseño. Así que la forma más profesional de solucionar esto es hacer tu propio tema, 100% tuyo, y totalmente desligado de cualquier otro.

Logo de Wordpress

WordPress: desarrollar tu propio tema personalizado

¡Hola de nuevo! Estoy trabajando últimamente mucho con WordPress, así que he pensado que sería bueno ponerse al día indagando un poco más en cómo está hecho WordPress y cómo funcionan los llamados themes. Los themes son diseños que se pueden instalar en tu WordPress y lo hacen más atractivo a la vista, mejorando cosas de UI/UX que llaman los expertos. Es decir, mejoran el diseño, la interfaz de usuario, la usabilidad, la accesibilidad.. Estas materias en el desarrollo de software son principales para todos los que trabajamos con software con interfaz de usuario. Por esto que en la mayoría de estudios relacionados hemos tenido asignaturas destinadas única y exclusivamente a esta materia (Diseño web, Programación en Internet, Interfaces, Gráficos por computador..), algunas más hueso y otras más de sentido común.