UB PROG3 WEB TEMA 01 ECOSISTEMA

(1)

UNIVERSIDAD DE BELGRANO

PROGRAMACIÓN 3

Profesor:

(2)

Programa de la materia:

 _{Objetivo: convertirse en desarrolladores de soluciones web,}

conociendo cada una de las tecnologías que complementan el desarrollo de aplicaciones o portales web, tanto estáticos como dinámicos.

 _{Unidad 1: Ecosistema web.}

 Unidad 2: Desarrollo Frontend.

(3)

Bibliografía de la materia:

AUTOR TÍTULO EDITORIAL EDICIÓN Fernando Luna Programador

Web Full Stack Users 1ra Edición (Español) 2017 Juan Gauchat El gran libro de

HTML5, CSS3 & Javascript

MARCOMBO 2014

Deitel & Deitel Java como

programar PearsonPrentice Hall

9na Edición

(Español) 2012

Pablo Pandolfo Apuntes de la

materia Sitio de la materia 2020

(4)

Ecosistema Web

 _{Desarrollo web.}

 _{Perfil de un programador full stack.}

 _{Tecnologías web / Lenguajes de programación.}  _{Editores de código.}

 _{Navegador web.}

 Funcionamiento de la web.

(5)

Ecosistema Web

 _{Tres preguntas sobre el desarrollo web:}

 _{1. ¿Por qué el desarrollo web es el futuro?}  _{2. ¿Qué hace un programador full stack?}

 _{3. ¿Cómo nos orientamos entre tantos lenguajes y}

(6)

Ecosistema Web

 _{1. ¿Por qué el desarrollo web es el futuro?}

 _{Desarrollo de software centralizado en Mobile y Web.}  _Ventajas:

_{Es multiplataforma.}

 No se limita a capacidades de hardware.

 Es mas flexible a cuanto actualizaciones.

 Agrupa múltiples tecnologías de desarrollo.

(7)

Ecosistema Web

 _{2. ¿Qué hace un programador full stack?}

 _{Desarrollo frontend: partes que vemos y con las que}

interactuamos. Combinación de HTML, CSS y JavaScript.

 _{Desarrollo backend: base de datos, servicios web.}

 _{Conceptos técnicos} _{de servidores, redes, modelado de}

(8)

Ecosistema Web

 _{3. ¿Cómo nos orientamos entre tantos lenguajes y tecnologías?}  _{Lenguajes de marcado: HTML, CSS, XML.}

 _{Bases de datos locales o remotas: MySQL, SQL Server, Oracle,}

MongoDB, WebSQL, LocalStorage.

 _{Lenguajes de intercambio de datos: XML, JSoN}  _{Lenguajes de backend: Java, PHP, C#, Groovy}  Lenguajes de frontend: JavaScript, PHP

 Conocimiento de servidores web: IIS, Apache, nginx

 Sistemas operativos del servidor: Windows Server, Linux, *nix

 Lenguajes de programación alternativos: Python, Ruby, CGI

(9)

Ecosistema Web

 _{Navegador web:}

 _{Cada navegador web cuenta con un motor de renderizado.}  _{Renderizado es un proceso que ejecutan los motores de los}

navegadores web, que al cargar un sitio web, leen en tiempo real el código de los tags HTML, CSS y JavaScript, para poder transformarlos en los componentes visuales y textos formateados que conforman una web.

 Cada motor es particular, hay que lograr la compatibilidad necesaria para respetar al menos el desempeño de nuestras web en los navegadores más populares del momento:

(10)

Ecosistema Web

 _{Nuestra primera línea de código:}

 _{1. Abrir editor de texto (Ejemplo, Bloc de Notas, Vim, etc.)}  _{2. Guardar el archivo (Ejemplo, index.html)}

 _{3. Escribir el código.}

 4. Abrir sesión o pestana de nuestro navegador web.

(11)

Ecosistema Web

(12)

Ecosistema Web

 _{¿Cómo funcionan los tags?}

 _{Los tags son la base necesaria de las páginas HTML.} _{<html></html>}

_{<head></head>} <title></title>

<body></body>

<h1></h1>

(13)

Ecosistema Web

 _{¿Cómo funcionan los navegadores web?}

 1. Abrir el Navegador.

 2. En la barra de direcciones del navegador se escribe una URL o se clickea un link.

 3. El navegador envía una solicitud HTTP al servidor.

 4. El servidor busca la página HTML y reenvía una respuesta HTTP.

 5. El navegador analiza el documento HTML. En caso de requerir recursos adicionales, como imágenes, documentos, plugins, etc., vuelve a hacer una solicitud al servidor por cada recurso.

 6. El servidor localiza los archivos adicionales solicitados y los envía al navegador. Si la web ha sido visitada anteriormente utiliza la memoria caché y agiliza la carga de la páginas, sin necesidad de recurrir al servidor.

(14)

Ecosistema Web

 _URL:

 _{Universal Resource Locator.}

 _{Se ocupa de enlazar recursos, que se mueven a través de}

direcciones IP o nombres de dominios.

 _{Se ocupa de “volver amigable” a través de una dirección web,}

(15)

Ecosistema Web

 _{Servidor web:}

 _{Es una aplicación que procesa el contenido, usualmente}

páginas web, del lado del servidor.

 _{Realiza conexiones uni/bidireccionales de forma sincrónica o}

asincrónica con la/s máquina/s cliente, entregando o recibiendo respuestas.

(16)

Ecosistema Web

 _{Páginas html:}

 _{Alojan el contenido general que compone cada texto.}

 _{Están armadas con contenido HTML, CSS, JavaScript,}

imágenes, videos, etc. Todo este contenido es armado de forma óptima y estática, para que pueda ser visualizado a través de los navegadores.

(17)

Ecosistema Web

 _{Recursos adicionales:}

 _{Contenido adicional que complementa un sitio web, como los}

videos, audio, imágenes, documentos, PDF, aplicaciones instalables, plugins, etc.

 _{En muchos casos estos contenidos pueden ser vinculados}

(18)

Ecosistema Web

 _{Hipervínculos:}

 _{Es la dirección física de un archivo o recurso, dentro del}

mismo servidor web o hacia un servidor web externo.

 _{Nos permiten navegar el contenido web, iniciar un nuevo}

mensaje de correo electrónico, acceder a la lectura de contenido PDF, escuchar un archivo MP3, o visualizar un video mediante streaming.

(19)

Ecosistema Web

 _{Mapa de tecnologías}

TECNOLOGÍA CARACTERISTICAS

HTML • Lenguaje de marcado e hipertexto (Hyper Text Markup Language). • Estructura de todos los desarrollos web.

• Conjuga el diseño de texto + imágenes de una página web.

CSS • Hojas de estilo en cascada (Cascading Style Sheets).

• Estructuran y presentan los documentos creados con el HTML, de manera gráfica y visual.

• Establece arte gráfico a través de código, y obtiene así una web liviana en recursos.

JavaScript • Sintaxis similar al lenguaje C.

• Lenguaje de programación interpretado.

• Permite combinar HTML + CSS + programación, para dotar de

(20)

Ecosistema Web

 _{Lenguajes de programación}

LENGUAJ

E CARACTERISTICAS

PHP • Pre Hypertext Processor.

• Aporta facilidad de manejo de HTML, CSS, JavaScript, al poder embeber estos dentro de su propia sintaxis.

Java • Se utiliza mucho en el desarrollo de soluciones corporativas que requieren de estabilidad y seguridad (home-banking, CRM, ERP, etc.)

.NET • Tecnología que se adaptó y hoy cuenta con un fuerte background y soporte orientado a la web.

(21)

Ecosistema Web

 _{Caja de herramientas:}

 _{Editores de código desktop.}  _{Editores de código web.}

 _{Servidor web local.}  Editores de imágenes.

(22)

Ecosistema Web

 _{Editores de código desktop:}

NOMBRE URL PLATAFORM

A LICENCIA

Dreamweaver www.adobe.com Win, iOS PAGO

Visual Studio

Express www.visualstudio.com/vs/visual-studio-express/ Win, iOS LIBRE

Brackets www.brackets.io Win, iOS,

Linux LIBRE

Visual Studio

Code code.visualstudio.com/ Win, iOS, Linux LIBRE

Netbeans IDE netbeans.org/features/html5/index.html Win, iOS,

Linux LIBRE

Aptana Studio http://www.aptana.org/products/studio3 Win, iOS,

Linux LIBRE

Notepad++ http://notepad-plus-plus.org/ Win LIBRE

Bluegriffon http://bluegriffon.org/ Win, iOS,

Linux AMBAS

Sublime Text www.sublimetext.com Win, iOS,

(23)

Ecosistema Web

 _{Editores de código web:}

NOMBRE URL

Codepen www.codepen.io

CodeAnywhere https://codeanywhere.com/

(24)

Ecosistema Web

 _{Servidor web local:}

A Internet Information Server https://www.microsoft.com/es-es/download/ Win TinyWeb

Server https://www.ritlabs.com/en/products/tinyweb/ Win, iOS, Linux

MiniWeb HTTP

Server

https://sourceforge.net/projects/miniweb/ Win, Linux

Apache HTTP Server

(25)

Ecosistema Web

 _{Editor de imágenes:}

NOMBRE

Paint.NET Gimp

(26)

Ecosistema Web

 _{Navegadores web:}

A

Microsoft

Edge Preinstalado en el SO Windows 10. Win

Mozilla Firefox https://www.mozilla.org/es-AR/# Win, iOS, Linux

Google

Chrome https://www.google.com/chrome/ Win, iOS, Linux

Apple Safari Preinstalado en Mac OS

(27)

Buenas prácticas

 _{Análisis funcional.}

 _{Planificación efectiva de un relevamiento.}  _{Elaborar la documentación.}

 _{Metodologías de prototipado.}  _{Importancia del testing.}

 Automatización de tests.

 Metodologías de trabajo.

 Escenarios de trabajo.

 Recursos web para freelancers

(28)

Buenas prácticas

 _{Análisis funcional:}

 _{Papel abstracto de una persona que comprende la función de}

un usuario final como así también la de un desarrollador de software.

 _{La planificación y documentación de las necesidades}

informáticas de una empresa puedan ser trazadas de manera lógica, absorbiendo los conocimientos operativos del usuario final, pero también centrándose en la complejidad del software y la visión de las etapas y los tiempos de desarrollo que vive un programador.

(29)

Buenas prácticas

 _{El analista funcional requiere estar planificando de manera}

constante reuniones con jefes, auditores, lideres y usuarios finales, para poder delinear de forma efectiva la manera de cómo se encarará el desarrollo de una solución de software.

 Habilidades blandas (conocimiento social, lado emocional, hemisferio derecho del cerebro): se vuelcan mas a la comunicación y al desenvolvimiento de las personas en entornos conformados por pares. Además de la responsabilidad, la honestidad y el compromiso.

(30)

Buenas prácticas

 _{El rol del analista técnico-funcional (también conocido como}

(31)

Buenas prácticas

 _{Reglas de negocio:}

 _{Son las políticas y las normativas que definen las operaciones}

y limitan las tareas dentro de una organización.

 _{Resultan de vital importancia para realizar, de manera}

efectiva, una tarea o una obligación laboral.

 Se dividen en explicitas y tácitas.

(32)

Buenas prácticas

 _{Planificación efectiva de un relevamiento. Etapas:}

 _{1. Reuniones con el cliente (presencial, videoconferencias o}

llamadas telefónicas) para conocer la necesidad del cliente para desarrollar un módulo o una aplicación nueva.

 _{2. Conocer en detalle la operativa actual.}

 3. Investigación de mercado sobre diversas funciones.

 4. Mirar soluciones resueltas en otras aplicaciones.

 5. Realización de escenarios de trabajo.

(33)

Buenas prácticas

 _{Elaborar la documentación:}

 _{Método: user stories o historias de usuario.}

 _{Ayudan a redactar la necesidad de un cliente y, a partir de}

esto, comenzar a delinear la solución que se requiere.

 _{Son parte de metodologías de trabajo agiles (scrum, XP, etc)}  Son el camino más coloquial hacia el desarrollo de un

(34)

Buenas prácticas

 _{Elaborar la documentación:}

 _{Representación mediante diagramas de}

flujo.

 _Son _una _de _las _mejores

representaciones gráficas, en lenguaje natural, útiles tanto para el programador como para el usuario final.

(35)

Buenas prácticas

 _{Metodologías de prototipado:}

 _{Mediante el prototipado de aplicaciones es posible expresar}

los objetivos generales que cumplimentará el software o el módulo del software solicitado por el cliente.

 _{Se le ofrece al cliente una experiencia próxima a la necesidad}

comprendida o recopilada a través de los pasos de relevamiento y diagramación de la solución de software.

(36)

Buenas prácticas

 _{La importancia del testing:}

 _{Es la fase final del desarrollo de aplicaciones.}

 _{Permite definir la fiabilidad y la robustez que la aplicación}

integra, y también los errores, conocidos como bugs, que esta tiene.

 La finalidad es pulir al máximo el control de errores, para entregar un producto lo mas cercano a la perfección.

(37)

Buenas prácticas

 _{La importancia del testing:}

 _{La usabilidad y la experiencia de usuario son factores clave}

en el momento de testear una aplicación.

 _{Ejemplos de usabilidad:}

_{La fácil lectura de los textos en pantalla.}

 La disposición de los componentes que conforman la pantalla.

(38)

Buenas prácticas

 _Métricas:

 _{Las métricas en el testing permiten devolver decenas de}

resultados útiles para pulir diferentes factores que involucran el diseño o la creación de aplicaciones. Ejemplos:

_{efectividad en las pruebas,}  defectos críticos,

 tiempo promedio de resolución de defectos,

 casos ejecutados y redactados,

 defectos reportados,

 sobreesfuerzo,

(39)

Buenas prácticas

 _{Automatización de tests:}

 _{Pone entre el tester y la aplicación de software un programa}

informático diseñado para controlar la ejecución de pruebas, y comparar de manera más rápida los resultados obtenidos y los resultados esperados.

 Generar reportes con las pruebas exitosas y fallidas.

 Guarda las métricas necesarias.

(40)

Buenas prácticas

 _{Metodologías de trabajo:}

 _{Antiguo modelo de cascada (waterfall):}_{separaba en tres}

etapas básicas todo el proceso de construcción de aplicaciones de software en un flujo de trabajo irreversible. Complicaciones:

 Cada departamento interpreta los requerimientos asociados a su manera.

 Comunicación casi nula entre departamentos.

 No permite hacer cambios de último momento, generando atascos y ajustes innecesarios en una etapa avanzada.

 SCRUM: permite actividades en equipo a través de procesos de interacciones.

Diseño

Desarroll o

(41)

(42)

Buenas prácticas

(43)

Buenas prácticas

(44)

Buenas prácticas

 _{Escenarios de trabajo:}

 _{Modalidad freelance:}

_{Empleado independiente.}

_{Seguimiento y vínculos (propia cartera de clientes)}  Redes de contacto.

 Vidrieras digitales (Sitio web propio, LinkedIN, redes sociales, etc.)

(45)

Buenas prácticas

 _{Escenarios de trabajo:}

 _{Modalidad onsite:} _{Empleado fijo.}

_{CV, resume, hoja de vida, etc.}

 Sectores con mayor demanda: programadores, analista QA (tester), analista funcional.

 Senioritys: Traineé (5%), Jr (40%), SSr (35%) y Sr (20%).