Diapositiva 1
Total Page:16
File Type:pdf, Size:1020Kb
SESION # 1 1. Información del curso 2. Introducción al desarrollo web 3. Tecnologías para el desarrollo web 4. Introducción a HTML 5. Etiquetas básicas de HTML Profesor Deivis Rodríguez O. [email protected] Dpto. de Ingeniería de Sistemas Universidad de Córdoba Metodología Clases presenciales (magistrales) Clases 90% practicas en la sala de computo Asignación de actividades por plataforma Cintya Publicación de las sesiones en diapositiva en la plataforma Seguimiento de las practicas (un ítem dentro de la evaluación) Asignación proyecto Final (en grupo de 2 estudiantes) Cada corte tiene: a) Talleres b) Seguimiento de las practicas 1. Información del curso del Información 1. c) Avances del proyecto final d) Examen Corte # 1: Tecnologías del FrontEnd Corte # 2: Tecnologías del BackEnd Corte # 3: Desarrollo del proyecto (prototipo funcional) Objetivos Profundizar los conocimientos y técnicas de programación avanzadas, aprovechando el auge del Internet y la necesidad de crear aplicaciones que corran sobre navegadores web (aplicaciones cliente-servidor, concurrentes, multiplataformas, que solo necesiten un navegador web y acceso a Internet). Demostrar entendimiento y dominio de técnicas de programación eficientes, tanto tradicionales, como algunas nuevas, que sobre todo, funcionan en ambientes de desarrollo que tienen un gran uso, como el entorno de desarrollo web. Lograr la adquisición de los conocimientos sobre técnicas avanzadas para la programación de aplicaciones, buscando desarrollar nuevas estrategias 1. Información del curso del Información 1. en la solución de problemas con apoyo de la programación de sistemas de información. Aplicar los conceptos teóricos, adquiridos en clase y en el desarrollo de talleres y laboratorios para implementar y un proyecto que apoye la solución de un problema del contexto. Competencias GENERALES Desarrollar sistemas y servicios de información para la web, aplicando principios de la Ingeniería del Software, tales como metodologías o estándares, mediante el uso técnicas actuales y de un nivel avanzado con el apoyo de tecnologías eficientes para el desarrollo de aplicaciones web. Elaborar aplicaciones web complejas, robustas y seguras, con gran nivel de usabilidad, que integren objetos interactivos, y que puedan ser utilizadas desde tanto desde equipos de escritorio, como desde dispositivos móviles. 1. Información del curso del Información 1. Determinar los recursos y tipos de datos para la implementación de una solución a los problemas planteados, que permitan integrar diferentes sistemas, aplicaciones o servicios web para generar una nueva solución. Competencias ESPECIFICAS Conocer, analizar y comparar las ventajas competitivas de las diferentes técnicas y tecnologías para ofrecer información interactiva y multimedia en el cliente web. Aprovechando las ventajas en la disminución de tiempo y recursos, que tiene el uso de un framework de desarrollo, tanto para la programación cliente, como la programación del lado del servidor. Seleccionar las tecnologías y la infraestructura necesaria, incluyendo la de los navegadores web (librerías Javascript, frameworks Javascript, framework CSS), para dar soporte a experiencias ricas de usuario. 1. Información del curso del Información 1. Conocer, colocar en funcionamiento y saber utilizar herramientas y entornos de desarrollo para la creación de software para el cliente web y del lado del servidor. Diseñar y desarrollar objetos interactivos y objetos multimedia para las aplicaciones web. Competencias CAPACIDADES DEL ESTUDIANTE Con el desarrollo del curso el estudiante debe tener la capacidad de: • Interactuar con el navegador y el usuario utilizando Javascript. • Validar formularios del lado del cliente. • Aplicar diseño responsable, mediante el frameworks Bootstrap • Manipular los contenidos de una página en tiempo real. • Generar contenidos de forma dinámica. • Comprender la estructura de datos JSON para compartir datos • Realizar pedidos a un servidor sin recargar la página (AJAX). • Utilizar JSON para intercambiar datos. • Incluir tecnologías para facilitar el trabajo (JQuery, Angular). 1. Información del curso del Información 1. • Almacenar información en el navegador utilizando la API HTML5. • Interactuar con la localización del usuario utilizando Geolocalización. • Construir bloques de código reutilizables y modulares. • Comprender los flujos de trabajo de un desarrollador FrontEnd. • Emplear un framework de desarrollo del lado del servidor como CakePHP Algunos Apuntes El desarrollo web es un disciplina que se desprende de la programación y la ingeniería de software, con el objetivo de construir sistemas de información que puedan ser desplegados en Internet (específicamente en el servicio de la WWW). Estas aplicaciones también son conocidas con WebApps. El entorno con el cual se trabaja con las WebApps es un poco distinto con el que generalmente se encuentra un “programador convencional”, pues podemos decir que este ultimo profesional se encarga de crear aplicaciones de escritorio, en las cuales la programación se realizara para ser ejecutada en un mismo equipo (aunque también existen aplicaciones que se conectan a la red para obtener datos de un servidor especifico, así como lo hacen las WebApps) - Las WebApps generalmente son aplicaciones diseñadas para recibir solicitudes concurrentes. - Las WebApps se deben diseñar y programar teniendo en cuenta dos entornos: • BackEnd - Programación para el cliente • FrontEnd -Programación para el servidor 2. Introducción al desarrollo web desarrollo al Introducción 2. - En cada entorno se utilizan una serie tecnologías (herramientas, lenguajes, librerías, frameworks) que con el avance del tiempo van mejorando y permitiendo el desarrollo de nuevas tecnologías o la aparición de otras. Evolución de la Web • Primitiva • Unidireccional WEB 1.0 • Divulgativa (1990) • Diseños muy pobres • Contenidos estáticos • Compartir conocimientos WEB 2.0 • Colaborativa (2000) • Redes Sociales • Sitios web dinámicos • Semántica WEB 3.0 • Web de la nube (2010) • Aplicaciones multidispositivos 2. Introducción al desarrollo web desarrollo al Introducción 2. • Mapas interactivos Entorno Web Despliegan y Ejecutan WebApps Arquitectura Cliente-Servidor - Microsoft IIS - Mozilla Firefox - Apache - Google Chrome - Tomcat - Internet Explorer - NodeJS - Opera - Nginx - Safari - Cherokee - Netscape - Lighttpd Servidores Web - Caddy Navegadores Web (Browser) Web Navegadores Clientes realizan peticiones (Resquest) Servidor envía respuesta (Response) Mediante el protocolo HTTP En flujo HTML - Utilizando métodos como GET y POST - Aunque también puede responder 2. Introducción al desarrollo web desarrollo al Introducción 2. - HTTP protocolo sin estado (utiliza sesiones y cookies) mediante imágenes, PDF u otros - Se establece una comunicación asíncrona formatos -También se utilizan WebServices, API Rest Entorno Web Aplicaciones Web - Desarrollo de WebApps personalizadas y para un propósito especifico - Aplicaciones web de propósito general: . CMS (Joomla, Wordpress, Drupal) . CMS Especializados o Foros (PHPBB2, Vanilla) o LMS (Moodle, Claroline, Dokeos, Blackboard) o Atención al usuario (OSTicket) o Revistas electrónicas (Open Journal System) o Administrador de bases de datos (PHPMyAdmin) o Comercio electrónico (OSCommerce, OpenCart) o Wiki (MediaWiki) o ePortfolio y Redes sociales (Mahara) o Galería de fotos (EasyGallery) o Redes sociales (Elgg, Dolphin) o Administradores de proyectos, encuestas, RSS, calendarios, libros de 2. Introducción al desarrollo web desarrollo al Introducción 2. visitas, administrador de archivos - PhoneGap Tecnologías a Utilizar FrontEnd BackEnd Un lenguaje del lado del servidor - Contenido - Estructura Apariencia Comportamiento Acceso a bases de datos 3. Tecnologías a utilizar a Tecnologías 3. Bases del Desarrollo Web Tecnologías a Utilizar • Es la capa que se muestra al usuario, desplegada en el navegador FrontEnd • Son las aplicaciones con las que el usuario final puede interactuar - HTML Tecnologías estandarizadas por la W3C - CSS -JavaScript Los navegadores tienen un motor de renderización - Gecko, utilizado en Mozilla Suite, y otros navegadores como Galeon. - Trident, el motor de Internet Explorer para Windows. - KHTML/WebCore, el motor de Konqueror. - Presto, el antiguo motor de Opera. - Tasman, el motor de Internet Explorer para Mac. - gzilla, el motor de Dillo. - GtkHTML, el motor de Links. 3. Tecnologías a utilizar a Tecnologías 3. - WebKit, el motor de Epiphany, Safari. - Blink, el nuevo motor de Google Chrome, Opera y Maxthon. - Servo, motor en desarrollo por parte de Mozilla (con el apoyo de Samsung) Tecnologías a Utilizar FrontEnd El punto de partida para todo aspirante a diseñador a) Diseñar web es aprender las dos tecnologías básicas. HTML: (HyperText Markup Language), define la estructura semántica de un sitio, mediante el uso de etiquetas. No es un lenguaje de programación. Actualmente se utiliza HTML5, también podemos encontrar los términos HTML4, XHTML y DHTML CSS: (Cascade Style Sheet), define la apariencia del sitio web por medio de selectores ó reglas. No es un lenguaje de programación. Actualmente se trabaja con CSS3 Este grafico representa una idea generalizada de los que es HTML y CSS, aunque en la actualidad la funcionalidad de ambas tecnologías no es 3. Tecnologías a utilizar a Tecnologías 3. precisamente como lo hace pensar el grafico, pues todo el maquetado, disposición de los elementos, la paleta de colores y diferentes formatos se realizan exclusivamente con