Comparación

de Frameworks
LARAVEL, YII 2, CODEIGNITER

Gómez Pérez Hugo Porfirio

Hernández Navarrete José Carlos
Lagunes Gamboa Alberto Missael
ARQUITECTURA DE DESARROLLO WEB | INSTITUTO TECNOLOGICO DE VERACRUZ
Índice.
Framework......................................................................................................................... 3

Definición. ...................................................................................................................... 3

Patrón MVC y Model 2. .................................................................................................. 3

Tipos de framework Web................................................................................................ 4

Características. .............................................................................................................. 4

Laravel. .............................................................................................................................. 5

Instalación ...................................................................................................................... 5

Documentación .............................................................................................................. 6

Configuración ................................................................................................................. 7

Implementación de software de terceros ........................................................................ 8

Yii 2 ................................................................................................................................. 11

Comparado con otros frameworks. ............................................................................... 11

Instalación. ................................................................................................................... 12

Documentación. ........................................................................................................... 13

Configuración. .............................................................................................................. 15

Proyecto básico: ....................................................................................................... 15

Proyecto avanzado: .................................................................................................. 15

Implementación de software de terceros. ..................................................................... 15

Funcionalidad. .............................................................................................................. 15

Helpers......................................................................................................................... 16

Motores de plantillas. ................................................................................................... 16

Code Igniter ..................................................................................................................... 19

Ventajas de CodeIgniter ............................................................................................... 19

Comparado con otros frameworks. ............................................................................... 20

Instalación .................................................................................................................... 21

Documentación ............................................................................................................ 23

1
 Implementación de software en terceros ...................................................................... 24

CRUD en Code Igniter ................................................................................................. 24

CSS ................................................................................................................................. 30

¿Qué es CSS? ............................................................................................................. 30

¿Por qué usar CSS? .................................................................................................... 30

Ventajas y desventajas de CSS ................................................................................... 31

Sintaxis ........................................................................................................................ 32

Selectores................................................................................................................. 32

Bloque de declaraciones........................................................................................... 33

Uso ........................................................................................................................... 33

Fuentes .................................................................................................................... 35

Especificidad ............................................................................................................ 36

Herencia ................................................................................................................... 37

Espacios en blanco................................................................................................... 38

Posicionamiento ....................................................................................................... 38

Curva de aprendizaje. ...................................................................................................... 41

Productividad de los Framework. ..................................................................................... 41

Tamaño. .......................................................................................................................... 42

Velocidad. ........................................................................................................................ 42

Conclusiones. .................................................................................................................. 43

Yii 2. ............................................................................................................................. 43

Laravel. ........................................................................................................................ 43

CodeIgniter................................................................................................................... 43

2
Framework.
Definición.
El concepto framework se emplea en muchos ámbitos del desarrollo de sistemas software,
no solo en el ámbito de aplicaciones Web. Podemos encontrar frameworks para el
desarrollo de aplicaciones médicas, de visión por computador, para el desarrollo de juegos,
y para cualquier ámbito que pueda ocurrírsenos.

En general, con el término framework, nos estamos refiriendo a una estructura software
compuesta de componentes personalizables e intercambiables para el desarrollo de una
aplicación. En otras palabras, un framework se puede considerar como una aplicación
genérica incompleta y configurable a la que podemos añadirle las últimas piezas para
construir una aplicación concreta.

Los objetivos principales que persigue un framework son: acelerar el proceso de desarrollo,
reutilizar código ya existente y promover buenas prácticas de desarrollo como el uso de
patrones.

Un framework Web, por tanto, podemos definirlo como un conjunto de componentes (por
ejemplo, clases en java y descriptores y archivos de configuración en XML) que componen
un diseño reutilizable que facilita y agiliza el desarrollo de sistemas Web.

Patrón MVC y Model 2.

Para comprender como trabajan los frameworks Web existentes es imprescindible conocer
el patrón MVC.

MVC.
El patrón Modelo-Vista-Controlador es una guía para el diseño de arquitecturas de
aplicaciones que ofrezcan una fuerte interactividad con usuarios. Este patrón organiza la
aplicación en tres modelos separados, el primero es un modelo que representa los datos
de la aplicación y sus reglas de negocio, el segundo es un conjunto de vistas que representa
los formularios de entrada y salida de información, el tercero es un conjunto de
controladores que procesa las peticiones de los usuarios y controla el flujo de ejecución del
sistema.

Model 2.

3
La mayoría, por no decir todos, de los framewroks para Web implementan este patrón. Una
aplicación de este patrón en entornos Java para programación Web es lo que se conoce
con el nombre de arquitectura model 2.

Esta arquitectura consiste, a grandes rasgos, en la utilización de servlets para procesar las
peticiones (controladores) y páginas JSP para mostrar la interfaz de usuario (vistas),
implementando la parte del modelo mediante JavaBeans o POJOs

Tipos de framework Web.

Existen varios tipos de frameworks Web: orientados a la interfaz de usuario, como Java
Server Faces, orientados a aplicaciones de publicación de documentos, como Coocon,
orientados a la parte de control de eventos, como Struts y algunos que incluyen varios
elementos como Tapestry.

La mayoría de frameworks Web se encargan de ofrecer una capa de controladores de

acuerdo con el patrón MVC o con el modelo 2 de Servlets y JSP, ofreciendo mecanismos
para facilitar la integración con otras herramientas para la implementación de las capas de
negocio y presentación.

Características.
Abstracción de URLs y
sesiones.
Acceso de datos.
Controladores.
Autentificación y control de
acceso.
No es necesario manipular directamente las URLs ni las
sesiones, el framework ya se encarga de hacerlo.
Incluyen las herramientas e interfaces necesarias para
integrarse con herramientas de acceso a datos, en
BBDD, XML, etc..
La mayoría de frameworks implementa una serie de
controladores para gestionar eventos, como una
introducción de datos mediante un formulario o el
acceso a una página. Estos controladores suelen ser
fácilmente adaptables a las necesidades de un proyecto
concreto.
Incluyen mecanismos para la identificación de usuarios
mediante login y password y permiten restringir el
acceso a determinas páginas a determinados usuarios.

4
Laravel.
Laravel es un framework de código abierto para desarrollar aplicaciones y servicios web
con PHP 5 y PHP 7. Su filosofía es desarrollar código PHP de forma elegante y simple,
evitando el "código espagueti". Fue creado en 2011 y tiene una gran influencia de
frameworks como Ruby on Rails, Sinatra y ASP.NET MVC.

Laravel tiene como objetivo ser un framework que permita el uso de una sintaxis elegante
y expresiva para crear código de forma sencilla y permitiendo multitud de funcionalidades.
Intenta aprovechar lo mejor de otros frameworks y aprovechar las características de las
últimas versiones de PHP.2

Gran parte de Laravel está formado por dependencias, especialmente de Symfony, esto
implica que el desarrollo de Laravel dependa también del desarrollo de sus dependencias.

Instalación
Antes de comenzar con la instalación de Laravel, es necesario instalar primero una
herramienta de gestión de dependencias llamada Composer. Esta herramienta se usa para
agregar al proyecto todas las librerías de terceros necesarias para que la aplicación
funcione correctamente. Composer proporciona un formato estándar para gestionar las
dependencias del software PHP y las bibliotecas requeridas.

Una vez instalado Composer, puede ser utilizado para instalar el framework de Laravel por
medio del siguiente comando:

composer global require “laravel/installer”

Con este comando lo que se hace es mandar a llamar la herramienta Composer para
instalar el instalador de Laravel de manera global. Esto significa que se debe poder acceder
a él desde cualquier parte, ya que no es específico para algún proyecto en especial como
la mayoría de los paquetes; en lugar de eso puede ser utilizado de manera global.

Después de correr el comando anterior, el archivo instalador de Laravel se guarda en la

carpeta vendor/bin de Composer. Se puede acceder a él usando toda la ruta del archivo
cada vez que se quiera crear un nuevo proyecto de Laravel, sin embargo, eso es muy
tedioso, por lo que se recomienda agregar la ruta del directorio al PATH del sistema para
que pueda ser accedido desde cualquier parte.

5
Una vez instalado, el comando new de Laravel crea una nueva instalación de Laravel con
todas las dependencias de Laravel ya instaladas y listas para usarse. La sintaxis para crear
una aplicación nueva es la siguiente:

laravel new nombreProyecto

A pesar de que parezca que la instalación de Laravel no es tan complicada, realmente se

corre el peligro de enfrentar dificultades gracias a una incompatibilidad de versiones entre
Composer y PHP, por lo que se requiere una previa investigación sobre qué versión de
Composer se necesita instalar de acuerdo a la versión de PHP que se tenga ya instalada
en la computadora. Lo más recomendado es mantener actualizado el PHP para así elegir
simplemente la versión más actual de Composer.

La instalación de CodeIgniter es mucho más fácil ya que no se necesita preocuparse por

las versiones de ningún complemento adicional (además del PHP) como Composer, ya que
dentro de la carpeta del framework viene incluido todo lo necesario para que pueda trabajar
sin ningún problema.

Documentación
La documentación que proporciona la página oficial del framework es muy escasa,
básicamente se trata de pequeños tutoriales para llevar a cabo la instalación y configuración
del framework. La instalación incluye tanto los requisitos previos como los pasos necesarios
para instalar Laravel; además, también incluye cómo iniciar el servidor de desarrollo local
que proporciona el framework para probar las aplicaciones.

Por el otro lado, la configuración está dividida de acuerdo a la estructura del framework,
como el directorio público, los ficheros de configuración, el manejo de permisos, la clave de
la aplicación y configuraciones adicionales, como el manejo de Bases de Datos. Por último,
la documentación también incluye la configuración del servidor, proporcionando dos
opciones que se adaptan a las diferentes necesidades de los desarrolladores.

6
Comparando la documentación de Laravel con la de CodeIgniter, es muy claro que la
documentación de Laravel deja mucho que desear. CodeIgniter proporciona un catálogo
muy amplio de ejemplos y tutoriales de las operaciones que se pueden realizar con el
framework. En la web se pueden encontrar tutoriales similares para Laravel, sin embargo,
son publicados por personas que desarrollan con el framework y van adquiriendo
experiencia por medio de la práctica. Sin embargo, esto no se puede tomar en cuenta como
documentación oficial.

Configuración
Existen diferentes configuraciones que se pueden hacer a Laravel dependiendo de las
características de la aplicación que se está desarrollando. Pero la configuración esencial se
encuentra contenida en la carpeta config. Cada opción se encuentra documentada, por lo
que es más que recomendable navegar entre los diferentes archivos y conocer las
diferentes opciones que ofrece el framework.

La primera configuración que se debe realizar, antes de meterse a explorar la carpeta

config, es definir la raíz del servidor web para que apunte al directorio public. Esto se hace
porque el archivo index.php localizado en este directorio, sirve como puente para todas las
peticiones HTTP que entren a la aplicación.

Entre los ficheros de configuración contenidos en config, se puede destacar el archivo

database.php, ya que aquí se debe modificar los parámetros como el nombre de la Base
de Datos a la que se quiere conectar, el servidor, el usuario y la contraseña que van a
permitir la conexión, el puerto, etc.

7
Otro aspecto importante es que, después de instalar Laravel, puede ser necesario
configurar algunos permisos. Los directorios dentro de storage y de bootstrap/cache
deberían tener permisos de escritura para el usuario del servidor web o Laravel no
funcionará. Si se utiliza la máquina virtual Homestead, estos permisos ya deben estar
configurados.

Una vez terminado con esto, ya se puede empezar a desarrollar la aplicación. A pesar de
que la configuración de Laravel no es tan pesada, sí se considera que es más fácil
configurar CodeIgniter.

Implementación de software de terceros

Laravel proporciona una herramienta muy interesante llamada Migraciones para el manejo
de Bases de Datos. Las migraciones tienen que ver con el diseño de tablas desde el
framework en lugar de crearlas directamente desde el gestor de Bases de Datos. La
diferencia radica en que, si se crea una tabla desde el gestor, para poder interactuar con
ella en el framework es necesario crear un modelo de la tabla, mientras que, por el otro
lado, con las migraciones se diseña directamente la tabla como si se tratara de un modelo,
y luego se puede generar a MySQL con un solo comando.

La ventaja de usar Migraciones es que permiten llevar una cronología de la creación de

tablas, por lo que si algo salió mal (por ejemplo se olvidó poner un campo en la tabla),
fácilmente se puede aplicar un rollback y deshacer los cambios.

Para crear una tabla se crea primero un archivo de migración, esto se logra con el siguiente
comando:

php artisan make:migration create_alumnos_table

8
Este comando crea el modelo para una nueva tabla llamada alumnos. Este modelo se
almacena en la carpeta database->migrations y es una clase que hereda de la clase
Migration. En esta clase se definen los campos que va a contener la tabla. El archivo ya
trae por default dos métodos llamados dow y up. El dow se manda a llamar cuando se
ejecuta un rollback y el up es donde se definen los campos de la tabla especificando qué
tipo de datos se van a utilizar.

Para ejecutar la migración, se usa el comando:

php artisan migrate

Y con esto se crea la tabla en la Base de Datos que se ha especificado en el archivo de

configuración. Para comprobarlo se puede simplemente acceder a PHPMyAdmin o
WorkBeanch.

Para manipular una Base de Datos desde Laravel, además del archivo de Migración,
también se deben crear el modelo y el controlador, ya que Laravel es un framework que se
basa en el Modelo Vista Controlador (MVC). Los comandos para crear el modelo y el
controlador son los siguientes:

9
 php artisan make:model Alumno

php artisan make:controller AlumnoController –

resource

Al ejecutar el comando para la creación del controlador, se agregan automáticamente al

archivo los métodos index, show, update, delete que se usan para realizar modificaciones
a la Base de Datos. Lo último que se necesita es especificar las instrucciones que se
requieren para cada método, es decir escribir las consultas que se van a realizar a la Base
de Datos para cada uno.

10
Yii 2
Yii es un framework de PHP de alto rendimiento, basado en componentes para desarrollar
aplicaciones web modernas en poco tiempo. El nombre Yii significa "simple y evolutivo" en
chino. También se puede considerar como el acrónimo de Yes It Is! (que en inglés significa
Sí, lo es).

Yii es un framework genérico de programación web, lo que significa que se puede utilizar
para desarrollar todo tipo de aplicaciones web en PHP. Debido a su arquitectura basada en
componentes y a su sofisticada compatibilidad de caché, es especialmente apropiado para
el desarrollo de aplicaciones de gran envergadura, como páginas web, foros, sistemas de
gestión de contenidos (CMS), proyectos de comercio electrónico, servicios web compatibles
con la arquitectura REST y muchos más.

Comparado con otros frameworks.

Como la mayoría de los framework de PHP, Yii implementa el patrón de diseño MVC
(Modelo-Vista-Controlador) y promueve la organización de código basada en este patrón.

La filosofía de Yii consiste en escribir el código de manera simple y elegante, sin

sobrediseñar nunca por el mero hecho de seguir un patrón de diseño determinado.

Yii es un framework completo (full stack) que provee muchas características probadas y
listas para usar, como los constructores de consultas y la clase ActiveRecord para las bases
de datos relacionales y NoSQL, la compatibilidad con la arquitectura REST para desarrollar
API, la compatibilidad de caché en varios niveles y muchas más.

Yii es extremadamente extensible. Puedes personalizar o reemplazar prácticamente

cualquier pieza de código de base, como se puede también aprovechar su sólida
arquitectura de extensiones para utilizar o desarrollar extensiones distribuibles.

El alto rendimiento es siempre la meta principal de Yii.

Yii no es un proyecto de una sola persona, detrás de Yii hay un sólido equipo de desarrollo,
así como una gran comunidad en la que numerosos profesionales contribuyen
constantemente a su desarrollo. El equipo de desarrollo de Yii se mantiene atento a las
últimas tendencias de desarrollo web, así como a las mejores prácticas y características de
otros frameworks y proyectos. Las buenas prácticas y características más relevantes de
otros proyectos se incorporan regularmente a la base del framework y se exponen a través
de interfaces simples y elegantes.

11
Instalación.
La instalación es relativamente fácil, debido a que cuenta con dos formas de instalación
diferentes, una es mediante la línea de comando usando la herramienta composer la cual
debe ser instalado con anterioridad a la instalación del framework, la otra alternativa que
ofrece es descargando el proyecto, la desventaja de esta es que se tienen que hacer
configuraciones adicionales las cuales aunque no son difíciles podrían ocasionar un fallo si
no se realizan correctamente, debido a esto se recomienda utilizar la primera opción que
es la instalación utilizando la herramienta de composer con línea de comando la cual realiza
las configuraciones por sí misma.

En Linux y Mac OS X, se ejecutan los siguientes comandos:

curl -sS https://getcomposer.org/installer |

php

mv composer.phar /usr/local/bin/composer

La instalación requiere los programas php y curl se instalan escribiendo:

apt install curl

Teniendo Composer instalado, puedes instalar Yii ejecutando los siguientes comandos en
un directorio accesible vía Web:

composer global require "fxp/composer-asset-

plugin:^1.4.1"

composer create-project --prefer-dist

yiisoft/yii2-app-basic basic

El primer comando instala composer asset plugin, que permite administrar dependencias
de paquetes bower y npm a través de Composer. Sólo necesitas ejecutar este comando
una vez. El segundo comando instala Yii en un directorio llamado basic. Puedes elegir un
nombre de directorio diferente si así lo deseas.

12
La instalación es estable gracias a que los proyectos están alojados en el que se considera
el mejor servicio que existe en la actualidad para proyectos de tipo OpenSource avalado
por los mismos usuarios que lo utilizan diariamente, cabe recalcar que los usuarios son
incluso empresas de talla mundial como los son Google, por lo tanto, el servicio ofrecido
por GitHub en cuanto a los servidores donde están alojados los proyectos es de la mas alta
calidad debido a la gran cantidad de demanda.

El framework cuenta con dos tipos de proyectos, proyecto básico y avanzado, la instalación
es exactamente igual.

Documentación.
La documentación que ofrece Yii es bastante completa ya que cuenta con una guía en su
página web propia específicamente para el framework en la cual ofrece todas las
herramientas necesarias para iniciarte como desarrollador de Yii, incluyendo todo tipo de
manuales desde la forma de instalarlo, hasta la configuración y utilización de componentes
mas complejos como el uso de Ajax.

Cuanta incluso con una guía completa para desarrollar proyectos paso a paso desde cero.

Otra ventaja de la documentación que ofrece yii es que tiene soporte multi idioma.

13
Gracias a que esta alojada en GitHub, la comunicación entre usuarios y los desarrolladores
de framework es bastante dinámica, lo que permite que los errores habituales estén
documentados dentro de la plataforma y permite que nuevos usuarios encuentren la
solución a sus errores sin tener que contactar directamente a los desarrolladores.

Para desarrolladores más avanzados también es una gran ventaja que se encuentra aquí
gracias a que se puede reportar errores nuevos que surgen día a día e incluso dar ellos
mismos las soluciones y crear mejoras en el framework y mandarla a los desarrolladores
para que las aprueben y las incluyan en el código.

14
Configuración.
Después de haber instalado Yii, tienes una aplicación totalmente funcional a la que se
puede acceder a través de la URL http://hostname/basic/web/index.php o
http://hostname/index.php, dependiendo de tu configuración. Esta sección será una
introducción a la funcionalidad incluida de la aplicación, cómo se organiza el código, y cómo
la aplicación maneja los requests en general.

Proyecto básico:
Mediante la instalación con la herramienta composer no es necesario realizar
configuraciones adicionales. La única configuración que se debe realizar es para que
funciones con conexión a base de datos y solo es colocar el nombre de la BD en un archivo.

Proyecto avanzado:
En el proyecto avanzado se debe realizar dos pasos adicionales.

Paso 1. Inicializar el proyecto en modo de desarrollo (también cuenta con modo de

producción)

Paso 2. Crear una BD y conectarla al proyecto en Yii para realizar la migración de la tabla
usuarios que ya tiene incluida el proyecto.

Implementación de software de terceros.

El proyecto ya cuenta con dos softwares de terceros que son Bootstrap y Jquery.

La utilización de bibliotecas es relativamente fácil ya que hay gran cantidad en internet, su

mayoría alojadas en GitHub las cuales tienen manuales de utilización y ejemplos muy
claros.

El framework cuenta con soporte para varios gestores de BD, puedes elegir entre una base
de datos SQLite, MySQL, PostgreSQL, MSSQL u Oracle, dado que Yii incluye soporte para
varios motores.

Funcionalidad.
La aplicación básica contiene 4 páginas:

 Página principal, mostrada cuando se accede a la URL http://hostname/index.php.

 Página "Acerca de (About)".
 La página "Contacto (Contact)", que muestra un formulario de contacto que permite
a los usuarios finales contactarse vía email.

15
  La página "Login", que muestra un formulario para loguearse que puede usarse para
autenticar usuarios. Intenta loguearte con "admin/admin", y verás que el elemento
"Login" del menú principal cambiará a "Logout".

Estas páginas comparten un encabezado y un pie. El encabezado contiene una barra con
el menú principal que permite la navegación entre las diferentes páginas.

También deberías ver una barra en la parte inferior de la ventana del navegador. Esta es la
útil herramienta de depuración provista por Yii para registrar y mostrar mucha información
de depuración, tal como los mensajes de log, response status, las consultas ejecutadas a
la base de datos, y más.

Adicionalmente a la aplicación web, hay un script de consola llamado yii, localizado en el

directorio base de la aplicación. El script puede ser utilizado para ejecutar tareas de fondo
y tareas de mantenimiento de la aplicación.

Helpers.
Yii ofrece muchas clases que ayudan a simplificar las tareas comunes de codificación, como
manipulación de string o array, generación de código HTML, y más. Estas clases helper
están organizadas bajo el namespace yii\helpers y son todo clases estáticas (lo que
significa que sólo contienen propiedades y métodos estáticos y no deben ser instanciadas).

Puedes usar una clase helper directamente llamando a uno de sus métodos estáticos, como
a continuación:

use yii\helpers\Html;

echo Html::encode('Test > test');

Motores de plantillas.
Por defecto, Yii utiliza PHP como su lenguaje de plantilla, pero puedes configurar Yii para
que soporte otros motores de renderizado, tal como Twig o Smarty, disponibles como
extensiones.

El componente view es el responsable de renderizar las vistas. Puedes agregar un motor

de plantillas personalizado reconfigurando el comportamiento (behavior) de este
componente.

16
 'components' => [

'view' => [

'class' => 'yii\web\View',

'renderers' => [

'tpl' => [

'class' =>
'yii\smarty\ViewRenderer',

//'cachePath' =>
'@runtime/Smarty/cache',

],

'twig' => [

'class' =>
'yii\twig\ViewRenderer',

'cachePath' =>
'@runtime/Twig/cache',

// Array de opciones de
Twig:

'options' => [

'auto_reload' => true,

],

'globals' => ['html' =>

'\yii\helpers\Html'],

'uses' =>
['yii\bootstrap'],

],

// ...

],

],

],

17
 ]

En el código de arriba, tanto Smarty como Twig son configurados para ser utilizables por
los archivos de vista. Pero para tener ambas extensiones en tu proyecto, también necesitas
modificar tu archivo composer.json para incluirlos:

"yiisoft/yii2-smarty": "~2.0.0",

"yiisoft/yii2-twig": "~2.0.0",

Ese código será agregado a la sección require de composer.json. Después de realizar ese
cambio y guardar el archivo, puedes instalar estas extensiones ejecutando composer
update --prefer-dist en la línea de comandos.

18
Code Igniter
CodeIgniter es un Marco de desarrollo de aplicaciones, un kit de herramientas, para las
personas que crean sitios web con PHP. Su objetivo es permitirle desarrollar proyectos
mucho más rápido de lo que podría si estuviera escribiendo código desde cero, al
proporcionar un amplio conjunto de bibliotecas para las tareas más comunes, así como una
interfaz simple y una estructura lógica para acceder a estas bibliotecas. CodeIgniter te
permite enfocarte creativamente en tu proyecto al minimizar la cantidad de código necesario
para una tarea determinada.

Ventajas de CodeIgniter
 Las páginas se procesan más rápido, el núcleo de CodeIgniter es bastante ligero.
 Es sencillo de instalar, basta con subir los archivos al ftp y tocar un archivo de
configuración para definir el acceso a la base de datos.
 Existe abundante documentación en la red.
 Facilidad de edición del código ya creado.
 Facilidad para crear nuevos módulos, páginas o funcionalidades.
 Estandarización del código
 Separación de la lógica y arquitectura de la web, el MVC.
 Cualquier servidor que soporte PHP+MySQL sirve para CodeIgniter.
 CodeIgniter se encuentra bajo una licencia open source, es código libre.

19
Comparado con otros frameworks.

En comparación con otros frameworks PHP. CodeIgniter es capaz de trabajar la mayoría

de los entornos o servidores, incluso en sistemas de alojamiento compartido, donde sólo
tenemos un acceso por FTP para enviar los archivos al servidor y donde no tenemos acceso
a su configuración.

Es bastante menos rígido que otros frameworks. Define una manera de trabajar específica,
pero en muchos de los casos podemos seguirla o no y sus reglas de codificación muchas
veces nos las podemos saltar para trabajar como más a gusto encontremos.

Permite que el servidor no se sobrecargue interpretando o ejecutando grandes porciones

de código. La mayoría de los módulos o clases que ofrece se pueden cargar de manera
opcional, sólo cuando se van a utilizar realmente.

Permite que el servidor no se sobrecargue interpretando o ejecutando grandes porciones

de código. La mayoría de los módulos o clases que ofrece se pueden cargar de manera
opcional, sólo cuando se van a utilizar realmente.

20
Instalación

Podemos descargar la versión más actualizada de CodeIgniter directamente desde su

página web, en la sección de descargas: www.codeigniter.com/download

En nuestro caso, usamos la versión 3.1.10

Si queremos instalarlo en alguna distribución de Linux, una vez descargado en nuestra

carpeta, procedemos a hacer lo siguiente:

1.- Descomprimir el paquete

Descomprime el archivo de descarga que has descargado

2.- Sube codeIgniter a tu servidor

Ahora tienes que subir todos los archivos descomprimidos a tu servidor web.
Opción A: Si estás programando en tu ordenador local, para pruebas y desarrollo, deberás
tener un servidor instalado en tu ordenador que soporte PHP, para lo que te recomendamos
los paquetes Wamp o Xampp. En este caso tendrás que copiar simplemente los archivos
de codeIgniter en el directorio de publicación de tu servidor. Puedes colocar los archivos en
la raíz del directorio de publicación o bien en un subdirectorio cualquiera.
Opción B: Si estás subiendo CodeIgniter a un servidor web de Internet, en un espacio que
tengas contratado de hosting, deberás subir por FTP todos los archivos. Lo general es que
copies CodeIgniter en la raíz de tu dominio, para que todas las páginas del dominio se
sirvan a través del framework PHP, pero nada te impide copiar CodeIgniter en un
subdirectorio particular, para que tu dominio web sólo funcione bajo CodeIgniter en la
carpeta donde lo has subido.

21
3.- Configura la URL base de tu aplicación web
Necesitas decirle a CodeIgniter la URL base de tu aplicación, es decir, la URL para acceder
a la raíz de CodeIgniter, según en el servidor y directorio donde lo has colocado, es decir,
donde has subido el código del framework. Para ello tienes que abrir el archivo de
configuración, que se encuentra en system/application/config/config.php, con cualquier
editor de texto y cambiar la variable de configuración llamada que se guarda en
$config['base_url'].
Si hemos instalado en local CodeIgniter pondremos http://localhost/ y si además lo
colocamos en un directorio específico podría ser algo como
http://localhost/directorio_codeigniter

Si hemos instalado el framework en un dominio de Internet podremos indicar algo como

http://eldominiodeinstalacion.com/ y si hicimos una carpeta para subir CodeIgniter en ella
pondremos el nombre del dominio y luego el nombre de la carpeta o carpetas, separadas
por barras y acabando siempre en una barra:
http://eldominioquesea.com/carpeta/otracarpeta/

Según nos indican en el manual de instalación, aparte de este dato podemos opcionalmente
escribir una llave de encriptación en la variable $config['encryption_key'], que servirá si
deseamos usar la clase de encriptado que proporciona CodeIgniter o queremos que
nuestras variables de sesión estén encriptadas, algo que hace el framework de manera
transparente para nosotros.

22
Documentación

Dentro del portal de Code igniter se ofrece una amplia variedad de documentación, desde
que es dicho framework, hasta lo mas complejo para llevar a cabo proyectos mas complejos

CI contiene también lo que es dentro de su documentación ciertos temas generales como

por ejemplo los MVC, los helpers, configurar bases de datos, etc.

La documentación nos da la ventaja de que en caso de tener errores, dificultades o no tener

el conocimiento, podremos buscar por ejemplo, la creación de una clase, el manejo de
errores, la conexión entre el framework y una base de datos o incluso lo mas básico como
las URLs del codeigniter

23
Implementación de software en terceros

Es posible agregar dos softwares esenciales JQuery y Bootstrap, asi como también
tenemos la oportunidad de usar Css.

El framework puede ser capaz de soportar plataformas como MySQL, PHPMyAdmin entre
otros.

CRUD en Code Igniter

Para lograr comprender, primero necesitamos saber el concepto de CRUD:

CRUD es una aplicación que está encargada de crear, leer, actualizar y eliminar registros
en una base de datos, y de ahí CRUD (por sus siglas en Inglés).

24
Para poder llevar a cabo un CRUD, tenemos que entrar a nuestra plataforma de base de
datos, en este caso PHPMyAdmin y procederemos a crear una base de datos, le ponemos
su nombre y le agregamos ciertos campos (tablas).

Para que estas herramientas puedan funcionar de manera exitosa hay que hacer unas
configuraciones en algunos archivos:

Primero abrimos el archivo /crud/application/config/config.php, y complementamos

la información que falta para que quede así:

Esta configuración sirve para indicarle que la URL de nuestra aplicación estará ubicada en
http://localhost/crud/.

Necesitamos conectar la base de datos, para ello abrimos el

archivo /crud/application/config/database.php

Ahora que ya se conecto la base de datos a nuestra aplicación, se tiene que definir una ruta
principal, entrando a la siguiente ruta /crud/application/config/routes.php, cambiando lo
siguiente

25
1 $route['default_controller'] = "productos";

Una vez realizadas estas configuraciones, tenemos que descargar grocery CRUD

Y después haremos lo siguiente:

1. Copiamos la carpeta /assets a nuestra carpeta /crud/.

2. De la carpeta de grocery ingresamos /application/config y
copiamos grocery_crud.php a la carpeta /crud/application/config/.
3. De la carpeta /application/libraries copiamos los dos archivos a la
carpeta /crud/application/libreries/.
4. finalmente copiamos grocery_crud_model.php de la carpeta/application/models a la
carpeta /crud/application/models/.

Debemos de crear 2 archivos más para que la aplicación funcione.

 Controlador: se encargará de cargar la librería y generar las reglas necesarias para

crear el CRUD
 Vista: Dara el formato de salida necesario.

26
Necesitamos crear un archivo nuevo y llamarlo productos.php dentro de la
carpeta /crud/application/controllers/ y agregamos el siguiente código…

27
En la carpeta /crud/aplications/views/ creamos una carpeta llamada productos
y allí creamos un archivo llamado administracion.php, la ruta final
será /crud/aplications/views/productos/administracion.php y finalmente volvemos a
introducir el siguiente código…

Ahora que ya se tiene las configuraciones necesarias, códigos, carpetas, rutas y todo lo
demás, ya podremos visualizar una aplicación web acerca de un manejo de inventario.

28
29
CSS

¿Qué es CSS?

Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten
de un concepto simple pero muy potente: aplicar estilos (colores, formas, márgenes, etc...)
a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma
masiva.

Se le denomina estilos en cascada porque se aplican de arriba a abajo (siguiendo un

patrón denominado herencia que trataremos más adelante) y en el caso de existir
ambigüedad, se siguen una serie de normas para resolverla.

¿Por qué usar CSS?

La idea de CSS es la de utilizar el concepto de separación de presentación y contenido,

intentando que los documentos HTML incluyan sólo información y datos, relativos al
significado de la información a transmitir (el contenido), y todos los aspectos relacionados
con el estilo (diseño, colores, formas, etc...) se encuentren en un documento CSS
independiente (la presentación).

30
Ventajas y desventajas de CSS

Las principales ventajas que nos aporta son las siguientes:

 Acelera el desarrollo de las páginas web, ya que conociendo un poco el framework

CSS, se pueden desarrollar las páginas de una manera más rápida que si lo hacemos
desde cero.
 Facilita el trabajo en equipo, ya que si hemos desarrollado una página y sus estilos
usando un framework, si posteriormente otra persona necesita modificarlos y conoce
ese framework, puede mantener la misma línea de desarrollo de las hojas de estilo y
esa página web.
 Garantiza que todo lo que se desarrolle sea compatible con todos los navegadores, lo
que si tuviéramos que hacer nosotros mismos supondría más tiempo y esfuerzo.
 Los frameworks son mantenidos y evolucionados por la comunidad, por lo que los
posibles errores son corregidos y sus funciones van ampliándose.

Al igual que en cualquier framewrok, también tiene ciertas devesntajas, que son estas:

 Al emplear un framework estamos utilizando muchos estilos y muchas librerías y no

las estamos empleados todas. Este uso de una gran cantidad elementos hace que
nuestra página web pese más y tarde más en descargarse.
 Si utilizamos un framework CCS, salvo que lo personalicemos, lo que requiere más
conocimientos, nuestra página web se va a parecer mucho a millones de páginas web
diferentes que se han hecho con el mismo framework.
 Un framework CSS tiene una curva de aprendizaje, por lo que si queremos utilizarlo
primero tenemos que aprender a hacerlo.
 Otra desventaja muy importante, aunque pueda no parecerlo, es que si utilizamos un
framework sin haber aprendido CSS, no vamos a saber hacer cualquier modificación
sin el framework, ya que vamos a desconocer la base sobre la que funciona.

31
Sintaxis

CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para especificar
los nombres de varias propiedades de estilo. Una hoja de estilos consiste en una serie de
reglas. Cada regla, o conjunto de reglas consisten en uno o más selectores, y un bloque de
declaración.

Selectores

Los selectores declaran qué etiquetas se le aplican los estilos que coincidan con la etiqueta
o atributo señalados en la regla.

Los selectores pueden aplicarse a:

 Todos los elementos de un tipo, como los párrafos <p>.

 Elementos seguidos de un atributo, en particular:

o id: identificador, un identificador único para la etiqueta.

o class: clase, un identificador para anotar múltiples elementos.

Las clases y los identificadores son sensibles a las mayúsculas, comienzan con letras, y
pueden incluir caracteres alfanuméricos y guiones bajos. Una clase se aplica a cualquier
número de elementos. Un identificador se aplica un solo elemento.

Las pseudoclases son usadas en los selectores CSS para permitir el formateo usando
información que no está incluida en el documento. Un ejemplo de una pseudoclase muy
usada es: hover, que identifica el contenido que está siendo apuntado por un puntero, como
el cursor del ratón. Este nombre se añade al selector, de esta manera: a:
hover o #elementid:hover. Una pseudoclase clasifica elementos, como: link o :visited,
mientras que un pseudoelemento hace una selección de elementos parciales, como ::first-
line o ::first-letter.

Los selectores pueden ser combinados de muchas maneras para obtener una mayor
flexibilidad y precisión. Múltiples selectores pueden ser unidos en una misma línea para
especificar elementos por su ubicación, tipo de elemento, identificador, clase, o cualquier
combinación de estos. El orden de los selectores es importante. Por ejemplo, div.myClass

32
{color: red;} aplica a todos los elementos <div> con la clase myClass, mientras que.myClass
div {color: red;} aplica a todos los elementos <div>que estén dentro de cualquier elemento
con la clase myClass.

Bloque de declaraciones

Un bloque de declaraciones consiste en una lista de declaraciones unidas. Cada

declaración consiste en una propiedad, dos puntos (:), y un valor. Si hay muchas
declaraciones en un bloque, un punto y coma (;) es insertado para separar cada
declaración.

Las propiedades son insertadas en el estándar CSS. Cada propiedad tiene un conjunto de
posibles valores. Algunas propiedades afectan a cualquier elemento, otras solo a un grupo
particular de elementos. Los valores pueden ser palabras clave, como "center" o "inherit",
o valores numéricos, como 200px (200 píxeles) o 80% (80 por ciento del ancho de la
ventana). Los valores de colores son especificados por medio de una palabra clave (ej.
"red"), de valores hexadecimales (ej. #FF0000, pudiéndose abreviar como #F00), valores
RGB en una escala del 0 al 255 (ej. rgb(255, 0, 0)), valores RGBA igual que los valores
RGB pero con soporte para el canal alfa de transparencias (ej. rgba(255, 0, 0, 0.8)), y
valores HSL o HSLA (ej. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).

Uso

Antes del desarrollo de CSS, toda la información presentacional de los documentos HTML era
incluida en el código HTML. Los colores de las fuentes, los estilos de fondo, la alineación de
los elementos, los bordes y tamaños eran descritos explícitamente, a veces de manera
redundante, dentro del HTML. CSS permite a los diseñadores mover toda la información
presentacional a otro archivo, la hoja de estilos, resultando en un código HTML notablemente
más simple.

Por ejemplo, las cabeceras (h1), sub-cabeceras (h2), sub-sub-cabeceras (h3), etc., son
definidas estructuralmente usando HTML. En la impresión y las pantallas, la elección de la
fuente, tamaño, color y énfasis para esos elementos es presentacional.

33
Antes de CSS, los diseñadores que deseaban asignar características tipográficas, por
ejemplo, a todos los elementos h2 tenían que repetir el código presentacional HTML por cada
elemento al que se le deseaba aplicar ese estilo. Esto creaba documentos más complejos,
largos, más propensos a errores y difíciles de mantener. CSS permite la separación entre la
presentación y la estructura. CSS puede definir el color, fuente, alineación del texto, tamaño,
bordes, espaciado, capas y muchas otras características tipográficas, y pueden aplicarse
distintos estilos de impresión y de pantalla. CSS también define estilos no visuales, como la
velocidad de lectura y énfasis en los lectores de textos aurales. El W3C ha declarado obsoleto
el uso de las etiquetas presentacionales HTML.

Por ejemplo, aplicando estilos mediante etiquetas presentacionales HTML, un elemento h1

definido con texto rojo se puede representar como:

<h1><font color="red"> Capítulo 1. </font></h1>

Usando CSS, el mismo elemento puede escribirse usando propiedades de estilo inline en vez
de atributos y etiquetas de presentación:

<h1 style="color: red;"> Capítulo 1. </h1>

Una hoja de estilos CSS externa, descrita abajo, puede enlazarse con un documento HTML
usando la sintaxis siguiente:

<link href="hojadeestilos.css" rel="stylesheet" />

El código CSS se puede incluir en el código HTML en la etiqueta <style> dentro de la etiqueta
<head> del documento:

<style>

h1 {color: red}

</style>

34
Fuentes

Los estilos CSS puede ser provistos desde varias fuentes. Esas fuentes pueden ser el
navegador web, el usuario y el diseñador. La información del diseñador puede ser
clasificada de las siguientes formas: inline, media type, importancia, especificidad del
selector, orden de reglas, herencia y definición de propiedades. La información de los estilos
CSS puede estar en un documento separado o puede estar embebido dentro de un
documento HTML. Múltiples hojas de estilos pueden ser importadas al mismo tiempo. Los
diferentes estilos pueden ser aplicados dependiendo de la salida del dispositivo usado en
ese momento; por ejemplo, la versión para monitores puede ser diferente de la versión
impresa, así que los diseñadores pueden aplicar diferentes estilos dependiendo del
dispositivo usado.

La hoja de estilos con la máxima prioridad controla la visualización del contenido. Las
declaraciones no establecidas en la fuente con máxima prioridad son sobreeescritas, como
las hojas de estilos del agente de usuario. Este proceso es llamado cascading, o cascada.

Una de las metas de CSS es permitir a los usuarios un mayor control sobre la presentación.
Algunas personas que encuentran a los encabezados rojos en itálicas difíciles de leer
pueden aplicar una hoja de estilos diferente. Dependiendo del navegador y del sitio web,
un usuario puede escoger entre varias hojas de estilo provistas por los diseñadores, o
pueden remover todas las hojas de estilos añadidas y ver el sitio usando los estilos por
defecto del navegador, o pueden sobreescribir solo el estilo de los encabezados rojos en
itálica sin alterar otros atributos.

35
Especificidad

La especificidad se refiere a los pesos relativos de varias reglas. Determina que estilos se
aplican a un elemento cuando más de una regla intentan aplicar estilos a ella. Basándose
en la especificación, un simple selector (h1, por ejemplo) tiene una especificidad de 1, los
selectores de clase tienen una especificidad de 1,0, y los selectores de id una especificidad
de 1,0,0. Porque los valores de especificidad no se acarrean como en el sistema decimal,
las comas son usadas para separar los "dígitos" (una regla CSS que tiene 11 elementos y
11 clases tiene una especificidad de 11,11, no 121).

Por lo tanto, los siguientes selectores de reglas dan como resultado la especificidad
indicada:

Veamos el siguiente ejemplo

En este ejemplo, la declaración en el atributo style sobrescribe la declaración del elemento

<style> porque tiene una especificidad más alta.

36
Herencia

La herencia es una característica clave en CSS; basada en la relación ancestro-

descendiente para operar. La herencia es el mecanismo por el cual las propiedades no sólo
se aplican a un solo elemento, sino también a sus descendientes. La herencia se basa en
el árbol del documento, el cual es la jerarquía de los elementos XHTML en una página
basada en el anidamiento. Los elementos descendientes pueden heredar los valores de las
propiedades CSS de un elemento ancestro. En general, los elementos descendientes
heredan las propiedades relacionadas al texto, pero las propiedades relacionadas a la caja
no. Las propiedades que pueden ser heredadas son el color, fuente, espaciado, el peso de
la línea, propiedades de lista, alineación del texto, identado, visibilidad, espaciado de
espacios and y espaciado entre palabras. Las propiedades que no pueden ser heredadas
son el fondo, bordes, visualización, posicionamiento, tamaño, márgenes, tamaño mínimo y
máximo, outline, desbordamiento, relleno, posición, alineación vertical y z-index.

La herencia previene que algunas propiedades sean declaradas una y otra vez en la hoja
de estilos, permitiendo a los diseñadores escribir menos código CSS. Mejora la carga rápida
de los sitios por los usuarios, y permite a los clientes ahorrar dinero en los costos de
desarrollo y ancho de banda.

Veamos el siguiente ejemplo

Se tiene la siguiente hoja de estilos:

h1 {

color: pink;

Éste es un elemento h1 con una etiqueta de énfasis (em) dentro:

<h1>

Esto es para <em>ilustrar</em> la herencia

</h1>

Si no se asigna un color al elemento em, la palabra «ilustrar» heredará el color del elemento
padre, h1. Entonces, la palabra «ilustrar» aparecerá de color rosa.

37
Espacios en blanco

Los espacios en blanco entre propiedades y selectores se ignoran. Este pedazo de código:

body{overflow:hidden;background:#000000;}

es igual a este otro:

body {

overflow: hidden;

background: #000000;

Aunque el espaciado mejora la legibilidad del código.

Posicionamiento

CSS 2.1 define 3 esquemas de posicionamiento:

Normal

Los elementos inline, o de línea, son dispuestos de la misma manera que las letras en las
palabras de un texto, una vez que ya no hay más espacio en una línea, entonces se
empieza una nueva línea abajo. Los elementos block, o de bloque, son dispuestos
verticalmente, como los párrafos.

Flotante

Un elemento float está fuera del flujo normal y puesto lo más posible a la derecha o
izquierda en el espacio disponible. Los demás elementos fluyen alrededor del elemento
float.

Absoluto

Un elemento posicionado absolutamente no tiene un lugar, y no afecta al flujo normal de

los elementos. Ocupa el espacio que se le ha asignado independientemente de los demás
elementos.

38
Propiedades de posicionamiento

Hay 4 posibles valores para la propiedad position. Si un elemento está posicionado de una
manera diferente a static, hay cuatro subpropiedades usadas para especificar posiciones y
offsets: top, bottom, left y right.8

Static

El valor por defecto a los elementos en el flujo normal.

Relative

El elemento el posicionado en el flujo normal, y luego movido relativamente a su posición

normal. Los demás elementos son independientes del elemento movido relativamente.

Absolute

Especifica el posicionamiento absoluto. El elemento es posicionado en relación a su

antecesor no estático más cercano.

Fixed

El elemento es posicionado absolutamente en una posición fija de la pantalla aunque el

resto del documento se mueva.

Float y clear

La propiedad float puede tener 3 valores diferentes. Los elementos posicionados

absolutamente o de manera fija no pueden ser aplicados a esta propiedad. Los demás
elementos flotan normalmente alrededor de los elementos flotantes, a menos que se
establezcan alguna de las propiedades clear.

left

Los elementos float flotan a la izquierda y los otros elementos fluyen a la derecha de este
elemento.

right

Los elementos float flotan a la derecha y los otros elementos fluyen a la izquierda de este
elemento.

clear

39
Forza al elemento a no fluir alrededor de los elementos que flotan a la izquierda (clear: left),
a la derecha (clear: right) o a ambos lados (clear: both).

40
Curva de aprendizaje.
La siguiente grafica demuestra un aproximado de las horas de estudio invertidas para poder
instalar y comprender el funcionamiento del framework dependiendo de su dificultad.

Horas

30

25

20

15

10

0
Laravel Yii 2 CodeIgniter

Productividad de los Framework.

La siguiente grafica muestra qué tan productivo es el uso del framework en la

implementación de una aplicación web evaluado en porcentaje de 0 a 100.

Productividad

120%

100%

80%

60%

40%

20%

0%
Laravel Yii 2 CodeIgniter

41
Tamaño.
La siguiente grafica muestra un estándar del tamaño de las aplicaciones realizadas en
distintos frameworks. Se podría suponer que entre menos líneas de código requiere el
framework es más fácil de aprender.

Tamaño

200
180
160
140
120
100
80
60
40
20
0
Laravel Yii 2 CodeIgniter

Velocidad.
En la siguiente grafica se muestra una comparación de los frameworks con respecto a la
velocidad de ejecución de una aplicación web desarrollado con cada framework.

Velocidad

800

700

600

500

400

300

200

100

0
Laravel Yii 2 CodeIgniter

42
Conclusiones.
Yii 2.

En conclusión, podemos decir que yii es un framework que sobre sale sobre otros por las
funcionalidades que este ofrece, su amplio catálogo en documentación y herramientas
funcionales.

Yii es un framework que ha ido creciendo con el tiempo gracias a la aceptación por parte
de los usuarios y la participación de los usuarios activos en grandes plataformas como lo
es GitHub.

Como su principal desventaja se considera que es bastante pesado en comparación con

otros

Laravel.

Laravel es una excelente herramienta de software para el desarrollo diario y dispone de

algunos de los factores claves que hacen que un proyecto tenga éxito:

Una de sus mejores ventajas es que no necesita muchos requerimientos ni son tan
especiales los que necesita, en la web se puede encontrar mucha y muy bien estructurada
documentación del mismo y su comunidad es enorme y muy activa, por lo que siempre hay
foros donde se podrá consultar y pedir ayuda o recomendaciones con la seguridad de que
alguien podrá apoyarte.

CodeIgniter.

Con su diseño compacto y sintaxis amigable para los principiantes, Codelgniter resulta
apropiado para quienes aspiren a convertirse en programadores. Ahora bien, quienes ya
hayan dado sus primeros pasos en el desarrollo web dinámico basado en PHP, también se
familiarizarán rápidamente con este ligero framework. Incluso los desarrolladores
experimentados se toparán con una gran flexibilidad, garantizada principalmente gracias a
la práctica funcionalidad reducida de este framework PHP. Sin embargo, quien quiera
trabajar con Codelgniter deberá acostumbrarse al patrón MVC, así como prescindir de un

43
motor de plantillas y de un ORM nativo. A pesar del reducido tamaño de su código,
Codelgniter es una solución ideal para pequeños y grandes proyectos web por igual.

CSS
CSS es una buena herramienta para aplicarse en lo que a desarrollo de aplicaciones web
se refiere. Actualmente lo que el cliente busca es un uso eficaz y amigable al hacer uso de
una pagina o aplicación web, por lo cual, si se logra la exitosa mezcla entre el framework y
las herramientas, lograremos el objetivo y el cliente tendrá lo que quiere.

CSS combinado con con las reglas de diseño, puede ser de gran ayuda para representar,
de una manera eficaz, la promoción de paginas web.

Básicamente, si queremos darle presentación y estilo de manera rápida y sencilla, es

recomensable y necesario usar CSS, pues con esto tendremos excelentes resultados

44