viernes, 5 de diciembre de 2014

Controlador respondiendo a parámetros para Query

Extracto

Controlador averigua si existe una tabla; si no existe, la crea e introduce datos de prueba; para, posteriormente, responder con datos dinámicos pasados como parámetro desde la URL.

Abreviaturas usadas

  • MVC, paradigma Modelo Vista Controlador
  • CI, CodeIgniter

Descripción

A través del grupo Code Igniter PHP Framework ESPAÑOL, al cual pertenezco, un miembro me pide ayuda por privado. Tras dos días de, materialmente, no poder atender su solicitud por falta de tiempo me pongo en contacto con él para indicarle que haría esta entrada.

Esta entrada es mejorable en cuanto a la pureza del MVC porque en esta entrada de blog no me atengo a ella, ya que no uso, como vistas dinámicas, ni un modelo. Sirva la excusa del tiempo que no tengo.

Archivo .htaccess


archivo /config/database.php


archivo /controllers/parametro.php

Ejecución

  1. Asegúrate que tu instalación de CodeIgniter esté funcionando.
  2. Copia a sus respectivos directorios los archivos /config/database.php y /controllers/parametro.php.
  3. Copia el archivo .htaccess a la raiz de tu instalación de CI.
  4. Dirígete a tu ubicación así http://miservidor/parametro.
  5. Comprueba que la tabla parametro existe y tiene datos
  6. Ejecuta la dirección http://miservidor/parametro/autor/pedro
  7. comprueba que recibes datos dinámicos
  8.  http://miservidor/parametro/autor/antonio
  9. ejecuta el paso 7 otra vez.

Epílogo

Espero que os sirva de ayuda. En cualquier caso estaré encantado de poder atender vuestros comentarios. Tampoco estaría mal que hiciérais +1... ;-)

jueves, 27 de noviembre de 2014

BootStrap, diseño adaptable

Extracto

Los media queries permiten la personalización de la presentación basada en un número de condiciones, tales como proporciones, anchos, tipos de diseño, etcétera. Trabajar con Bootstrap permite la definción del comportamiento de nuestras distintas presentaciones para distintos medios.


Abreviaturas usadas

  • Píxel, píxeles (px)
  • Bootstrap (BS)

Dispositivos soportados

EtiquetaAncho de plantillaAncho de columnaAncho de separación
Smartphones480px e inferioresColumnas fluidas, sin ancho fijo
Smartphones a Tablets767px e inferioresColumnas fluidas, sin ancho fijo
Tablets (horizontal)768px y superiores42px20px
Default980px and up60px20px
Pantallas anchas1200px y superiores70px30px

Clases de soporte

Aquí se ve una tabla de las clases que incluimos y su efecto en un diseño media query dado (etiquetado por dispositivo). Se pueden encontrar en responsive.less.
ClaseSmartphones480px and belowTablets767px and belowDesktops768px and above
.visible-phoneVisible
.visible-tabletVisible
.visible-desktopVisible
.hidden-phoneVisibleVisible
.hidden-tabletVisibleVisible
.hidden-desktopVisibleVisible

Etiqueta META requerida

Para asegurar que los dipositivos muestran las páginas adecuadamente, incluye el viewport de etiqueta meta así:



A la hora de trabajar...

BS no incluye automáticamente estos media queries, pero entenderlos y añadirlos es muy fácil. Tienes un par de opciones para incluir las características  adaptables de BS:
  1. Usa la versión compilada receptiva bootstrap-responsive.css
  2. Añade @import "responsive.less" y recompila BS.
  3. Modifica y y recompila responsive.less como un archivo separado.
Leo en el manual de BS que por diseño y optimización piensan que todo no debe ser responsive, esa es la causa por la que no lo incluyeron desde el inicio.


viernes, 21 de noviembre de 2014

Bootstrap explicación del sistema Grid

Extracto

Bootstrap se construye sobre una estructura de 12 columnas virtuales. Estas columnas son adaptables. Además existe la posibilidad de trabajar con anchos fijos y fluidos basados en este sistema. Igualmente existen opciones para convertir nuestro HTML para distintos soportes.

Abreviaturas usadas

  • Bootstrap (BS)
  • Píxel (px)


Sistema Grid


BS proporciona un sistema de 12 columnas con un ancho total de 940px de ancho. Nosotros podemos repartir estas columnas a nuestra conveniencia, por ejemplo:
  • 12 columnas de 1.
  • 4 columnas de 3.
  • 3 columnas de 4.
  • 2 columnas de 6.
  • 1 columna de 12.
  • 1 columna de ocho y otra columna de 4.
  • etcétera...
Como comprobarás siempre suman doce, vamos a crear un grid con dos columnas 1 de cuatro y otra de ocho.


Columnas de compensación


Siempre con la mente en 12 columnas, podemos "compensar" columnas, es decir, dejar espacios en blanco entre las columnas a nuestra voluntad y dependiendo de las necesidades de nuestro diseño. Vamos a crear cuatro columnas, cuatro vacías y otras cuatro columnas.


Columnas Fluídas


Basado en porcentajes, no en píxeles, el funcionamiento y concepto es similar, si bien el class del div es "row-fluid". Esto permite asegurar las proporciones adecuadas cuando cambiamos de dispositivo. Me refiero a que nuestra página sea consultada por smartphones, tablets, ordenadores... etc.


Anidamiento de columnas


Esto nos permite dividir una columna (del ancho que tú elijas) en varias columnas a tu criterio. Una curiosidad: el número de columnas anidadas no es necesario que coincida con el nivel superior, en su lugar tus columnas hijas se reajustarán al 100% de su columna contenedora o columna padre. No obstante eso lo desaconsejo porque dificulta la comprensión del grid. Veamos un ejemplo:


Personalización del grid


Existe un archivo llamado variables.less donde las siguientes variables afectan a tus diseños.

  1. @gridColumns, número de columnas, valor por defecto 12.
  2. @gridColumWidth, ancho de cada columna, valor por defecto 60px.
  3. @gridGutterWidth, espacio vacío entre columnas, valor por defecto 20px.
  4. @SiteWidth, cuenta el número de columnas y espacios para poner en ancho correcto, valor por defecto, la suma de todas las columnas y espacios entre éstas.

Plantillas

Plantilla fija

El ancho predeterminado es 940px para cualquier página web proporcionada


Plantilla Fluída

Permite una estructura de página flexible, con anchos mínimos y máximos y una barra a la izquierda. Ideal para aplicaciones documentales.

miércoles, 19 de noviembre de 2014

CodeIgniter de un vistazo

Extracto

Ver algunas de las funcionalidades de CodeIgniter junto con sus características principales.

CodeIgniter es un framework de aplicación


CI es un conjunto de herramientas para construir aplicaciones web usando PHP. Su objetivo es permitir desarrollar proyectos más rápido de lo que lo harías si empezaras de cero. CI provee un rico conjunto de librerías para las tareas más comunes, como también, una interfaz y estructura lógica para acceder sin limitaciones a esas librerías. CI te permite focalizar tu esfuerzo en el desarrollo de tu aplicación minimizando el código necesario para ello. CI es libre y publicado bajo la licencia Apache/BSD-style de Código Abierto, por lo que puedes usarlo dónde y para lo que te plazca.

CodeIgniter es Ligero


Realmente ligero. El core requiere sólo un par de pequeñas librerías. Esto contrasta con otros frameworks que necesitan significativamente más recursos. Adicionalmente las librerías son cargadas dinámicamente según requerimiento, basado en tus necesidades y dependiendo de tus procesos. En su web retan a encontrar otro framework más rápido... Aunque yo no quiero entrar en eso.

CodeIgniter usa el modelo M-V-C 


CI usa el enfoque Modelo-Vista-Controlador, que permite una auténtica y verdadera separación entre la lógica de nuestra aplicación y su presentación. Esto es especialmente importante para proyectos que son acometidos entre desarrolladores y diseñadores. Más adelante describiré Modelo-Vista-Controlador con todo lujo de detalles.


CodeIgniter genera URL limpias (amigables)


Las URLs generadas por CI son limpias y amigables para los motores de búsqueda. Mejor dicho, usa el estándard "query string" para la sintaxis de su URL y sus procesos simétricos en el sistema.

Por ejemplo:


Paquetes de una sola tacada


CI viene con una importante cantidad de librerías, que son comúnmente necesarias, como abstracción de acceso a bases de datos, envío de mails, validación de formularios, mantenimiento de sesiones, manipulación de imágenes, trabajo con datos XML-RPC y más...


CodeIgniter es extensible


El sistema es fácilmente extensible por el programador para usar sus propias librerías. Trataremos esto más adelante.

CodeIgniter no requiere un motor de plantillas


Aunque CI trae un sistema de plantillas para la interpretación de variables y bucles, el framework no te fuerza a usarlas. Haciendo que las vistas sean a su vez ficheros php y aprovechando la potencia de todo el lenguaje. Generalmente esto no es necesario ya que podemos afirmar que con la correcta arquitectura de programación PHP ya viene de fábrica con su propio motor de plantillas. Como veremos más adelante.
Por ejemplo:



y compáralo con

Instalación de CodeIgniter

Extracto


CodeIgniter es un fantástico framework PHP para el desarrollo de aplicaciones sobre tecnología web. Permite desarrollar mucho más rápido nuestros proyectos proporcionándote un entorno de trabajo muy probado y aportando un soporte que preferirás al empezar tú todo desde cero.
  • Su ejecución es excepcionalmente rápida.
  • Áltamente configurable.
  • No requiere que uses la línea de comandos.
  • No tienes por qué aprender un lenguaje de plantillas (aunque está disponible si así lo deseas).
  • Evitas la complejidad ofreciendo soluciones simples y modulares a problemas más complejos que se irán ensamblando con su clara arquitectura.

Historia, pero muy rápidamente


CodeIgniter ha sido propiedad de EllisLab que abandonó el desarrollo del proyecto por tenerlo ya amortizado. Ahora el proyecto de desarrollo está en manos de British Columbia Institute of Technology, quien está en fase de desarrollo de la versión 3.x, a la que no acudiré hasta que se dé por terminada esta release.

Descarga de la versión 2.2.0 (estable)


Esta es la actual versión estable del framework. La primera 2.x fue publicada en enero de 2011, sufrió una importante actualización en otoño de 2011 y será abandonada por parte de EllisLab en julio de 2014, pero como he comentado en la historia toma el testigo la BCIT.

Instalación

  1. Desempaqueta el archivo zip. Si tu servidor te permite mediante el panel de control desempaquetar archivos zip, no lo desempaquetes, lo subes a tu servidor comprimido y lo descomprimes en tu carpeta remota.
  2. Sube los archivos y carpetas del contenido del zip a tu servidor o lo desempaquetas arriba como he descrito en el apartado anterior.
  3. Con un editor de textos abre el archivo application/config/config.php. Aquí pondremos la base URL, lo describo con más detalle más bajo.
  4. Si necesitas usar una base de datos, abre el archivo application/config/database.php con un editor de textos para la configuración de la base de datos. Lo describo con más detalle más abajo.

application/config/config.php


Muestro mi propio archivo de configuración. Más adelante explicaré la traducción a los distintos idiomas de momento me quedo con inglés.
Importante:
  • linea 17 base_url.
  • línea 227 encription_key. Te recomiendo que no la cambies una vez establecida.


application/config/database.php