Introducción a la Programación Web: Estáticas, Dinámicas y Herramientas - Prof. de Miguel , Guías, Proyectos, Investigaciones de Arquitectura de ordenadores

¡Descarga Introducción a la Programación Web: Estáticas, Dinámicas y Herramientas - Prof. de Miguel y más Guías, Proyectos, Investigaciones en PDF de Arquitectura de ordenadores solo en Docsity! Universidad politécnica de Tapachula Carrera Ing. en Software Materia Programación web Catedrático Alfredo Castillo Solís Proyecto Herramientas para desarrollar páginas web estáticas y dinámicas del lado del cliente. Equipo Jorge Elías Solórzano Cruz Jatniel Escobar Aguilar Ángel Arrazate Jiménez Jorge Cesar Rodríguez Rincón Manuel Briones Tapachula, Chipas a 23 de febrero del 2014. Índice 1.- introducción 2.- Página web dinámica y estática 3.-¿Qué es un framework? 4.-Ventajas y sus desventajas 5.-Framework web - Etapas 6.- Maquetación 7.- Frameworks para el desarrollo web: - 960 Grid System - Blueprint - Skeleton - Foundation - Bootstrap - Jquery UI JAVASCRIPT • Ventajas y desventajas • Jquery • MooTools Introducción El desarrollo de software para web presenta muchas alternativas para su implementación. Diversos lenguajes de programación conviven en la web, siendo los más populares JAVA, PHP, Ruby, ASP. A medida que las tecnologías Avanzan, los requerimientos funcionales de los sistemas crecen y los tiempos de desarrollo disminuyen, el desarrollador se enfrenta a la 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: 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 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. 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. 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. 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. Conclusión En conclusión, el trabajo del desarrollador web (esa especie de alquimista obligado a dominar y combinar variables tan dispares, y a veces de apariencia incompatible, como la usabilidad y el atractivo de cara al usuario, y la efectividad técnica de cara a la empresa que paga sus honorarios, como por ejemplo en el caso de tiendas on-line), este trabajo, decía, es un proceso largo que requiere un enorme grado de instrucción y aprendizaje técnico, pero también generosas dosis de intuición y anticipación. A fin de cuentas, la Red muta y crece cada poco tiempo, y no podemos quedar atrás. Buena suerte.