Framework de programacion de paginas web

3,702 views

Published on

frameworks de programacion web

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,702
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
99
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Framework de programacion de paginas web

  1. 1. 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
  2. 2. 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.
  3. 3. 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
  4. 4. 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.
  5. 5. 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.
  6. 6. 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
  7. 7. 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.
  8. 8.  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.
  9. 9. 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
  10. 10. 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.
  11. 11. 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.

×