Framework de programacion de paginas web

UNIVERSIDAD DE CARABOBO
FACULTAD EXPERIMENTAL DE CIENCIA Y
TECNOLOGIA
DEPARTAMENTO DE COMPUTACION
UNIDAD ACADEMICA DE DESARROLLO WEB

FRAMEWORKS
Participante:

Docente:

Carlos Tovar

Lcdo. Gerardo Chemello

C.I.: 20.193.114

Bárbula, Noviembre de 2.013
__________________________________________________________________

¿QUÉ ES UN FRAMEWORK?
Un framework es un una estructura formada por componentes personalizables e
intercambiables para el desarrollo de una aplicación. Puede verse como un conjunto
de piezas predeterminadas para cualquier propósito de trabajo, a las que
agregándole otras piezas propias del proyecto, se completa para obtener el
resultado esperado.
Los objetivos principales de un framework son:




Acelerar los procesos de desarrollo.
Permitir la reutilización de código.
Promover buenas prácticas de desarrollo mediante el uso de patrones.

Un framework proporciona componentes y plantillas para facilitar la estructura de
las aplicaciones y garantizar su funcionamiento, así como una codificación sencilla

de cada elemento que se incluye para reducir el tiempo que se debe dedicar el
programador. No están ligados directamente a un lenguaje de programación en
concreto, aunque sea así en muchas ocasiones.
El uso de frameworks en el desarrollo de aplicaciones no es de carácter obligatorio,
sin embargo, es recomendable para factores de tiempo. La utilización de un
framework en el desarrollo de una aplicación implica un cierto coste inicial de
aprendizaje, aunque a largo plazo es probable que facilite tanto el desarrollo como
el mantenimiento.
Existen multitud de frameworks orientados a diferentes lenguajes, funcionalidades,
etc. Aunque la elección de uno de ellos puede ser una tarea complicada, lo más
probable que a largo plazo sólo los mejor definidos (o más utilizados, que no
siempre coinciden con los primeros) permanezcan. Y si ninguno de ellos se adapta
a las necesidades de desarrollo, siempre es mejor definir uno propio que desarrollar
"al por mayor".

Ventajas
1. Las principales ventajas de la utilización de un framework son:
2. El desarrollo rápido de aplicaciones. Los componentes incluidos en un
framework constituyen una capa que libera al programador de la escritura de
código de bajo nivel.
3. La reutilización de componentes software al por mayor. Los frameworks son
los paradigmas de la reutilización.
4. El uso y la programación de componentes que siguen una política de diseño
uniforme. Un framework orientado a objetos logra que los componentes sean
clases que pertenezcan a una gran jerarquía de clases, lo que resulta en
bibliotecas más fáciles de aprender a usar.

Desventajas
Las desventajas de los frameworks son:
1. La dependencia del código fuente de una aplicación con respecto al
framework. Si se desea cambiar de framework, la mayor parte del código
debe reescribirse.
2. La demanda de grandes cantidades de recursos computacionales debido a
que la característica de reutilización de los frameworks tiende a generalizar
la funcionalidad de los componentes. El resultado es que se incluyen
características que están "de más", provocando una sobrecarga de recursos
que se hace más grande en cuanto más amplio es el campo de reutilización.

Framework Web
Un framework para aplicaciones web es un framework diseñado para apoyar el
desarrollo de sitios web dinámicos, aplicaciones web y servicios web. Este tipo de
frameworks intenta reducir el trabajo asociado con actividades comunes usadas en
desarrollos web. Por ejemplo, muchos framework proporcionan bibliotecas para
acceder a bases de datos, estructuras para plantillas y gestión de sesiones, y con
frecuencia facilitan la reutilización de código.

Tipos de Arquitecturas de Frameworks web
Existen dos tipos de arquitecturas que son las más usadas en el desarrollo web:




MVC (Modelo vista controlador) – separa los datos y la lógica de la interfaz
de usuario y el módulo de gestión de eventos. Define los elementos del
programa en tres componentes: la vista (interfaz de usuario), el modelo
(representación de la información) y el controlador (responde a eventos).
Organización de tres niveles – En la organización de tres niveles, las
aplicaciones se estructuran en torno a tres niveles físicos: el cliente, la
aplicación y la base de datos. La base de datos es normalmente un RDBMS.
La aplicación contiene la lógica de negocio, que se ejecuta en un servidor y
se comunica con el cliente a través de HTTP. El cliente, en aplicaciones web
es un navegador web que ejecuta código HTML generado por la capa de
aplicación.

Etapas
Para el diseño de páginas web debemos tener en cuenta tres etapas:
1. El diseño visual de la información que se desea editar. En esta etapa se
trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y
otros objetos multimedia que se consideren pertinentes. Es importante que
antes de trabajar sobre el computador se realice un boceto o pre diseño sobre
el papel. Esto facilitará tener un orden claro sobre el diseño.
2. Estructura y relación jerárquica de las páginas del sitio web. Una vez que se
tiene el boceto se pasa a 'escribir' la página web. Para esto, y
fundamentalmente para manejar los vínculos entre documentos, se creó el
lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen
subrayados en este documento y otros de Wikipedia son ejemplos de
hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con
información relacionada. La importancia de la estructura y arborescencia web
radica en que los visitantes no siempre entran por la página principal o inicial

y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además
permitirle navegar por el sitio.
3. Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la
estructura del contenido para mejorar la posición en que aparece la página
en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos,
porque a diferencia del texto, aún para el año 2012 no se pueden tener
nuevos resultados en los buscadores con sitios muy gráficos.

MAQUETACIÓN
La maquetación es el posicionamiento en pantalla de los elementos que conforman
la página web a desarrollarse. Hace un tiempo atrás, la maquetación de las páginas
web se realizaba utilizando tablas <table>. Una vez entendido este proceso podía
resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo
complicado. El problema de las tablas es que generaban una página muy
encorsetada, y el código se volvía complejo de entender. Además, algunos
buscadores encontraban problemas al analizar la estructura de la página.
Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando
capas <div>, también llamadas divisiones o contenedores. La colocación de las
capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que
podamos pasar de un diseño con un menú lateral a otro con el menú en la parte
superior, sólo cambiando la hoja de estilos.

FRAMEWORKS PARA EL DESARROLLO WEB:
1.- 960 Grid System
El 960 Grid System es uno de los framewoks más populares para diseño web. Lleva
este nombre porque es un sistema de rejilla para hacer páginas con 960 píxeles de
ancho. Las columnas que podremos colocar en la rejilla tendrán distintas anchuras,
pero siempre el ancho total de la página será de 960 píxeles. Se ha elegido este
valor porque 960 es divisible por una buena cantidad de números, lo que lo hace
más versátil para poder alcanzar páginas resultantes de la más variada gama.
El propio framework dispone de dos variantes distintas, para hacer páginas
utilizando 12 o 16 columnas. No es necesario utilizar todas las columnas disponibles
para realizar la maquetación, sino que la rejilla tendrá esas divisiones verticales
donde se puede situar los elementos. La variante de 12 columnas da menos
posibilidades para repartir los espacios, pero en muchos de los casos será más que
suficiente para crear cualquier estructura de página. En cuanto a la variante de 16
columnas, da una gama mayor de posibles anchos para las columnas, que puede
ser necesaria en diseños con un nivel de detalle más alto.

En ambas variantes las columnas que se consiguen tienen un margen a cada lado
de 10 píxeles, por lo que si colocamos dos columnas, una al lado de otra, entre los
márgenes de las dos a la vez, obtendremos una separación de 20 píxeles entre
ellas.

2.- Blueprint
Blueprint es un framework CSS con el que incrementar la productividad a la hora de
llevar a cabos tareas de diseño y maquetación de páginas web, reduciendo los
tiempos de desarrollo y mejorando la compatibilidad entre los distintos navegadores
web cuando se trabaja con los estilos en cascada.
Características:








Una rejilla fácilmente personalizable
Tipografía sensible por defecto
Una tipografía básica
Reseteo CSS perfeccionado para navegadores
Una hoja de estilos para imprimir
Scripts potentes para personalización
Todo esto sin aumento de tamaño

El maquetado con Blueprint se basa en indicar posiciones de rectángulos que
dividen y agrupan los diferentes contenidos de una página web, con la libertad de
definir alineación, tamaño, ubicación, entre otros aspectos.

3.- Skeleton
Es una colección de recursos css y javascript que te pueden ayudar a construir sitios
web accesibles a los distintos dispositivos que hoy en día cuentan con internet.
Básicamente lo que hace Skeleton es dividir en columnas tu página, de tal forma
que cuando redimensiona el navegador estas columnas cambian automáticamente
de tamaño, permitiendo su correcta visualización en distintos dispositivos.
Tiene una rejilla familiar que es una variación del sistema de la rejilla del framework
960 y ligero como él mismo, hace elegante las escalas de las ventanas del
navegador reducido, tabletas, teléfonos móviles (en horizontal y vertical).
Es una herramienta para el desarrollo rápido. Útil para Comenzar rápidamente los
CSS y mejores prácticas, una red bien estructurada que hace que la consideración
móvil sea fácil, una estructura de archivo organizado y elementos de interfaz como:
formas básicas de estilos súper ligeros, botones, pestañas y más.

Skeleton proporciona un “esqueleto” para el ordenamiento de la página web, con
capacidades de reubicación frente a cambios en el tamaño de visualización. Esto
es, la estructura de la página no pierde su orden en visualizaciones de tamaños
varios, ya que es una variación de 960 Grid System, con capacidades adaptadas a
distintos navegadores, ya sean móviles o de escritorio, y de cualquier tamaño.
Funciona mediante el uso de los archivos CSS y las reglas incluidas en ellos, así
como las consultas de los medios para ver qué resolución de su sitio web se está
mostrando.

4.- Foundation
Es una maquetación basado en rejillas; está formado por lineas, que puedes dividir
en 12 columnas centradas en la pantalla. Cada una de ellas soporta nesting, es
decir, cada columna la puedes dividir a su vez en otras 12 columnas, más filas, etc...
Esto hace que sea muy flexible y le otorga la capacidad de armar cualquier diseño.
Foundation da prioridad a los contenidos móviles, lo que quiere decir que los
contenidos esenciales para que funcione la versión móvil son lo primero que se
envía a través de la red. Si el usuario está utilizando un móvil para acceder al sitio
web, entonces esos contenidos serán lo único que reciba. Si, por el contrario, el
usuario estuviera navegando utilizando un dispositivo con mayor pantalla y potencial
velocidad de conexión y capacidad de proceso que un móvil (como puede ser un
PC u ordenador portátil), entonces los restantes contenidos sí se enviarían a través
de la red, completando la información mínima enviada inicialmente.
Es una versión que aplica la técnica de Mobile First, eso significa que se diseña al
revés de lo normal, es decir, primero se diseña para que se vea bien en celulares y
de ahí se crece hacia arriba. Es una técnica con varias ventajas importantes.
Proporciona unos tiempos de carga mínimos para aquellos usuarios que naveguen
desde sus móviles, sin que ello perjudique la experiencia de usuario de otros tipos
de usuarios.

5.- Bootstrap
Este framework es uno de los más populares del mercado, habiendo sido
desarrollado por el equipo de Twitter. Bootstrap ha sido creado pensando en ofrecer
la mejor experiencia de usuario tanto a usuarios de PC, como a smartphones y
tabletas. Utiliza un grid responsive de 12 columnas y trae integrado docenas de
complementos, plugins de JavaScript, tipografía, controladores de formularios y
mucho más. Además utiliza el preprocesador de CSS Less.
Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es
compatible con la mayoría de los navegadores web. La información básica de

compatibilidad de sitios web o aplicaciones está disponible para todos los
dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace
disponible la información básica de un sitio web para todos los dispositivos y
navegadores.
Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas,
gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de
navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es
requerida para su uso. Desde la versión 2.0 también soporta diseños sensibles. Esto
significa que el diseño gráfico de la página se ajusta dinámicamente, tomando en
cuenta las características del dispositivo usado (Computadoras, tabletas, teléfonos
móviles).
Bootstrap es de código abierto y está disponible en GitHub. Los desarrolladores
están motivados a participar en el proyecto y a hacer sus propias contribuciones a
la plataforma.

6.- Jquery UI
Query UI es una biblioteca de componentes para el framework jQuery que le añaden
un conjunto de plug-ins, widgets y efectos visuales para la creación de aplicaciones
web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery
“encuentra algo, modificalo”.
La biblioteca se divide en cuatro módulos:
Núcleo: Contiene las funciones básicas para el resto de módulos.
Interacciones: Añade comportamientos complejos a los elementos:






Draggable: Hace al elemento arrastrable.
Droppable: Permite que el elemento responda a elementos arrastrables.
Resizable: Permite redimensionar el elemento.
Selectable: Permite seleccionar entre una lista de elementos.
Sortable: Ordena una lista de elementos.

Widgets: Es un conjunto completo de controles UI. Cada control tiene un conjunto
de opciones configurables y se les pueden aplicar estilos CSS.








Accordion: Menú con efecto acordeón.
Autocomplete: Caja con autocompletado.
Button: Botón.
Dialog: Ventanas con contenido.
Slider: Elemento para elegir en un rango de valores.
Tabs: Pestañas.
Datepicker: Calendario gráfico.



Progressbar: Barra de progreso.

Efectos: Una API para añadir transiciones animadas y facilidades para
interacciones.
















Core: Amplía los efectos de jQuery incluyendo morphing, requerido por el
resto de efectos.
Blind
Bounce
Clip
Drop
Explode
Fade
Fold
Highlight
Pulsate
Scale
Shake
Slide
Transfer
ashgahs

JAVASCRIPT
JavaScript es un lenguaje de programación que se utiliza principalmente para crear
páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos
como texto que aparece y desaparece, animaciones, acciones que se activan al
pulsar botones y ventanas con mensajes de aviso al usuario. Técnicamente,
JavaScript es un lenguaje de programación interpretado, por lo que no es necesario
compilar los programas para ejecutarlos. En otras palabras, los programas escritos
con JavaScript se pueden probar directamente en cualquier navegador sin
necesidad de procesos intermedios. A pesar de su nombre, JavaScript no guarda
ninguna relación directa con el lenguaje de programación Java.

Ventajas y Desventajas
Desde su aparición, JavaScript siempre fue utilizado de forma masiva por la mayoría
de sitios de Internet. La aparición de Flash disminuyó su popularidad, ya que Flash
permitía realizar algunas acciones imposibles de llevar a cabo mediante JavaScript.
Sin embargo, la aparición de las aplicaciones AJAX programadas con JavaScript le
ha devuelto una popularidad sin igual dentro de los lenguajes de programación web.

En cuanto a las limitaciones, JavaScript fue diseñado de forma que se ejecutara en
un entorno muy limitado que permitiera a los usuarios confiar en la ejecución de los
scripts. De esta forma, los scripts de JavaScript no pueden comunicarse con
recursos que no pertenezcan al mismo dominio desde el que se descargó el script.
Los scripts tampoco pueden cerrar ventanas que no hayan abierto esos mismos
scripts. Las ventanas que se crean no pueden ser demasiado pequeñas ni
demasiado grandes ni colocarse fuera de la vista del usuario (aunque los detalles
concretos dependen de cada navegador).
Además, los scripts no pueden acceder a los archivos del ordenador del usuario (ni
en modo lectura ni en modo escritura) y tampoco pueden leer o modificar las
preferencias del navegador.
Por último, si la ejecución de un script dura demasiado tiempo (por ejemplo por un
error de programación) el navegador informa al usuario de que un script está
consumiendo demasiados recursos y le da la posibilidad de detener su ejecución.
A pesar de todo, existen alternativas para poder saltarse algunas de las limitaciones
anteriores. La alternativa más utilizada y conocida consiste en firmar digitalmente el
script y solicitar al usuario el permiso para realizar esas acciones.

Jquery
jQuery es considerado un Framework de Javascript, o ambiente de desarrollo. Lo
que no es más que un conjunto de utilidades las cuales no necesitan ser
programadas, de hecho ya fueron programadas, probadas y podemos utilizarlas de
una manera muy simplificada. En otras palabras, podremos lograr los mismos
resultados, en menos tiempo sin necesidad de programar una funcionalidad
completamente.
jQuery nos permite agregar efectos y funcionalidades complejas a nuestro sitio web,
como por ejemplo: galerías de fotos dinámicas y elegantes, validación de
formularios, calendarios, hacer aparecer y desaparecer elementos en nuestra
página y muchas otras poderosas opciones. Otra ventaja sin duda es la posibilidad
que nos brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos
de la programación.

MooTools
Mootools es un conjunto de librerías, también llamado API, que proveen clases de
programación orientada a objetos en Javascript, para realizar una amplia gama de
funcionalidades en páginas web, como trabajo con capas, efectos diversos, Ajax y
mucho más. Con Mootools podemos programar todo tipo de scripts en el cliente

rápidamente y sin preocuparnos de las distintas particularidades de cada
navegador.
Mootools es una opción interesante, bastante difundida y que tiene una serie de
ventajas como:







Ligero: el framework no pesa demasiado en Kb y no el procesamiento carga
poco al navegador.
Modular: mootools se compone de diversos módulos y podemos seleccionar
los que vamos a utilizar para incorporarlos en nuestras páginas web, dejando
los otros para que no ocupen tiempo de descarga ni procesamiento.
Libre de errores: podemos confiar en el sistema porque Mootools las
herramientas de Mootools funcionan perfectamente, sin emitir errores en
tiempo de ejecución.
Soportado por una amplia comunidad: existen muchos desarrolladores que
lo utilizan con éxito y han creado una serie de componentes adicionales ya
listos para usar en nuestras páginas web, como calendarios, editores de
texto, etc.

RESPONSIVIDAD
Es una técnica de diseño y desarrollo web que mediante el uso de estructuras e
imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue
adaptar el sitio web al entorno del usuario. Esto entrega la capacidad al diseño web
de las páginas que se centren en cómo mostrarse a un usuario o qué mostrarle.

Origen
Aunque no se propuso inicialmente como un método para crear sitios para los
móviles, el diseño flexible ha ganado recientemente mucha atención como una
forma de dar los primeros pasos para el desarrollo de sitios que sean compatibles y
amigables con los móviles en vez de tener un sitio separado para los mismos.
Se ahorra tiempo y dinero, ya que no es necesario mantener sitios web separados
para los diferentes dispositivos. El diseño flexilbe ofrece cada página con una sola
y única URL. Las estadísticas compartidas de las redes sociales (Facebook Likes,
Tweets, 1 en Google plus) no están divididas, ya que las versiones de tus páginas
web para el escritorio y los móviles utilizan la misma URL.El diseño adaptativo no
se preocupa por los agentes de usuario.
Hay aspectos realmente buenos en este enfoque. Puesto que no se basa en la
detección del navegador del usuario, tiene más capacidad de adaptarse cara al
futuro que el enfoque de sitios separados. Para sitios sencillos, puede ser más fácil
de implementar y mantener que otras opciones.

Usos
A pesar de ser un método relativamente nuevo, ya están apareciendo mejores
prácticas. Por ejemplo, si se está diseñando un sitio desde cero con esta opción en
mente, por lo general vale la pena crear primero un diseño de pantalla pequeña, de
manera que las limitaciones del telefono móvil están contigo desde el principio.
También es de gran utilidad la mejora progresiva de los estilos del creador en lugar
de ocultar los elementos de un sitio actual con preguntas de los medios. De esta
manera, los navegadores antiguos que no admitan las preguntas de los medios
siguen mostrando la disposición adecuada.

¿Por qué usar la responsividad?
Cada día, muchos usuarios son más exigentes en la forma en la que se les muestra
la información de una página web, por lo que el uso de la responsividad es la
solución a dicha petición. Muy por encima de mostrar lo que se desea, se ubica
mostrar de manera correcta según los criterios de búsqueda proporcionados.
Como se mencionó anteriormente, debido a que los cambios de contenido pueden
resultar difíciles, cuando se toma este enfoque, no somos capaces de dar a los
usuarios una experiencia radicalmente diferente en el móvil sin un aumento
significativo en la complejidad del código. Entonces, si las versiones del escritorio y
los móviles son muy similares, este enfoque es una opción muy buena. Ésto es
partir de páginas bien adaptadas a sitios centrados en los datos, como las páginas
de producto.

Framework de programacion de paginas web

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Framework de programacion de paginas web

Framework de programacion de paginas web