ACTIVIDAD:

Tema 2

NOMBRE (S):
FERNANDO HERNÁNDEZ RODRÍGUEZ

ASIGNATURA:
DESARROLLO BASADO EN FRAMEWORKS PARA
APLICACIONES WEB

GRADO Y GRUPO:
VIII E

CARRERA:
ING. EN TECNOLOGÍAS DE LA INFORMACIÓN
Y COMUNICACIONES

FACILITADOR:
ING. JOSE BRAULIO FLORES MARTINEZ

SALINA CRUZ, OAX. ABRIL DEL 2020

 Esquemas de desarrollo con Frameworks
2.1. Frameworks asociados al lenguaje.
• Python
Es un lenguaje de programación de alto nivel creado por Guido van Rossum en
1991. Entre sus caracteristicas está lo fácil de usar y leer bajo su filosofia de DRY
(Don’t Repeat Yourself). Usado comunmente para análisis de datos y machine
learning.
• Javascript con node.js
Node.js es la forma de ejecutar Javascript en un servidor. Con Node podemos
aprovechar grandes ventajas de Javascript como los eventos y la ejecución
asíncrona para crear aplicaciones en tiempo real.
• PHP
Del acrónimo Personal Hypertext Processor. Es un lenguaje originalmente diseñado
para el desarrollo web con contenido dinámico. Fue uno de los primeros lenguajes
de programación del lado del servidor en incluir su código en documentos HTML. El
código es interpretado por un servidor que genera el HTML de la página.
• Java
Es un lenguaje de programación orientado a objetos. Su principal intención es
poder escribir aplicaciones que se ejecuten en cualquier dispositivo (WORA, Write
Once, Run Anywhere). A partir del 2012 es uno de los lenguajes de programación
más populares para desarrollo de aplicaciones web con aproximadamente 10
millones de usuarios.
• Ruby
Ruby, creado por Yukihiro Matsumoto en 1995, combina una sintaxis inspirada en
Python y Perl. Al igual que Python, es un lenguaje de alto nivel, lo que lo hace más
fácil y rápido de aprender.
Ruby fue originalmente creado para hacer de la programación algo divertido, y en
un inicio era un lenguaje usado para crear videojuegos. Se popularizó en el mundo
del desarrollo web gracias a Ruby On Rails.
• GoLang
Es un lenguaje de programación diseñado por Google. Creado en 2009, es un
lenguaje compilado, tipado y muy similar a C. Entre sus características está la
concurrencia y la tipificación dinámica presente en lenguajes como Javascript,
Python y Ruby.
2.2. Frameworks asociados al estilo
Los frameworks CSS disponen una serie de clases (de hojas de estilo) ya creadas
con las que ayudar a posicionar elementos en la página y crear estructuras de
maquetación, más o menos versátiles. Así, en el desarrollo de páginas nuevas, o
en el rediseño de páginas antiguas, podemos ayudarnos de frameworks CSS para
disponer de una rejilla donde posicionar los distintos componentes de nuestro
diseño. Con ello nos ahorraremos el tiempo de tener que crear de nuevo decenas
de clases que estamos aburridos de implementar para crear maquetaciones a 2, 3
ó 4 columnas, con divisiones de cabecera, cuerpo y pie, etc.
En DesarrolloWeb.com hemos analizado un framework CSS y realizado un manual
para explicar sus características y funcionamiento, que recomendamos leer para
obtener más explicaciones. Se titula Maquetación CSS con 960 Grid System , en el
que encontraréis además diversos vídeos muy ilustradores para conocer de primera
mano el proceso de diseño de una web utilizando uno de estos frameworks CSS.
En este artículo pretendo simplemente enumerar este y otros frameworks CSS, en
un listado que pretende dar una idea de las posibilidades que nos ofrece en este
momento el mercado.
• 960 Grid System
Es, tal vez, el más utilizado de los frameworks CSS, cuyas páginas se
construyen en anchuras de 960 píxeles (de ahí su nombre). Ofrece dos
posibilidades de maquetación de páginas, con una rejilla de 12 ó 16
columnas. Nosotros escogimos este framework CSS para explicarlo a los
lectores de DesarrolloWeb.com, justamente por ser tan popular. En nuestro
trabajo con este sistema hemos podido comprobar que es muy versátil y
sobre todo, sencillo de utilizar.

• Simple
Este framework CSS lo presenta un desarrollador chileno, con lo que todos los
ejemplos y documentación que puedas encontrar está en español. El creador lo ha
realizado para poder simplificar las cosas, no sólo en el desarrollo de las páginas,
sino también en el aprendizaje. Lo destacamos en segundo lugar por ser un
producto en castellano, que siempre se agradece tener herramientas para trabajar
en nuestro propio idioma.
• Blueprint
Es un framework CSS que pretende reducir el tiempo de desarrollo de las páginas
web. Ofrece una estructura sólida en la que fundar tu trabajo de diseño, por medio
de la típica rejilla. Pero no se limita simplemente a eso, sino que ofrece otra serie
de clases muy útiles para estilizar componentes típicos, como formularios, botones,
pestañas, tipografías o para que tus páginas web se puedan imprimir de manera
óptima en papel.
• YUI Grids CSS
El framework CSS de Yahoo! Es un código CSS que permite maquetar páginas con
distintas anchuras (750px, 950px, y 974px) y hacer todas las cosas típicas que se
pueden desear en una página. Tiene 6 plantillas predefinidas y la posibilidad de
crear más de 1.000 combinaciones de maquetación, en regiones de 2, 3 y 4
columnas. Forma parte de la Yahoo! User Interface Library, lo que da una garantía
adicional, por venir de tan renombrado buscador.
• Tripoli
Tripoli no es un framework CSS y según remarcan los creadores, ello significa que
no te obliga a desarrollar tu página de una manera determinada. En contra, lo que
ofrece es un código CSS que resetea los estilos predefinidos de los navegadores y
los redefine, consiguiendo una base estable sobre la que realizar un sitio y que se
vea igual en cualquier cliente web. Puede ser interesante porque intenta no caer en
los problemas que tienen los frameworks CSS.
• Boilerplate
Este framework me ha parecido interesante porque está creado por uno de los
desarrolladores iniciales de Blueprint, que ha fundado el nuevo proyecto para poner
en marcha sus ideas particulares. Como él dice, este framework está pensado para
simplificar las cosas y ser ligero, aportando todo lo básico para poder maquetar una
web, pero sin las complejidades que tiene Blueprint y con convenciones de nombres
que dan más sentido y significado a lo que estamos codificando.
• BlueTrip
Según sus creadores, BlueTrip es una combinación de lo mejor de distintos
frameworks CSS de los que hemos hablado ya. Su nombre viene de la unión de
BLUEprint - TRIpoli, haciendo referencia a esa unión de ideas de los mejores
framewoks, entre los que también se han inspirado en nuestro framework preferido
en estos momentos, 960 grid, por su sencillez.
• Otros Framework CSS
Pongo otros frameworks CSS que he encontrado y que no he investigado tanto las
posibilidades que ofrecen, aunque también pueden ser interesantes, sobre todo
puede que den enfoques diferentes que puedan ser útiles en ciertas ocasiones.
Elements

ESWAT
Content with style

My CSS Framework

Hartija

Malo (Framework CSS ultra pequeño)

emastic

2.3. Frameworks asociados al acceso a datos.

Los datos pueden codificarse en una petición HTTP de muchas maneras. Una
petición GET para recuperar ficheros o datos de un servidor puede codificar los
datos que se necesitan en parámetros URL o dentro de una estructura URL. Una
petición POST para actualizar un recurso en el servidor puede en cambio incluir la
información de actualización como "datos POST" dentro del cuerpo de la petición.
La petición HTTP puede también incluir información sobre la sesión o usuario actual
en un cookie de lado cliente.
Los frameworks web proporcionan mecanismos apropiados del lenguaje de
programación para acceder a esta información. Por ejemplo, el
objeto HttpRequest que pasa Django a toda función de visualización contiene
métodos y propiedades para acceder a la URL de destino, el tipo de petición
(ej. HTTP GET), parámetros GET o POST, cookie y datos de session, etc. Django
puede también pasar información codificada en la estructura de la URL definiendo
"patrones de captura" en el mapeador URL (mira el último fragmento de código de
la sección de arriba).
• Abstraer y simplificar el acceso a base de datos
Los sitios web utilizan bases de datos para almacenar información tanto para ser
compartida con los usuarios como sobre los propios usuarios. Los frameworks web
proporcionan frecuentemente una capa de base de datos que abstrae las
operaciones de lectura, escritura, consulta y borrado de la base. Nos referimos a
esta capa de abstracción como Mapeador de Objetos Relacionados (Object-
Relational Mapper, ORM).
Usar un ORM tiene dos beneficios:
• Puedes reemplazar la base de datos subyacente sin tener necesariamente
que cambiar el código que la usa: Esto permite a los desarrolladores optimizar
las características de las diferentes bases de datos en función de su uso.

• La validación básica de datos puede implementarse dentro del framework.

Esto hace más fácil y seguro comprobar que los datos se almacenan en el
 campo correcto de la base, que tienen el formato adecuado (ej. una dirección
de correo electrónico), y que no son maliciosos de ninguna manera (los
craqueadores utilizan ciertos patrones de código para hacer cosas malas
como borrar registros de las bases de datos).
Por ejemplo, el framework web de Django proporciona un ORM, y utiliza la referencia
del objeto usado para definir la estructura de un registro similar al modelo. El modelo
especifica los tipos de campos que se almacenarán, lo que puede proporcionar una
validación a nivel de campo sobre qué información se puede guardar (ej. un campo
de email sólo permitiría direcciones válidas de correo electrónico). Las definiciones
de campos pueden también especificar su tamaño máximo, etiquetas de texto para
los formularios, etc. El modelo no establece ninguna información sobre la base de
datos subyacente ya que ese es un ajuste de configuración que se puede cambiar
de forma separada de nuestro código.

El primer fragmento de código más abajo muestra un modelo de Django muy simple
para un objeto Team. Éste almacena el nombre y nivel del equipo como campos de
caracteres y especifica el número máximo de éstos que pueden almacenarse en
cada registro. El team_level es un campo de selección, de manera que
proporcionamos un mapeo entre las opciones a mostrar en pantalla y los datos a
almacenar, junto con un valor por defecto.

El modelo de Django proporciona una API de consulta simple para buscar en la base
de datos. Ésta puede comprobar coincidencias contra un gran número de campos al
mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas,
mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes
especificar una búsqueda de equipos U11 que tengan un nombre de equipo que
empiece por "Fr" or finalice con "al").

El segundo fragmento de código muestra una función de visualización (manejador

de recurso) para mostrar en pantalla todos nuestros equipos U09. En este caso
especificamos que queremos filtrar todos los registros donde el
campo team_level tenga exactamente el texto 'U09' (fíjate debajo cómo este criterio
se pasa como argumento a la función filter() con el nombre de campo y tipo de
coincidencia separados por guiones bajos dobles: team_level__exact).
 • Renderización de datos
Los frameworks web proporcionan con frecuencia sistemas de plantillas. Éstas te
permiten especificar la estructura de un documento de salida, usando marcadores
de posición para los datos que serán añadidos cuando se genere la página. Las
plantillas se usan con frecuencia para crear HTML, pero también pueden crear otros
tipos de documentos.

Los frameworks web proporcionan con frecuencia un mecanismo para facilitar la

generación de otros formatos a partir de los datos almacenados,
incluyendo JSON y XML.

Por ejemplo, el sistema de plantillas de Django te permite especificar variables

usando una sintaxis de "llaves dobles" (ej. {{ variable_name }}), que serán
reemplazadas por valores pasados desde la función de visualización cuando la
página sea renderizada. El sistema de plantillas también proporciona soporte para
expresiones (con la sintaxis: {% expression %}), que permite a las plantillas realizar
operaciones simples como iterar sobre la lista de valores pasados a la misma.

El fragmento de código de abajo muestra como hacer este trabajo. Continuando el

ejemplo del "equipo más joven" de la sección anterior, la "view" pasa a la plantilla
HTML una variable tipo lista llamada youngest_teams. Dentro del esqueleto HTML
tenemos una expresión que primero comprueba que la
variable youngest_teams existe, y luego itera sobre ella en un bucle for. En cada
iteración la plantilla presenta en pantalla el valor del team_name del equipo de uno
de los elementos de la lista.
2.4. Frameworks multipropósito.

Posee multiples clases o componentes, cada uno de los cuales proveen una
abstracción de algún concepto en particular

El framework define como sus abstracciones trabajarán juntos de manera a resolver

problema

Sus componentes son reutilizables.

Utilización de patrones para la solución de problemas comunes

Facilitar el desarrollo de software

Pasar más tiempo identificando requerimientos de SW que tratar con detalles de

bajo nivel

Proveer una estructura y una metodología de trabajo definida

Ayudar al desarrollo de software, proporcionando una estructura definida, la cual

ayuda a crear aplicaciones con mayor rapidez

Ayudar a realizar el mantenimiento del sitio gracias a la organización que se

mantiene durante el desarrollo de la aplicación

Por ejemplo el front End y el Backend

• Front End

Es la parte de una aplicación que interactúa con los usuarios, es conocida como el
lado del cliente. Básicamente es todo lo que vemos en la pantalla cuando
accedemos a un sitio web o aplicación: tipos de letra, colores, adaptación para
distintas pantallas(RWD), los efectos del ratón, teclado, movimientos,
desplazamientos, efectos visuales… y otros elementos que permiten navegar
dentro de una página web. Este conjunto crea la experiencia del usuario.
Como hemos dicho, el desarrollador front end se encarga de la experiencia del
usuario, es decir, en el momento en el que este entra a una página web, debe ser
capaz de navegar por ella, por lo que el usuario verá una interface sencilla de usar,
atractiva y funcional.
Un desarrollador front end debe conocer los siguientes lenguajes de
programación: HTML5, CSS3, JavaScript, Jquery, Ajax.
 • Back End
Como hemos dicho antes, Front end es todo con lo que el usuario se encuentra
directamente en la web o aplicación, entonces cuando hablamos de “Back end” nos
referimos al interior de las aplicaciones que viven en el servidor y al que a menudo
se le denomina “el lado del servidor”.
El back end del sitio web consiste en un servidor, una aplicación y una base de
datos. Se toman los datos, se procesa la información y se envía al usuario. Los
desarrolladores de Front end y Back end suelen trabajar juntos para que todo
funcione correctamente.
Un desarrollador Back end debe tener amplios conocimientos de los siguientes
lenguajes: frameworks y los tipos de base de datos. No siendo necesario conocer
todos los lenguajes pero sí entender y saber trabajar con algunos de ellos.
ASP.NET , PHP, Python, Ruby, Node.js, Java, MySQL, SQL Server, PostgreSQL,
Oracle, MongoDB
2.5. Frameworks específicos vs Frameworks multipropósito.

El propósito de un framework es mejorar la eficiencia de la creación de un nuevo

software. Los framework pueden mejorar la productividad del desarrollador y
mejorar la calidad, la fiabilidad y robustez del nuevo software. La productividad del
desarrollador se ha mejorado al permitir a los desarrolladores centrarse en las
necesidades únicas de su aplicación, en lugar de pasar tiempo en la infraestructura
de aplicaciones.
2.6. Frameworks comerciales vs libres

En que el software de base de datos en línea que permite almacenar información

crítica del negocio en el software de base de datos Web, donde es fácilmente
accesible por todos los miembros del equipo.

Esto aumenta la colaboración en equipo y mejora la eficiencia del equipo y la

comunicación.
Struts, JSF, WebWork, Tapestry, Turbine, Shale y Trails

• Frameworks libres
Son diseñados con la intención de facilitar el desarrollo de software, permitiendo a
los diseñadores y programadores pasar más tiempo identificando requerimientos
de software que tratando con los tediosos detalles de bajo nivel de proveer un
sistema funcional. Por ejemplo, un equipo que usa Apache Struts para desarrollar
un sitio web de un banco, puede enfocarse en cómo los retiros de ahorros van a
funcionar en lugar de preocuparse de cómo se controla la navegación entre las
páginas en una forma libre de errores. Sin embargo, hay quejas comunes acerca
de que el uso de frameworks añade código innecesario y que la preponderancia
de frameworks competitivos y complementarios significa que el tiempo que se
pasaba programando y diseñando ahora se gasta en aprender a usar frameworks.

2.7. Aspectos de eficiencia, facilidad y seguridad.

Cuando se trata de desarrollo de aplicaciones web una de las métricas más

comunes que se mencionan es la eficiencia, lo cual se cae en una confusión con
la eficacia; la eficiencia es la habilidad o capacidad que tiene el framework para
mantener prestaciones apropiadas relativas al uso sobre los recursos que se
deba, la facilidad es que permite trabajar con el patrón de arquitectura de
software MVC., no necesita instalación previa, facilidad en la actualización del
Framework, permite crear URLs amigables de forma fácil, flexibilidad en usar
módulos propios o incorporar de nuevos y permite a los programadores trabajar
paralelamente en diferentes partes de la web (módulos).
La seguridad del software es una preocupación cada vez más importante para las
organizaciones. Sin embargo, pocos arquitectos abordan este atributo de calidad de
manera estratégica. Los arquitectos y desarrolladores frecuentemente ponen un
énfasis mayor en satisfacer los requerimientos funcionales, y la seguridad
usualmente es aplicada como un “parche” durante o después de que la aplicación
ha sido desarrollada.
Desarrollar código enfocado a la seguridad es una tarea compleja y, por ello,
frecuentemente se recurre a la adopción y uso de frameworks que se enfocan en
atender distintas áreas de la seguridad como pueden ser el control de acceso, el
cifrado y la validación de entradas entre otras.
Podemos identificar tres enfoques relativos a la adopción de frameworks como parte
del diseño de la arquitectura para resolver la seguridad:
• No adopción: La seguridad no es considerada dentro del diseño de la
arquitectura y solamente se codifican soluciones ad-hoc para tratar aspectos
de seguridad.

• Adopción parcial: Se introducen frameworks de seguridad después del

diseño inicial de la arquitectura.

• Adopción completa: La seguridad es considerada dentro del diseño inicial de

la arquitectura y parte de las decisiones del diseño incluyen el uso de
frameworks enfocados a la seguridad.
 Fuentes Consultadas

Listado de distintos frameworks CSS. (n.d.). Retrieved April 28, 2020, from
https://desarrolloweb.com/articulos/listado-frameworks-css.html

Lenguajes, frameworks y librerías backend para 2019 - [Incluye guía descargable].

(n.d.). Retrieved April 28, 2020, from https://platzi.com/blog/lenguajes-
frameworks-librerias-backend-2019/

Frameworks Web de lado servidor - Aprende sobre desarrollo web | MDN. (n.d.).
Retrieved April 28, 2020, from
https://developer.mozilla.org/es/docs/Learn/Server-
side/Primeros_pasos/Web_frameworks

Programación Web Frameworks para el Desarrollo de Aplicaciones Web - ppt

descargar. (n.d.). Retrieved April 28, 2020, from
https://slideplayer.es/slide/2747601/

Framework de Desarrollo de Software | Tópicos generales de Ingeniería de

Software. (n.d.). Retrieved April 28, 2020, from
https://ingsoftwarei2014.wordpress.com/category/framework-de-desarrollo-de-
software/

Programas Destacables: CRiPT 2000. (n.d.). Retrieved April 28, 2020, from
http://dummiesinformatica.blogspot.com/2011/05/cript-2000.html

plataformas de desarrollo, Frameworks comerciales by fernando contreras on Prezi.

(n.d.). Retrieved April 28, 2020, from https://prezi.com/jznlhotlnn8z/plataformas-
de-desarrollo-frameworks-comerciales/

Uso de Frameworks en el Desarrollo Web | Diseño Web Barcelona | Coexia. (n.d.).

Retrieved April 28, 2020, from https://www.coexia.com/uso-de-frameworks-en-
el-desarrollo-web/

Seguridad y uso de Frameworks | SG Buzz. (n.d.). Retrieved April 28, 2020, from
https://sg.com.mx/revista/47/seguridad-y-uso-frameworks

Framework - EcuRed. (n.d.). Retrieved April 28, 2020, from

https://www.ecured.cu/Framework