Sesión 12: Entorno de desarrollo web Html

La clase comienza con un resumen de lo visto anteriormente; historia de la internet con Arpanet para llegar a la descripción de los 3 lenguajes mas usados .

HTML, CSS y JavaScript son los tres lenguajes que dominan la creación de todo sitio web, al menos en su parte visual e interactiva. Aquí conocerás qué son y cómo funciona cada uno.

HTML: Qué es y cómo se usa

HTML (HyperText Markup Language) no es un lenguaje de programación. Es un lenguaje de marcado que describe cómo debe mostrarse el contenido en la web asignando etiquetas al contenido.

CSS: hojas de estilo en cascada

Las hojas de estilo en cascada (CSS) son una forma de describir el aspecto y el comportamiento de una página web mediante un texto sencillo y fácil de entender. Es una habilidad esencial que deben aprender los diseñadores y programadores web.

Una hoja de estilo en cascada es una hoja de estilo que controla cómo se presentan las páginas HTML en un navegador. La parte en cascada significa que hay múltiples hojas de estilo, cada una de las cuales anula o añade estilos a las anteriores en función de sus prioridades.

Aunque CSS ha evolucionado a lo largo de los años, sigue basándose en la estructura básica de añadir atributos de clase a las etiquetas HTML para cambiar su aspecto o formato.

JavaScript: El lenguaje de programación de la web

JavaScript es un lenguaje de programación que permite a los desarrolladores crear páginas web interactivas y dinámicas. Puede utilizarse para crear animaciones, juegos y todo tipo de aplicaciones interesantes en la web. Es un lenguaje de programación que existe desde hace más de veinte años, pero sigue ganando popularidad a medida que más gente se da cuenta de sus casos de uso y se multiplican los frameworks de su ecosistema para seguir expandiendo su funcionalidad.

Se dice que JavaScript es el lenguaje de programación de la Web porque es esencialmente lo que hace que todos los sitios web sean interactivos. JavaScript puede utilizarse para hacer todo tipo de cosas, como crear animaciones y juegos en un sitio web o reproducir efectos de sonido cuando alguien interactúa con una página.

html + css + js analogía

https://platzi.com/clases/1050-programacion-basica/5104-que-es-htmlcssjs/

Programa para crear código con HTML, CSS y JavaScript

Se puede escribir CSS y JavaScript dentro de HTML, los profesionales normalmente escriben esto por separado, con la ayuda de un IDE.

Un IDE (Entorno de Desarrollo Integrado) es una herramienta de software que proporciona un entorno de programación completo para los desarrolladores de software.

En clases tamos utilizando Subline text pero Visual estudio code es un programa mas completo ya que se puede personalizar con plugins.

Html utiliza etiquetas llamadas Tags. < /p >. En el siguiente vinculo aparecen en orden alfabético para los docuementos Html.

https://www.w3schools.com/tags/default.asp

Torpedos de tags html5

https://www.regoremor.com/wp-content/uploads/2012/08/html5-cheat-sheet-tags.png

Etiquetas Tag + Atributos (propiedad)

Los atributos de HTML son palabras especiales utilizadas dentro de la etiqueta de apertura, para controlar el comportamiento del elemento. Los atributos de HTML son un modificador de un tipo de elemento de HTML.

In line style:

No usemos esta etiquetas porque corresponde a CSS, no es una buena practica porque mezcla los lenguajes HTML + CSS:

Dentro de la etiqueta Iframe si se pueden colocar estas etiquetas porque se coloca desde un sitio web externo como es el caso de YouTube.

Etiquetas de texto

Igual que en los puntos anteriores, si queremos crear un documento, normalmente necesitamos resaltar diferente información, para lo que utilizamos, la negrita, la cursiva, etc. Para ello HMTL nos da una gran lista de etiquetas que relacionan con el texto, para hacerlo diferente:

  • <b>: Convierte el texto en negrita
  • <i>:  Convierte el texto en cursiva
  • <u>: Subraya el texto
  • <sup>: Incluye el texto en superíndice
  • <sub>: Incluye el texto suscrito
  • <pre>: Texto preformateado, (lo que quiere decir que podemos incluir intros o espacios dentro del texto)
  • <em>: Enfatiza el texto
  • <strong>: Indica que el texto es importante
  • <small>: Reduce el tamaño del texto

Como actividad en clases insertamos link en nuestro sitio de pruebas, revisamos la estructura semántica de html , insertamos imágenes, direccionamos enlaces a correos electrónicos y a teléfonos.

Paréntesis; Metodologías ágiles

Intentaremos explicar de una manera sencilla qué es una metodología Ágil, para qué sirve y quién puede usarla. Ser ágil es tener la capacidad de crear y responder al cambio para obtener beneficios en un ambiente de negocio cambiante. Significa ser flexible, adaptarse al cambio.

En unos tiempos donde la tecnología cambia constantemente, los beneficios de las empresas se están reduciendo por la alta competencia, además de tener que satisfacer a clientes que quieren cada vez resultados más rápidos y efectivos. Por ello, aparece la necesidad de contar con un método de gestión de proyectos que se adapte a estos nuevos requisitos del mercado con rapidez y flexibilidad, y donde los métodos tradicionales de gestión se han demostrado ineficientes a la hora de gestionarlos.

La forma de tratar los proyectos desde una metodología ágil es diferente a la metodología tradicional. Las metodologías ágiles son especialmente útiles cuando tenemos que abordar un proyecto donde se prevean cambios, en muchos casos porque el cliente al principio del proyecto no define todos los requisitos necesarios o bien porque los requisitos van cambiando.

En cualquier caso, estas metodologías proporcionan los mecanismos para afrontar estos cambios manteniendo el máximo valor para el cliente, por lo que la probabilidad de finalizar con éxito el proyecto aumenta sobre el método tradicional.

Exigencias de la metodología ágil:

  • Individuos e interacciones sobre procesos y herramientas: Aunque los procesos y las herramientas ayudan a terminar con éxito un proyecto, son las personas quienes asumen, participan e implementan un proyecto y determinan cuáles procesos y herramientas utilizar. Por lo tanto, en cualquier proyecto ágil el énfasis debe estar en las personas y en sus interacciones, en vez de los complicados procesos y herramientas.
  • Software funcionando sobre documentación extensiva: Aunque la documentación es necesaria y útil para cualquier proyecto, muchos equipos se centran en la recopilación y el registro de descripciones cualitativas y cuantitativas de los entregables, cuando el valor real que se le entrega al cliente es en forma de un software funcional. Por lo tanto, en vez de la documentación detallada, el enfoque ágil está en la entrega de un software de buen funcionamiento en incrementos a lo largo del ciclo de vida del producto.
  • Colaboración con el cliente sobre negociación contractual: Tradicionalmente a los clientes se les ha visto como participantes externos, involucrados principalmente al inicio y al final del ciclo de vida del producto, y cuya relación se basaba en el contrato y su cumplimiento. Las metodologías ágiles creen en un enfoque de valor compartido, en el cual los clientes se consideran colaboradores. El equipo de desarrollo y el cliente trabajan unidos para evolucionar y desarrollar el producto.
  • Responder ante el cambio sobre seguir un plan: En el mercado actual, donde los requerimientos del cliente, las tecnologías disponibles y los patrones empresariales cambian constantemente, es fundamental abordar el desarrollo de productos de una forma adaptativa que permita la incorporación de cambios y rápidos ciclos de vida de desarrollo de producto, en vez de enfatizar el seguimiento de planes formados probablemente con información obsoleta.