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 ) 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 , 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, ). 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 - - 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 (, Wordpress, ) . 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. - , 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 CSS Tecnologías a Utilizar FrontEnd

Frameworks CSS CSS Grid Layout Responsive Web Design

Un framework es un conjunto de hojas de estilos y herramientas gráficas preconstruidas con el objetivo que el desarrollador se centre en los aspectos particulares del sitio, los frameworks CSS en sí no son una novedad, pero sin duda alguna en muchos proyectos son necesarios para agilizar el proceso de desarrollo, algunos de los más conocidos son:

 Materialize (Google - https://materializecss.com)

3. Tecnologías a utilizar a Tecnologías 3.  Bootstrap (Twitter - https://getbootstrap.com)  Semantic (https://semantic-ui.com)  Foundation (https://foundation.zurb.com)  Bulma (https://bulma.io) Tecnologías a Utilizar FrontEnd

Preprocesadores CSS

Un preprocesador nos permite usar características de un lenguaje de programación pero para CSS, facilitando el mantenimiento y agilizando el desarrollo, algunas de las características más comunes son el uso de variables, mixins, módulos, anidación, etc, pero siempre nos entrega un CSS compatible con los navegadores, ya que se trata de características que no son propias de CSS. Los 3 preprocesadores más comunes son:

 Less (http://lesscss.org)  Sass (https://sass-lang.com) 3. Tecnologías a utilizar a Tecnologías 3.  Stylus (http://stylus-lang.com) Tecnologías a Utilizar FrontEnd

Otras herramientas CSS

PostCSS: (https://postcss.org) no es un pre-procesador, ni un post-procesador, el sitio oficial lo define como una herramienta para transformar css con Javascript, PostCSS posee un ecosistema de plugins los cuales hacen posibles esta transformación.

CSSNext : (https://cssnext.github.io) es un plugin de PostCSS, aunque aún se conoce como CSSNext el nombre oficial es PostCSS-cssnext, este plugin nos permite usar

literalmente el CSS del futuro, transformando las nuevas 3. Tecnologías a utilizar a Tecnologías 3. especificaciones a una versión compatible con los navegadores, sin esperar a que estos las soporten. Tecnologías a Utilizar FrontEnd

b) Programar

 JavaScript: es el lenguaje de programación soportado por los navegadores.

Librerías JavaScript

-Las librerías JavaScript son archivos con instrucciones para agregarle diversas funcionalidades y efectos a las páginas.

-Todos los navegadores modernos incluyen de forma nativa JavaScript, lo que les permite interpretar funciones básicas, estas librerías agregan otros recursos para manipular la estructura de las paginas (DOM) de forma dinámica y el estilo visual

(CSS), como demanda la web moderna. 3. Tecnologías a utilizar a Tecnologías 3.

- Estos archivos son proporcionados por diferentes servicios en la red y se pueden descargar libremente o enlazarlos a las páginas. Tecnologías a Utilizar FrontEnd

Librerías JavaScript Estas son las librerías más utilizadas:

1 JQuery https://jquery.com/

 JQuery es la librería más popular para trabajar con JavaScript.  jQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones. Hace que cosas como el desplazamiento y la manipulación de documentos HTML, el manejo de eventos, efectos, las animaciones y el trabajo con AJAX sean mucho más simple, cuenta con una API fácil de usar que funciona en una multitud de navegadores. Con una combinación de versatilidad y extensibilidad que permiten realizar cambios de forma dinámica en el DOM, cuenta con extensiones como:  JQuery UI: conjunto de componentes de interfaz de usuario, efectos, widgets y temas. https://jqueryui.com

3. Tecnologías a utilizar a Tecnologías 3.  JQuery Mobile: es un sistema de interfaz de usuario basado en HTML5 diseñado para crear sitios web y aplicaciones accesibles en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio. https://jquerymobile.com  Gama amplia de plugins  Otros proyectos como: Sizzle (https://sizzlejs.com) y QUnit (https://qunitjs.com) Tecnologías a Utilizar FrontEnd

Librerías JavaScript Estas son las librerías más utilizadas: 2 Otras Librerías – Parte I

 Bootstrap: es una librería para adicionar funcionalidades adicionales a las páginas, por ejemplo botones, menús, barras de navegación, paneles, visores de imágenes, etc. Se apoya en JQuery. https://getbootstrap.com

 Modernizr: es una librería que detecta funcionalidades HTML5 y CSS3 en los navegadores web. Es solo un método de detección y no agrega ninguna funcionalidad adicional. https://github.com/Modernizr/Modernizr

 Prototype: enfocado principalmente en creación de contenido dinámico y actualizaciones asíncronas en páginas y aplicaciones web. Su librería es usada por varios 3. Tecnologías a utilizar a Tecnologías 3. proyectos. http://prototypejs.org

 Script.aculo.us: librería JavaScript basada en Prototype, al que agrega efectos visuales, controles y utilidades. https://script.aculo.us Tecnologías a Utilizar FrontEnd

Librerías JavaScript Estas son las librerías más utilizadas:

3 Otras Librerías – Parte II Extensiones reactivas

 MooTools: modular, orientado a objetos. Proyecto inspirado en Prototype, permite agregar efectos simples y básicos a las páginas, usando una librería de pequeño tamaño, que se puede personalizar completamente. http://mootools.net

 ASP.NET Ajax: basada en ASP.NET, desarrollada por Microsoft. La usan todos los sitios de esta empresa y varios sitios de internet. https://docs.microsoft.com/en-us/aspnet/ajax

 AngularJS: Librería JavaScript de código abierto mantenida por Google y varios desarrolladores independientes, para crear aplicaciones web de una sola página. https://github.com/angular/angular.js

3. Tecnologías a utilizar a Tecnologías 3.  Otras librerías: Aurelia, BackboneJS, CanJS, Choo, Cycle.js, DHTMLX, Dojo, Ember.js, Ext JS, Glimmer.js, GSAP, HyperApp, Inferno, , Marionette, Marko, , Mithril, MochiKit, p5.js, Polymer, Preact, Riot, Reagent, RxJS, Semantic UI, Shadowbox, Sizzle, Spry, , Underscore, YUI Library, Zepto. Muchas de estas librerías se consideran también como frameworks Tecnologías a Utilizar FrontEnd

Frameworks JavaScript

- En la actualidad podemos encontrar tres de los frameworks más utilizados y demandados, están basados en componentes, un componente es similar a una pieza de lego, en donde creas piezas con estilo y comportamiento propio, ejemplo un buscador. - Estas tecnologías son útiles en la creación de aplicaciones de tipo SPA o aplicaciones de una sola página

 React http://reactjs.org  Angular https://angular.io

 Vue.js https://vuejs.org 3. Tecnologías a utilizar a Tecnologías 3. Tecnologías a Utilizar FrontEnd

Ajax

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Transferencia de datos Generalmente el intercambio de información puede darse con: • JSON • XML

3. Tecnologías a utilizar a Tecnologías 3. Librerías adicionales -Librerías para graficar - Mapas, geolocalización - SGV Tecnologías a Utilizar FrontEnd

Tendencias y otras herramientas en el Desarrollo Web (I) 1. SuperSet: es como una capa alrededor de Javascript en la que disponemos de una serie de características que no están disponibles en el lenguaje, y que nos hacen seguir cierta forma de desarrollo que no es posible en Vanilla Javascript. Estos no transcompilan a ensamblado web sino a Vanilla JS o Javascript puro.  CoffeeScript https://coffeescript.org  TypeScript http://www.typescriptlang.org  Elm http://elm-lang.org  Babel https://babeljs.io  ES6  Flow Reason, ClojureScript, PureScript, Dart, Kotlin, Scala, Haxe

3. Tecnologías a utilizar a Tecnologías 3. 2. Task Runner: nos permite automatizar el flujo de trabajo, concatenando y minificando los archivos. [Construcción y desarrollo de codigo]  Rollup https://rollupjs.org  Gulp https://gulpjs.com  Grunt https://gruntjs.com Tecnologías a Utilizar FrontEnd

Tendencias y otras herramientas en el Desarrollo Web (II)

: es un module bundler que en pocas palabras simplemente es el proceso de unir un grupo de módulos (y sus dependencias) en un solo archivo (o grupo de archivos) en el orden correcto. https://webpack.js.org

3. Gestores de paquetes: Nos permiten tener a nuestra disposición cualquier librería y usarlas con tan solo unas pocas líneas de código, nos permiten administrar nuestros módulos y gestionar dependencias de una forma más segura.  https://www.npmjs.com  Yarn https://yarnpkg.com/lang/en

4. Otras herramientas  GraphQL https://graphql.org/learn

 JAMStack https://jamstack.org 3. Tecnologías a utilizar a Tecnologías 3.  Web Components https://www.webcomponents.org/  Aplicaciones hibridas (Electron, Ionic, NativeScript o )  Desarrollo de Bots e IA, Chatbot, PWA, One Page Website,  Big data, Blockchain, Páginas seguras y WPO, JAM (Jekyll, Hugo) Tecnologías a Utilizar

Es la programación realizada para desplegarse en el servidor, recibe los datos, procesa las peticiones, la principal utilidad de esta capa es BackEnd manipulación de datos mediante la conexión a un gestor de base de datos (SGBD). No es accesible directamente por los usuarios

- Las peticiones realizadas por los clientes son recibidas y procesadas por los servidores web, que son los que se encargan en este caso de delegar ciertas funciones a un lenguaje de programación que pueda “entender” las instrucciones del archivo solicitado. Por ejemplo: cuando a un servidor (Apache) se le solicita un archivo con extensión PHP, por un momento se le paso el control al interprete de PHP que esta instalado como modulo de Apache para que “revise” el archivo y devuelva una respuesta en formato HTML para ser enviada al cliente.

Servidores Web - Microsoft IIS - Apache - Tomcat

3. Tecnologías a utilizar a Tecnologías 3. - NodeJS - Nginx - Cherokee - Lighttpd - Caddy Tecnologías a Utilizar BackEnd

Lenguajes del lado Servidor

Se busca generar contenido dinámico CRUD  PHP: Es el lenguaje recomendado para los que se inician, sobre todo por la curva de aprendizaje. Se utiliza como modulo de Apache. A la combinación de este lenguaje con Linux, Apache y MySQL se le denomina LAMP. Se puede trabajar estructurado, con funciones, con 3 capas con MVC, orientado a objetos.  ASP: Herramienta de Microsoft, que actualmente se puede trabajar con .NET y reutilizar código de Visual Basic entre otras herramientas de esta empresa. Necesita el WebServer ISS  JSP: Básicamente es , para su utilización es necesario Apache Tomcat  Ruby  Python

 C# 3. Tecnologías a utilizar a Tecnologías 3.  Groove, , Elixir, Scala, Clojure, Rust Tecnologías a Utilizar BackEnd MVC - ORM Frameworks para el BackEnd (I)

Al igual que el Frontend existen frameworks para cada lenguaje, agilizando el desarrollo.  (PHP) https://laravel.com  ASP . NET MVC (ASP) https://dotnet.microsoft.com/apps/aspnet/mvc  Spring (Java) https://spring.io Spring Boot y Spring Cloud (Java)  (Ruby) https://rubyonrails.org  (Python) https://www.djangoproject.com  (Groove) https://grails.org  CakePHP (PHP) https://cakephp.org  Zend Framework (PHP) https://framework.zend.com  (PHP) https://www.yiiframework.com  (PHP) https://symfony.es  KumbiaPHP (PHP) https://www.kumbiaphp.com/blog/ COLOMBIANO! 3. Tecnologías a utilizar a Tecnologías 3.  PHP: Aura, FuelPHP, Slim, , CodeIgniter, PHPixie, Zikula, , Flight  JAVA: JSF, Struts, Hibernate (ORM), DropWizard, Blade, Tecnologías a Utilizar BackEnd Frameworks para el BackEnd (II)  GWT http://www.gwtproject.org  Elixir:  Wicket https://wicket.apache.org  Vert.X https://vertx.io  Play https://www.playframework.com  Python: Pyramid, , Microframeworks (, ), Framework asincronos (, Sanic), TurboGears  NodeJS: Express.js, Koa2, Sails.js, NestJS, Meteor  Ruby: ,  GoLang: , Beego, Iris, Revel, Gin, Martini, Gorilla

Nuevos frameworks y lenguajes con los cuales podemos crear aplicaciones web con

3. Tecnologías a utilizar a Tecnologías 3. un muy buen rendimiento  Go: Es un lenguaje creado por Google, también conocido como Golang.  NodeJs: Es un entorno de ejecución de Javascript del lado del servidor.  .Net Core: Es una versión open source de .Net, es multiplataforma, contiene muchas de las mismas API que .NET Framework pero es un conjunto más pequeño. Tecnologías a Utilizar BackEnd API

 REST API: La interacción entre aplicaciones es muy común, esta interacción hasta hace unos años se daba gracias a la creación de API REST, en donde una aplicación expone datos o genera operaciones por medio de la especificación HTTP.

 GraphQL: Es una nueva API creada por Facebook, es como una combinación de un lenguaje de consulta como SQL y REST, debes de crear un servidor capaz de responder consultas de GraphqQL, la aplicación cliente define esas consultas y la aplicación backend debe entenderlas, ejecutarlas y retornar datos. En pocas palabras GraphQL, es una sintaxis que describe cómo solicitar datos.

WebServices, Rest, RestFul 3. Tecnologías a utilizar a Tecnologías 3. Tecnologías a Utilizar BackEnd Gestores de Bases de Datos

Bases de datos SQL  SQL Server  PostgreSQL  Oracle  MySQL  MariaDB

Bases de datos No SQL  MongoDB  RethinkDB

3. Tecnologías a utilizar a Tecnologías 3.  Cassandra  Redis  CouchBase  Elastic Search Neo4j Tecnologías a Utilizar BackEnd Tipos de Aplicaciones  Monolíticas  Microservicios  SPA  Isomórficas  PWA  ServerLess . Amazon Web Services . Firebase Cloud Functions . Microsoft Azure Functions . Google Cloud Functions

Entornos de desarrollo y producción 3. Tecnologías a utilizar a Tecnologías 3.  Docker   Ansible  Kubernetes Tecnologías a Utilizar BackEnd Control de versiones  Git: es el más usado en la actualidad. Git es un sistema que registra cambios en uno o varios archivos a lo largo del tiempo para que se puedan recuperar versiones específicas más tarde.

Gestores de repositorios

 Bitbucket  GitLab  GitHub

Integración continua 3. Tecnologías a utilizar a Tecnologías 3.  Travis CI  Circle CI  Jenkins Tecnologías a Utilizar BackEnd Editores, IDES  SublimeText  Visual Studio Code  Netbeans  Eclipse Testing  Python: PyTest, Nose  NodeJS: Jest, Mocha, Jasmine, Chai  PHP: PHPUnit, Codeception, PHPSpec  Java: Mockito, Junit, TestNG  Ruby: Capybara, Rspec  GoLang: Paquete testing de GoLang 3. Tecnologías a utilizar a Tecnologías 3.  Angular: Protractor, Karma  React: Enzyme HTML HyperText Markup Language  Es un lenguaje de marcado que es interpretado por los navegadores web  Se basa en el uso de etiquetas ó tags  Cada etiqueta tiene la forma  La mayoría de etiqueta tienen una función especifica sobre un elemento, por ejemplo a un texto se le pueden aplicar una o varias etiquetas, cada una de estas lo afectan directamente modificando sus características visuales (formato).  Cada etiqueta debe cerrarse de la forma  A un elemento pueden aplicarse varias etiquetas, se recomienda que la primera que se aplica o abre, es la ultima en cerrarse, ejemplo: texto  Existen etiquetas que no afectan directamente a un elemento de la pagina, estas etiquetas deben cerrarse automáticamente de la forma

4. Introducción a HTML a Introducción 4.  Las etiquetas pueden tener propiedades, el orden de en que se escriben las propiedades no es relevante, las propiedades se escriben de la forma texto

Identación

texto

Los documentos HTML son documentos de texto en formato plano que se deben guardar con extension .html y se deben visualizar con un navegador web Se sugiere que cada practica ó proyecto se organicé de la siguiente forma: - nombrepractica [directorio]

4. Introducción a HTML a Introducción 4. - - index.html [archivo] - - otros archivos html - - images [directorio] - - - imágenes a utilizar Estructura básica de un documento HTML

titulo de la pagina

- HTML no distingue entre minúsculas y mayúsculas - La primera línea indica que se va a trabajar con HTML5 - Todo documento HTML debe estar comprendido entre la etiqueta - Un documento HTML contiene cabeza y cuerpo - En el encabezado inicialmente por el momento solamente se puede escribir la etiqueta

4. Introducción a HTML a Introducción 4. con un texto, el cual no aparece en la pagina, pero si en la barra de títulos del navegador que visualiza la pagina - Todo el contenido debe ir dentro de la etiqueta <body> Etiquetas Básicas – Comentarios y símbolos especiales</p><p>Para realizar un comentario dentro de un documento HTML se utiliza la etiqueta: <!-- esto es un comentario --></p><p>Existen algunos elementos que tienen una codificación especial para ser mostrados en una pagina web, algunos porque no se muestran y otros de estos se utilizan para no tener problemas con el juego de caracteres (idioma) utilizado por el navegador, como por ejemplo:</p><p>• Menor que (<): < • Mayor que (>): > ; • Ampersand (&): & • Comillas dobles (“): " • Eñe (ñ): ñ • A con tilde: á • E con tilde: é • I con tilde: í • O con tilde: ó 5. Etiquetas básicas de HTML de básicas Etiquetas 5. • U con tilde: ú Etiquetas Básicas – Párrafos y bloques</p><p>- Para los párrafos se utiliza la etiqueta <p> el bloque del párrafo genera al final un retorno de carro y una distancia de interlineado con el anterior y siguiente elemento</p><p><p> Texto de ejemplo </p></p><p>- Para realizar bloques tenemos 2 opciones: <div> y <span> la diferencia entre ambos radica en que el div como bloque ocupa todo el ancho de la pagina, se comporta similar a la etiqueta <p> pero con menos espacio de interlineado y el span ocupa de ancho el mismo ancho de los elementos que contiene (no ocupa todo el ancho de la pagina y tampoco realiza retorno de pagina)</p><p><div> Texto de ejemplo </div></p><p><span> Texto de ejemplo </div></p><p>Estas etiquetas pueden ser contenedores de otros elementos y se pueden utilizar de 5. Etiquetas básicas de HTML de básicas Etiquetas 5. forma anidada. Etiquetas Básicas - Encabezados</p><p>- Se utilizan para definir los títulos de algunos párrafos o de las paginas propiamente. - Los encabezados se visualizan como bloque con salto de línea y aplican mas énfasis (negrilla) al texto - Algunas personas lo utilizan para darle el tamaño a un texto - Van desde <h1> hasta <h6> siendo h1 la de mayor tamaño y h6 la menor</p><p><h1> Texto de ejemplo </h1></p><p><h2> Texto de ejemplo </h2></p><p><h3> Texto de ejemplo </h3></p><p><h4> Texto de ejemplo </h4></p><p><h5> Texto de ejemplo </h5></p><p>5. Etiquetas básicas de HTML de básicas Etiquetas 5. <h6> Texto de ejemplo </h6> Etiquetas Básicas – Formato de la fuente</p><p>- Para referirse a un texto se utiliza la etiqueta <font> - Es un elemento en desuso, pero como aun no trabajamos CSS lo utilizaremos - La etiqueta font siempre se utiliza con alguna de sus propiedades:</p><p>- Tipo de fuente: <font face=“Arial”> Texto de ejemplo </font> la fuente debe estar instalada en el equipo que se visualiza la pagina. Se pueden escribir varias separadas por coma</p><p>- Tamaño de la fuente: <font size=“1”> Texto de ejemplo </font> puede tomar valores desde 1 a 7, en este caso el 1 es el menor tamaño y 7 el mayor</p><p>- Color de la fuente: <font color=“color”> Texto de ejemplo </font> los colores pueden establecerse de dos formas: con el nombre en ingles ó con formato RGB con sistema hexadecimal.</p><p><font color=“red”> Texto de ejemplo </font> ó <font color=“#FF0000”> 5. Etiquetas básicas de HTML de básicas Etiquetas 5. - Se pueden utilizar varias propiedades al mismo tiempo: <font face=“Arial, Verdana” size=“4” color=“#336697”> Texto de ejemplo </font> Etiquetas Básicas – Propiedades del elemento body</p><p>- text para el color del texto, tiene prelación los colores asignados directamente en las marcas</p><p>- bgcolor color de fondo de la pagina</p><p>- link color de fuente de los enlaces</p><p>- vlink color de los enlaces ya visitados</p><p>- alink color de los enlaces activos</p><p>- background imagen de fondo para la pagina</p><p>La distancia entre el contenido y los márgenes del navegador se pueden establecer con las siguientes propiedades - bottommargin margen inferior 5. Etiquetas básicas de HTML de básicas Etiquetas 5. - leftmargin margen izquierdo - rightmargin margen derecho - topmargin margen superior Etiquetas Básicas – Énfasis </p><p>- Para la negrilla se utiliza el elemento <strong> y para un énfasis un poco mas suave se utiliza <em> , el texto subrayado con el elemento <u> , texto tachado con <s> , texto en itálica <i></p><p>- Definiciones <dfn> texto en itálica</p><p>- Citas <cite> muchos navegadores lo interpretan como texto en itálica</p><p>- <blockquote> sangría a ambos lados, tiene la propiedad cite para indicar el enlace a la fuente y para textos pequeños se utiliza <q> (menor sangría) también tiene cite</p><p>- <big> aumenta el tamaño de la fuente en 1 punto y <small> disminuye el tamaño de la fuente, <sub> para subíndices y <sup> para superíndices</p><p>- <address> para direcciones y par las abreviaturas con <abbr> se utiliza con la propiedad</p><p> global title, también funciona igual el elemento para acrónimos <acronym> 5. Etiquetas básicas de HTML de básicas Etiquetas 5. - Otras etiquetas: <wbr /> , <bdo> atributos lang y dir , <mark> , <kbd> , <samp> , <var> , <code> , <time> se puede utilizar con la propiedad datetime Etiquetas Básicas – Alineación</p><p>- Algunos elementos como por ejemplo <p> pueden tener un tipo de alineación, utilizando la propiedad align, puede tomar los valores: center, left, right y justify. También se puede aplicar a los div y a los encabezados (para este ultimo esta en desuso)</p><p><p align=“center”> Texto de Ejemplo </p></p><p>- También existe una etiqueta que esta en desuso que permite centrar los elementos <center></p><p><center> <p> Texto de ejemplo </p></p><p></center> 5. Etiquetas básicas de HTML de básicas Etiquetas 5. Etiquetas Básicas – Saltos de líneas y divisiones horizontales</p><p>- Generalmente para dividir secciones se utiliza el elemento <p>, pero este elemento deja un espaciado doble entre los elementos continuos, en ocasiones necesitamos un salto de línea sin espacio de interlineado, para ello utilizamos la etiqueta <br />, se debe cerrar inmediatamente, pues es una etiqueta que no afecta directamente a ningún elemento y tampoco es contenedor o bloque. Es un elemento en desuso (actualmente se utiliza la propiedad clear en CSS)</p><p>- Las líneas horizontales se realizan con el elemento <hr /> tiene propiedades como: - align con valores como: left, center, right por defecto center - noshade con valores: noshade - size indica la altura de la línea, los valores se dan en pixeles</p><p>- width valores numéricos en pixeles ó porcentajes 5. Etiquetas básicas de HTML de básicas Etiquetas 5. Etiquetas Básicas – Imágenes</p><p>Las imágenes se ingresan con la etiqueta <img> utilizando la propiedad src para definir la ruta de la imagen, las rutas pueden ser relativas o absolutas: </p><p>Algunas de las propiedades del elemento img son: align, alt, border, height, width, hspace, ismap, longdesc, usemap, vspace.</p><p>El tamaño dado por width y height se establece numéricamente en pixeles ó porcentaje</p><p>Se pueden utilizar imágenes como enlaces <a href=“http://www.unicordoba.edu.co”> </a></p><p>Las imágenes se pueden asociar con un mapa de la siguiente forma: <map name=“colombia”> <area alt=“cordoba” shape=“rect” coords=“4,4,100,100” href=“cordoba.html” /></p><p></map> 5. Etiquetas básicas de HTML de básicas Etiquetas 5. Etiquetas Básicas – Enlaces (links)</p><p>Los enlaces pueden ser de 5 tipos:</p><p>1) Enlaces interno (anclas): se realizar para navegar dentro de la misma pagina,</p><p><a href=“#seccion”>Ir a seccion</a> se utiliza para referenciar una sección especifica en el documento, esa sección se debe describir con <a name=“seccion”>Seccion</a></p><p>2) Enlaces locales: para ir a paginas dentro del mismo sitio</p><p><a href=“actividad2.html”> Actividad 2 </a> puede utilizarse la propiedad target para definir en que ventana se mostrará el enlace a cargar: _self, _blank, _parent, _top ó el alias de algún frame</p><p>3) Enlaces externos: <a href=“http://www.google.com.co”> Ir a Google </a></p><p>4) Enlaces con direcciones de correo electrónico:</p><p><a href=“mailto:deivisjoro@gmail.com?subject=envio de trabajo”>Enviar correo</a> 5. Etiquetas básicas de HTML de básicas Etiquetas 5. 5) Enlaces a archivos: <a href=“ruta_archivo/archivo.formato”>Archivo</a> Etiquetas Básicas – Practica # 1</p><p>Desarrollar nuestra primera pagina web sencilla con los siguientes elementos: - Fondo del cuerpo color DCDCDC -Titulo de primer nivel, centrado y color de la fuente C00000 con el texto “Director de Colciencias destacó el posicionamiento de la Unicórdoba” -Subtitulo de segundo nivel, centrado, color de fuente 008000 con el texto “El rector de la Universidad de Córdoba, Jairo Torres Oviedo (centro), acompañado del director de Colciencias, Diego Hernández (izquierda) y docentes de la institución.” - Una imagen, ubicada en la carpeta images, dimensiones no superior a 500px, con borde de 2 pixeles, alineación a la derecha y texto alternativo “posicionamiento unicor” - Dos párrafos con alineación justificada. - Un tercer párrafo que contenga un enlace direccionado a la pagina de la Universidad de Córdoba con el texto “Origen de la noticia” y titulo “ir a la pagina de la universidad”</p><p>Comprimir la carpeta y </p><p> subirla a la plataforma 5. Etiquetas básicas de HTML de básicas Etiquetas 5. Etiquetas Básicas – Listas (I)</p><p>Las listas son utilizadas para enumerar, citar y definir un conjunto de elementos, existen 3 tipos de listas</p><p>1) Listas no ordenadas (unordered list): <ul> con atributos como compact (único valor compact) y type el cual define el elemento ó viñeta que mostrara cada ítem de la lista, puede tomar los valores disc, square ó circle. Cada elemento de la lista se estable con la etiqueta <li> <ul> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> </ul></p><p>2) Listas Ordenadas (ordered list): <ol> con este tipo de lista los items tendrán como viñeta un elemento que permite establecer un orden: números, letras, números romanos, acepta las propiedades compact (solo acepta compact), start (valor numérico que establece el inicio de la lista) y type para decidir el elemento ordinal 5. Etiquetas básicas de HTML de básicas Etiquetas 5. para los items, acepta estos 5 valores: 1, a, A, i, I Para los item de la lista también se utiliza el elemento <li> Etiquetas Básicas – Listas (II)</p><p>3) Listas de definición: <dl> Se debe utilizar conjunto con otras 2 etiquetas, las cuales definen a los items de la lista <dt> y <dd> para este ultimo se puede utilizar la propiedad nowrap</p><p>Ejemplo:</p><p><p> Elementos de un computador </p> <dl> <dt>Monitor</dt> <dd>Tambien llamado pantalla, es un dispositivo de salida…</dd> <dt>Teclado</dt> <dd>Permite ingresar datos para ser procesados…</dd> </dl></p><p>Este tipo de lista no aplica viñetas, pero las definiciones se visualizan con sangría</p><p>5. Etiquetas básicas de HTML de básicas Etiquetas 5. Estas 3 tipos de listas se pueden anidar y combinar entre si. Etiquetas Básicas – Practica # 2</p><p>Desarrollar una pagina similar a la que se muestra en la imagen</p><p>Comprimir y subir a la plataforma 5. Etiquetas básicas de HTML de básicas Etiquetas 5. Etiquetas Básicas – Tablas</p><p>Las tablas se realizan con la etiqueta <table> tiene una serie de propiedades que generalmente son utilizadas para formatear, establecer el tamaño y ubicación de dicha tabla dentro de la pagina: - align el cual puede contener los valores left, right,center - bgcolor indica el color de fondo de la tabla - border tamaño del borde alrededor de la tabla, el valor es numérico en pixeles - cellpadding define el espacio (distancia) entre el contenido de una celda y su borde, puede ser numérico o porcentual - cellspacing espacio entre las diferentes celdas - bordercolor - width</p><p>- Para la fila encabezado de la tabla se utiliza la etiqueta <thead> - Para las filas contenido de la celda (datos como tal) <tbody> - Cada fila se inicia con <tr> , tiene un atributo valign (baseline, botton, middle y top) - Cada celda de una fila con <td> celdas de encabezado con <th> también tienen valign - La disposición de cada celda se puede modificar con colspan y rowspan 5. Etiquetas básicas de HTML de básicas Etiquetas 5. - Tanto filas como columnas se le pueden agregar atributos como width, bgcolor, align - Para el pie de la pagina <tfoot> - <caption> para darle un titulo descriptivo a la pagina Etiquetas Básicas – Tablas (II) Ejemplo de tabla 3x3 (filasxcolumnas): <table border=“1” width=“100%”> <caption> titulo de la tabla</caption> <thead> <tr> <td>Encabezado # 1</td> <td>Encabezado # 1</td> <td>Encabezado # 1</td> </tr> </thead> <tbody> <tr> <td>Encabezado # 1</td> <td>Encabezado # 1</td> <td>Encabezado # 1</td> </tr> <tr> <td>Encabezado # 1</td> <td>Encabezado # 1</td></p><p>5. Etiquetas básicas de HTML de básicas Etiquetas 5. <td>Encabezado # 1</td> </tr> </tbody> </table> Etiquetas Básicas – Practica # 3 - El tipo de letra utilizado en todo el documento es Verdana. - El tamaño de la imagen es 400 x 200 píxeles.</p><p>- El borde de la tabla es de 1px y color negro.</p><p>- El espacio entre en contenido de las celdas de la tabla y su borde es 10px.</p><p>- El enlace al sitio web oficial de Queen debe abrirse en una pestaña nueva.</p><p>Comprimir y subir a la plataforma</p><p>El tema para la practica no necesariamente 5. Etiquetas básicas de HTML de básicas Etiquetas 5. debe ser Queen, usted puede trabajar con el que desee Etiquetas Básicas – Elementos multimedia</p><p>Aunque con HTML5 tenemos opciones mas sencillas y estandarizadas para ingresar video y audio, también se pueden realizar de esta forma y para otros elementos multimedia.</p><p><embed src=“sonidos/himno.mp3” width=“150” height=“50” autoestart=“”></embed></p><p><object type=“audio/mpeg” data=“sonidos/himno.mp3” width=“150” height=“50”> <param name=“src” value=“sonidos/himno.mp3” /> <param name=“autoplay” value=“true” /> </object></p><p>Para elementos como flash <object type=“application/x-shockware-flash” data=“animaciones/intro.swf” width=“150” height=“150”> <param name=“movie” value=“animaciones/intro.swf” /> <param name=“quality” value=“transparent“ /> <param name=“wmode” value=“true” /> 5. Etiquetas básicas de HTML de básicas Etiquetas 5. <param name=“allowscriptaccess” value=“samedomain” /> </object> Práctica # 4 1. Pagina con un encabezado en color rojo, h1 y centrado 2. Línea horizontal 3. Párrafo 1 alineación justificado, una palabra de este párrafo en negrilla 4. Párrafo 2 alineación a la derecha, color verde 5. Marquesina con comportamiento alternado 6. Imagen 7. Lista ordenada 8. Lista no ordenada 9. Una lista dentro de otra lista 10. Tabla de 6x4 11. Enlaces en la misma pagina 12. Deben tener la estructura de directorio sugerida</p><p>Comprimir y subir a la plataforma 5. Etiquetas básicas de HTML de básicas Etiquetas 5. Actividad propuesta # 5 Desarrollar un conjunto de paginas relacionadas con el tema de PAGINA PERSONAL, se sugiere un maquetado de 4 secciones: encabezado, barra de navegación horizontal, contenedor (contenido) y pie de pagina.</p><p>Se deben evidenciar el mayor numero de elementos (etiquetas): títulos, párrafos, formato de texto, listas, imágenes, tablas, enlaces, etc.</p><p>Como mínimo la pagina principal y 4 paginas secundarias, por ejemplo:</p><p>- Pagina principal (breve descripción, imagen y enlaces) - Hoja de vida, laboral, académica (párrafos), habilidades - Pagina con misión, visión (proyecto de vida) - Pagina con gustos, listado de películas favoritas (con imagen) - Horario de clases (para trabajar el tema de tablas)</p><p>Comprimir y subir a la plataforma 5. Etiquetas básicas de HTML de básicas Etiquetas 5.</p> </div> </article> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = '47ca98a6f18d70c73890175dbad38f3a'; var endPage = 1; var totalPage = 56; var pfLoading = false; window.addEventListener('scroll', function () { if (pfLoading) return; var $now = $('.article-imgview .pf').eq(endPage - 1); if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) { pfLoading = true; endPage++; if (endPage > totalPage) return; var imgEle = new Image(); var imgsrc = "//data.docslib.org/img/47ca98a6f18d70c73890175dbad38f3a-" + endPage + (endPage > 3 ? ".jpg" : ".webp"); imgEle.src = imgsrc; var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>'); $('.article-imgview').append($imgLoad); imgEle.addEventListener('load', function () { $imgLoad.find('img').attr('src', imgsrc); pfLoading = false }); if (endPage < 5) { adcall('pf' + endPage); } } }, { passive: true }); if (totalPage > 0) adcall('pf1'); </script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> </html>