CSS

Popup de Mailchimp para WordPress

2018-08-27 - Categorías: Magento / Prestashop / Symfony / WordPress
Popup de Mailchimp de jnjsite.com

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.

Continuar leyendo..

Prolog: enlazando un sistema experto con PHP

2018-07-08 - Categorías: Inteligencia Artificial / PHP / Prolog
Prolog enlazando 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.

Continuar leyendo..

Symfony: creando landings con formularios

2018-04-21 - Categorías: PHP / Symfony
Landing pages con Symfony

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 tutorial sobre Symfony 4. Si todavía no te manejas bien con Composer y la línea de comandos.. ¡será mejor que no sigas!

Vayamos al grano..

Comenzando

Pasando de la teoría, y partiendo de que ya hamos visto los posts anteriores, vamos a seguir los siguientes pasos:

  1. Preparar los componentes que necesitamos.
  2. Preparar la base de datos que va a almacenar los contactos.
  3. Pintar el formulario en la página de aterrizaje, o landing page para los amigos.
  4. Recibir el formulario.
  5. Guardar en base de datos.
  6. Y enviarlo a nuestro email.

Comencemos..

1. Preparando los componentes

Creamos el esqueleto del proyecto, entramos al directorio y ponemos los componentes que vamos a usar:

composer create-project symfony/skeleton symfony-tutorial-2
cd symfony-tutorial-2
composer require twig
composer require form
composer require security
composer require doctrine
composer require maker
composer require server

2. Preparando la base de datos

Para simplificar el proceso, y no tener que instalarnos localmente un motor de base de datos completo propongo usar SQLite. SQLite es un tipo de base de datos embebida en la aplicación. Esto quiere decir que no necesita de instalación, simplemente la aplicación creará un fichero y manejará los datos sin ningún otro programa intermediario.

Primero vamos a crear la entidad Contact, que va a ser un objeto de PHP que va a almacenar los datos que un visitante nos deja en el formulario. A su vez, esta entidad se reutiliza para guardar automáticamente en la base de datos cada registro en una tabla que se creará automáticamente a partir de la entidad Contact. También se reutilizará para crear automáticamente el formulario. Esto de que Symfony genera automáticamente los códigos fuentes es brillante. Ejecutemos:

php bin/console make:entity

Y seguimos las instrucciones, vamos a crear los campos clásicos: nombre, email, asunto y mensaje.

Symfony Tutorial 2 landings Entity

Si te equivocas creando los campos no te preocupes, borra los ficheros y vuelve a empezar. Es la única forma de hacerlo y de aprender. Además, este comando make:entity te permite también añadir campos nuevos sobre la marcha si es que la entidad ya existe.

Ahora tenemos que decirle a la aplicación web que guarde los datos en SQLite, ya que por defecto los tratará de guardar en Mysql. Así que vamos a nuestro fichero .env y ponemos:

#DATABASE_URL=mysql://db_user:db_password@127.0.0.1:3306/db_name
DATABASE_URL=sqlite:///%kernel.project_dir%/var/data.db

Ahora las principales variables de configuración como contraseñas, parámetros de configuración, etc.. entran a la aplicación a modo de variables de entorno. Esto es más seguro y práctico, pero también es material para otro post. Ya está, ahora ejecutamos esto:

php bin/console doctrine:database:create
php bin/console doctrine:schema:create

Si todo ha ido bien, acabamos de crear el fichero data.db y la tabla Contact para guardar los contactos que nos hagan los visitantes.

3. Pintar el formulario en la página de aterrizaje

Vamos a simplificar todo, así que sólo tendremos una página que va a ser la home, en donde estará este formulario. Así creamos el controlador que recibe la visita:

php bin/console make:controller

Yo le he llamado MainController al mío y me crea los ficheros necesarios:

Symfony tutorial 2 make controller

De nuevo Symfony nos ha hecho mucho trabajo. Podemos ya arrancar el servidor de desarrollo haciendo esto:

php bin/console server:start

Y vamos a ver los resultados en http://localhost:8000/

Para poner el formulario aquí vamos a editar el fichero symfony-tutorial-2/templates/main/index.html.twig y ponemos:

{% extends 'base.html.twig' %}

{% block title %}¡Creando landings!{% endblock %}

{% block body %}
    {{ form(theForm) }}
{% endblock %}

Ahora mismo la plantilla intentará pintar el formulario llamado theForm pero no se lo hemos pasado, vamos a crearlo:

php bin/console make:form
Symfony tutorial 2 formulario

Mira en la imagen, si le decimos a Symfony al crear el formulario que cargue de una entidad que ya hemos creado, Symfony creará todos los campos del formulario automáticamente. Así que ahora queda pasar con el controlador el formulario a la plantilla Twig. Editamos el fichero symfony-tutorial-2/src/Controller/MainController.php para que quede como lo siguiente:

<?php

namespace App\Controller;

use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use App\Form\ContactType;

class MainController extends Controller
{
    /**
     * @Route("/", name="main")
     */
    public function index()
    {
        $theForm = $this->createForm(ContactType::class);

        return $this->render('main/index.html.twig', [
            'theForm' => $theForm->createView(),
        ]);
    }
}

Ya podemos recargar la página en el navegador y debemos ver el formulario. Sino, algo nos falta. Ahora nos queda recibir los formularios, guardarlos en base de datos y enviarnos estos datos a nuestro email.

4. Recibir el formulario

Si nos fijamos en el formulario, todavía no tiene botón de enviar, así que vamos a editar el fichero del formulario para añadírselo. En el fichero symfony-tutorial-2/src/Form/ContactType.php añadimos esta línea en los campos:

->add('submit', SubmitType::Class)

..y en la cabecera incluimos la clase del tipo submit así:

use Symfony\Component\Form\Extension\Core\Type\SubmitType;

Refrescamos y nos sale el formulario listo para enviar los datos:

Symfony tutorial 2 formulario submit

Ahora vamos a recibir los datos en el controlador. Para esto tenemos que recibir los datos en un objeto de PHP, del tipo de objeto que hemos creado antes. Es decir, vamos a usar la entidad Contact para que Symfony se encargue de todo. Es más fácil leer el código que explicarlo, en el controlador ponemos ahora:

<?php

namespace App\Controller;

use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use App\Form\ContactType;
use App\Entity\Contact;
use Symfony\Component\HttpFoundation\Request;

class MainController extends Controller
{
    /**
     * @Route("/", name="main")
     */
    public function index(Request $request)
    {
        $contact = new Contact();
        $theForm = $this->createForm(ContactType::class, $contact);

        $theForm->handleRequest($request);

        if ($theForm->isSubmitted() && $theForm->isValid()) {
            // save in database
            // send email
        }

        return $this->render('main/index.html.twig', [
            'theForm' => $theForm->createView(),
        ]);
    }
}

He marcado en negrita lo que acabo de añadir. Con esto se recibe y se valida que los datos son correctos automáticamente. Es una maravilla, ¡Symfony se encarga de casi todo! Ya sólo nos queda guardar el contacto en la base de datos y enviárnoslo por email.

5. Guardar en la base de datos

Para guardarlo en la base de datos simplemente añadimos lo siguiente:

// save in database
$entityManager = $this->getDoctrine()->getManager();
$entityManager->persist($contact);
$entityManager->flush();

Ahora sí, probamos el formulario y nos lo enviamos. Tendremos que poder abrir el fichero de la base de datos para ver cómo se guardan estos datos en la tabla que corresponde. Tengo Sqliteman instalado para ver estos ficheros, que viene en los repositorios de Ubuntu, pero hay muchos gestores de SQLite. Con un gestor de ficheros SQLite podremos abrir el fichero symfony-tutorial-2/var/data.db y veremos algo parecido a esto:

Symfony tutorial 2 formulario recibiendo datos

Ya sólo nos quedaría enviárnoslo a nuestro email. Es sencillo pero vamos a dejarlo para el siguiente post, que este ya está quedando muy espeso. Además el envío de correos electrónicos tiene mucho juego y hoy no me queda más tiempo 🙂

¡Un saludo!


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

2017-08-26 - Categorías: PHP / SEO
YoRobot4 - 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.

Continuar leyendo..

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

2017-07-20 - Categorías: General
Usuarios por dispositivo mes a mes año pasado

Este post es una puesta al día sobre herramientas de desarrollo, el mobile-first, el responsive, y la accesibilidad en la web. Es una puesta al día con esta herramienta de desarrollo web para proyectos mobile-first. Hablo de Bootstrap, que como reza en su web, 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 amplio. Aquí se añaden más variables, como pueden ser la resolución de pantalla, la capacidad de procesamiento, el software del navegador, el lenguaje del usuario, la velocidad de conexión, su ubicación geográfica, etc..

Es decir, que la Accesibilidad toma un concepto más amplio en la Web, que el que normalmente puede tomar fuera de Internet. Aquí entra en gran medida conceptos que repercuten directamente en el posicionamiento de la web, en la usabilidad. Entran conceptos que van a repercutir directamente en el éxito o fracaso, en mayor o menor medida, de los proyectos web.

Más información aquí, donde derivan a su vez a la WAI o al W3C: http://accesibilidadweb.dlsi.ua.es/?menu=definicion

Resumiendo, que sí que es muy importante la Accesibilidad Web, el diseño sensible al dispositivo y diseñar tu web pensando en los usuarios que nos visitan desde un móvil. Pensemos en que los robots de Google, o de cualquier otro buscador, necesitan que tu web sea accesible. Estos robots son entes ciegos, algunos tienen serias limitaciones de software, quizá no pueden ejecutar ciertas tecnologías como Javascript. Algo parecido a como puede pasar con los visitantes de un móvil de gama baja, con ordenadores antiguos, o con usuarios con velocidades de conexión lentas.

Muchas de estas restricciones las tenemos en los dispositivos móviles. Y si a esto le sumamos que cada día más personas andamos movilizados, ya tenemos un cóctel explosivo si es que todavía no nos hemos esforzado en esto.

Estado actual de las visitas desde móvil

No lo digo yo, sino que los creadores de la web, la WAI o el W3C llevan tiempo previniendo. Sino que Google lleva tiempo también dándole cada vez más importancia. Dejo aquí un par de ejemplos de cómo van aumentando las visitas desde dispositivos móviles. Primero mes a mes en un proyecto, quizá es por el verano que la gente usa más el móvil..

Usuarios por dispositivo mes a mes

Aquí es donde tuve más curiosidad. ¿Sólo será por el verano? Así que miré que pasaba con respecto al año pasado..

Usuarios por dispositivo mes a mes año pasado

Es un poco alarmante cómo van creciendo las visitas desde móvil, aunque ya ha sido anunciado a voces. Menos mal que tenemos el proyecto hecho con un diseño con Bootstrap 😉 A partir de aquí lo siguiente es ya pensar en que todos los visitantes son dispositivos móviles y exprimir nuestro proyecto haciendo los ajustes necesarios. Hazlo que seguro que merece la pena..

Haciendo unos ajustes en Bootstrap con SASS y LESS

Después de toda la teoría, más de un buen maquetador me había recomendado usar SASS y LESS. Así que ya voy a ir al grano para presentar estas tecnologías y cómo configurar un entorno de trabajo con Atom Editor y así ser más productivos en nuestro desarrollo mobile-first.

SASS y LESS son preprocesadores de hojas de estilo. Con estas tecnologías podemos simplificar la construcción de hojas de estilo CSS. Así, podemos añadir variables, funciones, anidar selectores de estilos.. siendo más productivos y teniendo un proyecto más mantenible a la larga. La idea es construir unos pocos ficheros, que se procesan, y generan el estilo resultante.

En Atom Editor tenemos dos auto-compiladores que funcionan muy bien, comprobado 😉 son el llamado sass-autocompile y el less-autocompile. No hay más que ir a la sección de instalación de paquetes de nuestro Atom Editor, buscar e instalar.

Atom Editor SASS autocompiling

Como se puede ver en la imagen, se puede descargar una versión de Bootstrap preparada para usar SASS. Todos los ficheros tienen la extensión .scss porque son de SASS. Así que con un fichero styles.scss podemos reprocesar nuestro Bootstap para modificar el thema propio. En el momento en que se graba el fichero styles.scss, Atom Editor detectará que es un fichero .scss que procesar, y automáticamente generará el fichero styles.min.css listo para incluir en el HTML. En el fichero styles.scss de SASS, lo que tenemos es que, se modifican algunas cosas de los estilos de Bootstrap y a su vez se importan. Es decir, que todos los estilos estarán incluidos en una sola hoja de estilos, y finalmente el navegador sólo tendrá que descargarse un único fichero .css con todo unificado y comprimido.

Lo mismo funciona para LESS, es la misma idea, aunque la sintaxis es distinta. Algunos recomiendan SASS para los principiantes, pero realmente con la documentación a mano no veo ningún inconveniente a trabajar con LESS.

Unos enlaces relacionados

No debería de dejar enlaces, porque puede que te vayas de la web. Pero el objetivo de este post es echar un cable, así que ahí van xD

http://getbootstrap.com/
http://sass-lang.com/
http://lesscss.org/
https://atom.io/
https://atom.io/packages/sass-autocompile
https://atom.io/packages/less-autocompile

Si estás empezando un nuevo proyecto, te pueden ser interesantes un par de webs con temas desarrollados en Bootstrap:

https://bootswatch.com/
https://startbootstrap.com/

Terminando

Poder definir variables, anidar estilos, etc.. le da mucha potencia a la maquetación. Si a esto le añadimos lo que comentaba al principio, pensando en los dispositivos móviles, podemos ajustar nuestra plantilla, para que sea lo más accesible desde cualquier tipo de dispositivo..


WordPress: desarrollar tu propio tema personalizado 100% tuyo

2016-09-24 - Categorías: General / PHP / WordPress
WP Bootstrap Boostwatch Cyborg

¡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.

Continuar leyendo..

WordPress: desarrollar tu propio tema personalizado

2016-09-11 - Categorías: General / SEO / WordPress
WP child themes

¡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.

Continuar leyendo..

Atom Editor, ¡brutalmente sencillo y potente!

2015-08-26 - Categorías: General

Hola de nuevo, ya estoy trasteando con un nuevo editor de código fuente que hace poco ya alcanzó la versión de producción 1 y está en el momento en que escribo en la versión 1.0.7. Estoy hablando del Atom Editor, un editor de códigos fuentes ligero, rápido, con todo tipo de plugins.. como dicen en su web: un editor hackeable del siglo 21. Es sencillo a más no poder, pero a la vez se puede mejorar instalando paquetes y pieles, que lo convierten en una potente herramienta.

Como punto de entrada me sorprendió no recuerdo donde que leí que estaba hecho en HTML, CSS y Javascript. Ya sólo esto me sorprendió así que hace un par de meses decidí instalarlo y probarlo. No probé demasiado bien, pero ahora que ya ha alcanzado cierta madurez lo he probado bien durante una semana y estos son los resultados.

Características

Al estilo Sublime Text o tipo Eclipse con un estilo ‘dark’ resulta agradable ya la primera impresión. Tus ojos descansan con colores suaves mientras lees los códigos. Como es un proyectos de Github, trae integrada la detección de cambios Git del repositorio que estés viendo. Rápido como él sólo, arranca bien, abre las ventanas rápido con un ‘click’ cada archivo. Explorador de archivos integrado. Opción de abrir un directorio, un sólo archivo, varios proyectos en la misma ventana, o varias ventanas con distintos archivos o proyectos. Puedes abrir todo tipo de archivos de texto. También imágenes, que en mi caso el poder ver las imágenes en el propio editor se agradece. Se pueden dividir las ventanas en paneles para poner en cada uno un archivo según necesitemos.

Cuando empecemos a instalar paquetes para nuestras necesidades es cuando nos daremos cuenta de lo potente que es. La comunidad está desarrollando gran cantidad de ellos para todo o casi todo lo que he buscado. En mi caso, el hacer webs usando un editor de código que en sí mismo está hecho como una web me impresiona. Le he puesto el autocompletado para los lenguajes que uso, el resaltador de error de sintáxis, el famoso minimapa y otros plugins.

Lo tenemos disponible para Linux, Mac, FreeBSD y Windows.

Aquí la web: https://atom.io/

Los packages

Cuando digo packages, aquí es lo mismo que los plugins de WordPress, los complementos de Firefox, o las aplicaciones de un sistema operativo. Pues aquí se llaman packages, que son lo que completan con infinidad de funcionalidades este fenómeno editor. En mi caso, estoy probando y me quedo con los siguientes:

  • atom-autocomplete-php: para autocompletar rápidamente en proyectos basados en Composer.
  • atom-beautify: pone bonito el código identándolo, poniendo espacios o quitándolos donde debe, etc. Si tienes instalado php-cs-fixer te formatea el código según el estándar PSR.
  • autocomplete-plus: es básico para que otros paquetes de autocompletado funcionen.
  • php-twig: compatibilidad con Twig, muestra mensajes emergentes con sugerencias también.
  • php-getters-setters: como su nombre indica, genera los getters y setters de una clase PHP.
  • minimap: este me gusta mucho porque te visualiza una ventana lateral con todo el código fuente en miniatura con el que te puedes mover por un archivo.
  • linter y linter-php: analiza el código mostrando menús emergentes, errores sintácticos, etc. Muy bueno, imprescindible.
  • docblockr: genera comentarios automáticamente según escribes en las cabeceras de clases o funciones.
  • custom-title: con el que puedes configurar los títulos de la ventana mostrando, por ejemplo, el nombre del proyecto, la rama y la ruta completa al archivo. Muy configurable y útil para saber donde estás.
  • git-plus: para hacer tareas de Git dentro del editor. En mi caso, en Linux, pulsando Ctrl+Shift+H se me despliegan los comandos disponibles.

Veo brutalmente buenos estos packages, ya cada uno que busque los suyos. Tenemos disponibles 2602 en la fecha en que escribo esto según pone en:

https://atom.io/packages

¡Hay que probarlo que es una joya de la informática!
Un saludo.


Instalar Bower en Ubuntu

2014-11-02 - Categorías: General

¡Buenos días!

Estoy escribiendo poco últimamente sobre programación. No me he olvidado del blog, es que gracias a Dios estoy teniendo menos tiempo. No está la cosa para echar cohetes acá en Spain pero voy a intentar apretar y no abandonar en las buenas costumbres, como por ejemplo, escribir en un blog 😉

Para instalar Bower tuve que navegar para encontrar dispersa alguna información, así que aquí les dejo todo junto en un post.

Qué es

Bower es una excelente herramienta para automatizar la gestión de tus librerías. Está creada para gestionar los fuentes de la parte front-end. Es decir, Bower nos descarga y actualiza las librerías de entorno cliente: CSS, HTML y Javascript que necesitemos. Puede ser por ejemplo las librerías de Bootstrap o jQuery.

Instalar

Necesitaremos tener instalado:

  • Git
  • npm
  • nodejs

La web oficial es: http://bower.io/

Los comandos para instalar son los siguientes:

$ sudo apt-get update
$ sudo apt-get install git
$ sudo apt-get install npm
$ sudo apt-get install nodejs
$ sudo npm install -g bower

Llegados a éste punto si ejecutamos ‘bower update’ nos saldrá un error porque no encuentra ‘node’. Ésto pasa porque el ejecutable en Ubuntu no es node es nodejs y no lo encuentra. Así que creamos un enlace simbólico y asunto solucionado.

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

Ejecutar

Ya teniendolo instalado nos falta una configuración sencilla en dos ficheros. Primero un bower.json donde elegimos qué librerías necesitamos:

{
«name»: «Nombre del proyecto»,
«version»: «1.0.0»,
«dependencies»: {
«jquery»: «latest»,
«jquery-ui»: «latest»,
«bootstrap» : «latest»,
«font-awesome»: «latest»
}
}

Si ponemos en la versión de cada dependencia latest siempre nos descargará o actualizará a la última versión de la librería. Segundo para configurar en qué directorio queremos todo podemos crear un fichero .bowerrc

{
«directory»: «lib»,
«json»: «bower.json»,
«searchpath»: [
«https://bower.herokuapp.com»
]
}

Ahora todas las librerías las tendremos bajo el directorio /lib cuando ejecutemos lo siguiente:

$ bower update

Para terminar de incluir todas éstas librerías en un fichero HTML y usarlas podemos poner un HEAD parecido al siguiente:

<head>
<title>Título de la web</title>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» href=»lib/bootstrap/dist/css/bootstrap.min.css» type=»text/css»>
<link rel=»stylesheet» href=»lib/font-awesome/css/font-awesome.min.css» type=»text/css»>
<script src=»lib/jquery/dist/jquery.min.js»></script>
<script src=»lib/jquery-ui/jquery-ui.min.js»></script>
<script src=»lib/bootstrap/dist/js/bootstrap.min.js»></script>
<script src=»main.js»></script>
<link rel=»stylesheet» href=»estilo.css» type=»text/css»>
</head>

Ya podemos empezar a maquetar y programar usando jQuery, jQuery-UI, Bootstrap y las Fuentes Asombrosas. No hemos tenido que ir web a web descargando todas las librerías una a una. Además si ahora ejecutas en cualquier momento ‘bower update’ se te actualizarán las librerías a la última versión.

Si has llegado hasta aquí espero que te estén sirviendo de ayuda.

Un saludo 🙂


Probando Bootstrap 3

2014-02-17 - Categorías: General

Cada vez menos ordenadores de sobremesa visitan las páginas web. Se venden ingentes cantidades de dispositivos que no son los clásicos ordenadores como tablets, smartphones, smart TV.. Los visitantes de una web necesitan que la página sea compatible con todo tipo de dispositivos. Bootstrap de Twitter está muy de moda, a fecha de hoy van por la versión 3.1.1 así que aprovechando para ponerme al día les dejo éste post. Al grano..

Bootstrap de Twitter es un framework de desarrollo para hacer aplicaciones web compatibles con todo tipo de dispositivos. El modelo de desarrollo cambia totalmente al modo habitual porque se da preferencia a los dispositivos móviles siendo su adaptación primera, antes que para escritorios de ordenador. Para verlo claro más abajo veremos cómo el mismo menú en caso de tener una pantalla ancha se verá en horizontal como en la imagen de arriba. Si tenemos una pantalla estrecha se visualizará desplegándose hacia abajo para que quepa todo.
Lo mismo sucede con el resto de las páginas diseñadas con Bootstrap, se adaptan según cambia el tamaño del navegador. Así tendremos una web que se puede ver correctamente en cualquier dispositivo.

Esbozando la web

Para que sea lo máximo posible compatible necesitamos utilizar el estándar HTML5 con lo que la primera estructura quedará así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Probando Bootstrap Twitter</title>

</head>
<body>

</body>
</html>
Es importante saber que con la metaetiqueta «viewport» definimos la escala inicial de la página. Ésto se utiliza para agrandar o disminuir con la función de zoom de los navegadores.

Añadiendo los archivos externos

Prefiero descagar los archivos de las páginas oficiales (getbootstrap.com) y usarlos dentro del proyecto en cuestión. Pero para simplificar ésta primera plantilla he puesto los CDN. Será necesario tener conexión a Internet para ejecutar la web y se vean el aspecto estilo Bootstrap. Si los incluyes dichos archivos no será necesario Internet. Añadimos dentro del <head> lo siguiente:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https:///netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Ésto simplemente enlaza a los archivos públicos que tenemos en Internet. Te ahorras espacio usando los CDN, pero dependes de que dichos archivos estén disponibles para que tu web funcione correctamente.

Algunos componentes para probar

A continuación he puesto un menú de navegación y tres paneles, uno simple, otro con título y un tercero con título con estilo de cabecera. Añadiendo en el body lo siguiente tendremos la barra de navegación que viene en la documentación oficial:
        <nav class="navbar navbar-default" role="navigation">
<!-- El logotipo y el
icono
que despliega el menú se
agrupan
para mostrarlos mejor en
los
dispositivos móviles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logotipo</a>
</div>

<!-- Agrupar los enlaces
de
navegación, los
formularios y
cualquier
otro elemento que se
pueda
ocultar al minimizar la
barra
-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Enlace #1</a>
</li>
<li>
<a href="#">Enlace #2</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #1 <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>
<a href="#">Acción #1</a>
</li>
<li>
<a href="#">Acción #2</a>
</li>
<li>
<a href="#">Acción #3</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Acción #4</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Acción #5</a>
</li>
</ul>
</li>
</ul>

<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar">
</div>
<button type="submit" class="btn btn-default">
Enviar
</button>
</form>

<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Enlace #3</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #2 <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>
<a href="#">Acción #1</a>
</li>
<li>
<a href="#">Acción #2</a>
</li>
<li>
<a href="#">Acción #3</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Acción #4</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Incluyendo dentro del body también lo siguiente tenemos los tres paneles citados:
        <div class="container">
<div class="panel panel-default">
<div class="panel-body">

<h1>¡Hola Mundo!</h1>

</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
¡Hola Mundo!
</div>
<div class="panel-body">
Contenido del panel
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">¡Hola Mundo!</h2>
</div>
<div class="panel-body">
Contenido del panel
</div>
</div>
</div>
Nota que los paneles están dentro de un <div class=»container»>. Éste div contenedor se suele usar para el contenido de la web, alinea lo que tengas dentro, para algunos componentes es necesario si no puede que no se vean bien.

Ahora es el momento de probar con un móvil el fichero, o con una tablet. Si quieres verlo claro directamente en el ordenador puedes estrechar horizontalmente el navegador con la página cargada y verás cómo se modifica el aspecto.

Usando archivos incluidos en el proyecto

Si descargamos y descomprimimos los archivos de la página oficial getbootrap.com, tendremos tres directorios con todos los archivos necesarios menos jQuery. jQuery lo podemos descargar de su página oficial http://code.jquery.com/jquery-2.1.0.min.js y copiarlo al directorio js. Ahora tendremos un directorio /css otro /fonts y un tercero /js con todo incluido. En éste caso viendo los archivos que tengamos según la versión podremos incluir en la cabecera el código siguiente:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Mira que las rutas relativas a los archivos sean correctas y que dichos archivos estén en su sitio, sino no funcionará.

Resumiendo

Entonces el archivo completo de pruebas con los archivos necesarios incluidos en el directorio del proyecto quedará tal que así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Probando Bootstrap Twitter</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
<!-- El logotipo y el
icono
que despliega el menú se
agrupan
para mostrarlos mejor en
los
dispositivos móviles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logotipo</a>
</div>

<!-- Agrupar los enlaces
de
navegación, los
formularios y
cualquier
otro elemento que se
pueda
ocultar al minimizar la
barra
-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Enlace #1</a>
</li>
<li>
<a href="#">Enlace #2</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #1 <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>
<a href="#">Acción #1</a>
</li>
<li>
<a href="#">Acción #2</a>
</li>
<li>
<a href="#">Acción #3</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Acción #4</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Acción #5</a>
</li>
</ul>
</li>
</ul>

<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar">
</div>
<button type="submit" class="btn btn-default">
Enviar
</button>
</form>

<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Enlace #3</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #2 <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>
<a href="#">Acción #1</a>
</li>
<li>
<a href="#">Acción #2</a>
</li>
<li>
<a href="#">Acción #3</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Acción #4</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>

<div class="container">
<div class="panel panel-default">
<div class="panel-body">

<h1>¡Hola Mundo!</h1>

</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
¡Hola Mundo!
</div>
<div class="panel-body">
Contenido del panel
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">¡Hola Mundo!</h2>
</div>
<div class="panel-body">
Contenido del panel
</div>
</div>
</div>

</body>
</html>
Si todo ha ido bien debemos de ver la página como la de la imagen de al lado cuando hacemos la ventana del navegador estrecha. Espero haber resumido correctamente la documentación oficial como para poder empezar a jugar con el framework Bootstrap.

Sólo me queda decir que los ejemplos de componentes que he puesto los he sacado de la documentación oficial, en ella estan todos los que hay disponibles. Como por ejemplo el uso de rejillas, las fuentes para los pequeños gráficos incluidos, y un largo etcétera..

Saludos!


Cómo hacer una plantilla para Joomla

2012-10-21 - Categorías: General

Hablando sobre la creación de páginas web con CMSs. Podemos llegar a ver que la cantidad de CMSs que hay para poner en marcha una web sin programar nada de código fuente es muy grande. He visto que los principales vienen siendo WordPress, Drupal y Joomla. Y en orden de gente que los usa, Joomla viene ganando, o por lo menos eso es lo que he leido en varias páginas de habla hispana y a fecha de hoy.

Me decidí a aprender Joomla en un principio, pero acabé probando WordPress y Drupal también. El Joomla para el que va éste post es la versión 2.5 y tal vez sirva también para los de la 1.5 y en futuro. Yo de momento la versión que tengo instalada es la 2.5 y es la que he usado para escribir éste tutorial.

Vamos a comenzar por ver la estructura en líneas generales de Joomla, si vamos al directorio, por los nombres podremos hacernos una idea de que la carpeta templates/ (plantillas en castellano) es la carpeta en cuestión que nos interesa.

administrator/
cache/
cli/
components/
images/
includes/
language/
libraries/
logs/
media/
modules/
plugins/
templates/
tmp/
uploads/
configuration.php
favicon.ico
htaccess.txt
index.php
LICENSE.txt
README.txt
robots.txt
web.config.txt

Dentro de la carpeta tenemos las carpetas correspondientes a todas las plantillas que tenga instaladas nuestro Joomla. Podemos editarlas directaremente de aquí, o a través del administrador de Joomla, actualizamos la página y los cambios se verán.

La plantilla ‘atomic’ es una plantilla básica, sin muchas florituras, para que hagamos a partir de ella, la nuestra propia. Pero mirando los archivos que la componen podemos ver que hay demasiado código fuente si es que estas haciendo tu primera plantilla, así que vamos a crear otra más simple todavía y luego le podrás añadir todo lo que quieras.

La plantilla básica ‘atomic’ que proporciona Joomla tiene la siguiente estructura:

css/      <- aquí van las hojas de estilo
html/    <- páginas html peladas
images/     <- imágenes de la plantilla

js/      <- scripts de javascript

language/     <- archivos para las traducciones
component.php   <- para mostrar el contenido de los componentes
error.php    <- página de error
favicon.ico   <- el icono de la web
index.html    <- el index en html
index.php    <- el index en php
template_preview.png    <- vista previa de la plantilla
template_thumbnail.png    <- imagen pequeña de la vista previa
templateDetails.xml      <- descripción de la plantilla, para uso interno

Hay plantillas muy grandes, con muchos añadidos, pero ésta que suponemos básica vamos a reducirla de la manera siguiente. Sólo necesitamos lo siguiente para nuestra nueva plantilla:

css/      
favicon.ico   
index.php   
template_preview.png  
template_thumbnail.png  
templateDetails.xml    

Todo ésto lo creamos en una carpeta nueva, yo la he llamado mynew/ dentro de la carpeta templates/ 
Y dentro de la carpeta css/ vamos a crear un archivo llamado ‘template.css’ para hacer la presentación mediante CSS. No se recomienda poner la estructura de una página web mediante tablas ni directamente formateando el archivo index.php. Ésto es porque no todos los navegadores interpretan exactamente igual las etiquetas HTML, sin embargo mediante CSS tenemos un control mucho mejor, afinando incluso pixel a pixel las posiciones y tamaños de todo. Así que vamos con esto y veremos que simple va a quedar y se va a entender cómo funciona todo.
El archivo index.php de ejemplo que vamos a usar es:
<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?>
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
  «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» 
   xml:lang=»<?php echo $this->language; ?>» lang=»<?php echo $this->language; ?>» >
<head>
<jdoc:include type=»head» />
<link rel=»stylesheet» href=»<?php echo $this->baseurl ?>/templates/mynew/css/template.css» type=»text/css» />
</head>
<body>

<div id=»arriba»><jdoc:include type=»modules» name=»arriba» /></div>
<div id=»izquierda»><jdoc:include type=»modules» name=»izquierda» /></div>
<div id=»derecha»><jdoc:include type=»modules» name=»derecha» /></div>
<div id=»contenido»><jdoc:include type=»component» /></div>
<div id=»abajo»><jdoc:include type=»modules» name=»abajo» /></div>

</body>
</html>
No voy a explicar en éste minitutorial cómo se maqueta con CSS porque es muy extenso. La idea es que hay que poner todo con DIVs y esos DIVs se posicionan en el navegador mediante el archivo CSS que luego veremos.
Si queremos usar un archivo desde el index.php debemos usar la instrucción PHP: <?php echo $this->baseurl ?> como se usa en el ejemplo anterior, por ejemplo, para incluir el archivo template.css
Las posiciones vienen definidas por: <jdoc:include type=»modules» name=»nombrePosicion» /> y podemos poner tantas posiciones como queramos.
La posición principal que va a mostrar el contenido viene definida por: <jdoc:include type=»component» /> que sólo la vamos a poner una vez.
Ahora nos queda hacer el CSS y el templateDetails.xml. El favicon.ico y los archivos PNG, son imágenes, el favicon es el icono que sale en el navegador cuando alguien nos visita en la página, y los archivos PNG son los vistas previas, en grande y pequeño, que muestra Joomla dentro del gestor de plantillas. Así que seguimos con el CSS (hoja de estilo para los amigos) llamado ‘template.css‘, por ejemplo ponemos:
#arriba {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 30px;
  background-color: blue;
}
#izquierda {
  position: fixed;
  left: 0px;
  top: 30px;
  width: 100px;
  height: 100%;
  background-color: green;
}
#derecha {
  position: fixed;
  right: 0px;
  top: 30px;
  width: 100px;
  height: 100%;
  background-color: red;
}
#contenido {
  margin: 40px 110px 40px 110px;
  background-color: grey;
}
#abajo{
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 30px;
  background-color: blue;
}
El archivo templateDetails.xml es el archivo que define todo lo que necesita Joomla para poner las cosas en las posiciones en concreto y los contenidos. Un ejemplo para mi plantilla que he hecho llamada ‘mynew’ es:
<?xml version=»1.0″ encoding=»utf-8″?>
<extension version=»1.6″ type=»template»>
<name>mynew</name>
<creationDate>2012-10-21</creationDate>
<author>Yo mismo</author>
<authorEmail>Aquí v@ tu email .com</authorEmail>
<authorUrl>http://elblogdejnj.blogspot.com</authorUrl>
<copyright>http://elblogdejnj.blogspot.com 2012</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>My New</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>favicon.ico</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<folder>css</folder>
</files>
<positions>
<position>arriba</position>
<position>izquierda</position>
<position>derecha</position>
<position>abajo</position>
<position>contenido</position>
</positions>
</extension>

Llegado éste punto, acabamos de crear la nueva carpeta dentro de templates/ y hemos puesto todos estos archivos. Ahora resulta que tal cual Joomla no ve la plantilla dentro del administrador de plantillas. Podemos ir al Gestor de Extensiones y darle a Encontrar, con lo que Joomla buscará todo lo que hayamos puesto manualmente sin usar el instalador de Joomla. Ahora ya veremos la nueva plantilla en el Gestor de Plantillas, la ponemos como plantilla del sitio y nuestro sitio tendrá la apariencia que acabamos de hacer.

Ahora podemos editar éstos archivos directamente, añadirles imágenes, cambiar la hoja de estilos CSS, las posiciones, etc.. y sólo con refrescar la página veremos los cambios.

Otra opción para usar ésta plantilla, es comprimir el directorio donde está, y después instalarlo con el gestor de extensiones. Es decir, en el ejemplo anterior, hemos creado el directorio mynew/ dentro de templates/, comprimimos el directorio mynew/ con todos los archivos que hemos puesto y nos quedará, en éste caso, el archivo mynew.zip con toda la plantilla. Éste archivo comprimido es el que usamos en el gestor de extensiones para instalar la plantilla.

Para terminar, si todo ha ido bien, entonces tenemos que ver algo parecido a lo siguiente en nuestro navegador:

Sólo queda poner en cada posición los módulos que queramos usando Joomla. En las posiciones ahora tendremos: arriba, izquierda, derecha, contenido y abajo; que son los valores que hemos usado en el index.php y hemos puesto también en el ‘templateDetails.xml’. Ahora todo es imaginación y con buena documentación sobre CSS podremos hacer que nuestra página con Joomla tenga una apariencia única, totalmente personalizada, con efectos 3D o cualquier otra cosa que se pueda hacer con HTML, Javascript, CSS, etcétera…

Ésto es todo un mundo, las plantillas, los editores de plantillas, maquetación, etcétera… hay mucha información por Internet. Espero que haya servido.

Un saludo.
Hasta la próxima

© 2021 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.