Parte II Desarrollo web , HTML y CSS



Tema I:Introduccion al desarrollo web

El desarrollo de software se refiere al proceso de diseño, creación, prueba y mantenimiento de sistemas o aplicaciones de software. Implica una combinación de programación, resolución de problemas y creatividad para construir programas informáticos que cumplan con requisitos específicos o resuelvan problemas particulares.

¿Qué es un repositorio?

Un repositorio de código fuente, también conocido como repositorio de control de versiones o repositorio de código, es una ubicación centralizada donde los desarrolladores de software almacenan y administran sus archivos de código fuente. Es una herramienta fundamental utilizada en el desarrollo de software para realizar un seguimiento de los cambios, colaborar con otros desarrolladores y garantizar la integridad y disponibilidad del código fuente.

Tipos de repositorios

-Tipos de repositorios de versiones de control (repo): Centralizado
● Sistema de versiones concurrentes (CVS)
● Subversión (SVN)
● Team Foundation Server (TFS)

Un servidor VCS central (repo) contiene la "copia oficial" del código: el servidor mantiene el único historial de versiones del repositorio..
1. Las computadoras hacen "checkouts" de él a su copia local.
2. Los equipos realizan modificaciones locales no versionadas.
3. Las computadoras "registran" sus cambios en el servidor.

-Tipos de repositorios de versiones de control (repo): Distribuidos
No hay un servidor VCS central (repo). Los repositorios locales del equipo tienen una copia completa de todo lo que hay en el servidor remoto.
1. La mayoría de las operaciones se ejecutan localmente.
2. Las computadoras pueden "extraer" del servidor para actualizar sus repositorios locales.
3. Las computadoras pueden "enviar" los cambios de vuelta al servidor para actualizar sus cambios.
● Mercurial
● GIT

GIT

Git es un sistema de control de versiones distribuido y de código abierto. Permite a los desarrolladores y científicos de datos realizar un seguimiento del código, combinar cambios y volver a versiones anteriores. Git se ha convertido en un estándar de la industria, ya que admite casi todos los entornos de desarrollo, herramientas de línea de comandos y sistemas operativos.

Tema II:Herramientas de desarrollo

Una herramienta de desarrollo, también conocida como herramienta de desarrollo de software o herramienta de programación, se refiere a cualquier programa informático o aplicación que los desarrolladores utilizan para crear, depurar, mantener o dar soporte a otros programas y aplicaciones. Algunos tipos comunes de herramientas de desarrollo son:
• Entornos de Desarrollo Integrados (IDEs).
• Editores de texto.
• Sistemas de control de versiones (VCS) como Git.
• Depuradores.

Los IDE

Un entorno de desarrollo integrado (IDE) es un tipo de software de aplicación que proporciona un conjunto de herramientas y características para facilitar y agilizar el proceso de desarrollo de software.
Los IDE están diseñados para ser un eje central donde los desarrolladores pueden escribir, editar, compilar, depurar y administrar su código en un entorno unificado.

Algunos de los IDE de programación más populares:

● Eclipse es un IDE ampliamente utilizado para el desarrollo de Java, pero es compatible con muchos otros lenguajes a través de complementos.
● Jupyter Notebook es un IDE de código abierto que se usa para crear documentos de Jupyter que se pueden crear y compartir con códigos activos.
● PyCharm es un IDE diseñado específicamente para el desarrollo de Python, con características como finalización de código, depuración y soporte para marcos de desarrollo web.
● Visual Studio Code, a menudo abreviado como VS Code, es un IDE gratuito de código abierto desarrollado por Microsoft. Este es uno de los IDE más comunes utilizados por las aplicaciones web.

Proyecto de software

Un proyecto de software consta de varios archivos, normalmente distribuidos en diferentes carpetas. En consecuencia, es crucial establecer rutas definidas para localizar estos diversos archivos:
● Una ruta de acceso absoluta denota la ubicación de un archivo o carpeta del directorio raíz del sistema de archivos.
● Una ruta relativa denota la ubicación de un archivo o carpeta en relación con el directorio actual (de trabajo). Por lo general, usamos rutas relativas en los proyectos por, y hay algunas reglas clave a seguir cuando las definimos:
○ / es la raíz de la unidad actual. Usamos c:/ en Windows OOSS. ○ ./ es el directorio actual. ○ ./ es el padre del directorio actual.

El complilador/Interprete

El Compilador/Intérprete es un componente encargado de traducir el código fuente escrito por un programador a un formato que el ordenador pueda ejecutar. El rol específico depende del lenguaje de programación y de la naturaleza del código.
● Un compilador traduce todo el código fuente de un programa en código máquina o en código intermedio, todo a la vez. La compilación suele ser un paso independiente antes de ejecutar el programa.
● Un intérprete traduce el código fuente a código máquina o un código intermedio línea por línea a medida que se ejecuta el programa. La interpretación se realiza en tiempo real durante la ejecución del programa y no hay ningún paso de compilación separado. En algunos casos, un idioma puede utilizar una combinación de compilación e interpretación. Por ejemplo, los programas Java se compilan inicialmente en un código de bytes intermedio y, a continuación, la máquina virtual Java (JVM) interpreta o compila este código de bytes en tiempo de ejecución.

Tema III:Introduccion al desarrollo web

Una página web es un documento de hipertexto en la World Wide Web. Las páginas web son entregadas por un servidor web al usuario y se muestran en un navegador web. La primera página web fue creada en el CERN por Tim Berners-Lee el 6 de agosto de 1991.

¿Cuál es la diferencia entre un sitio web y una página web?

Un sitio web se refiere a una ubicación central que contiene más de una página web. Por ejemplo, UFV se considera un sitio web, que incluye docenas de páginas web diferentes.

Arquitectura cliente-servidor

La arquitectura cliente-servidor se refiere a un sistema que aloja, entrega y administra la mayoría de los recursos y servicios que el cliente solicita

Desarrollo Front End

Las tecnologías frontend abarcan los lenguajes de programación interpretados por el navegador. Esto significa que los archivos se procesan en el si (cliente) del usuario. Los sitios web que solo tienen una capa frontend se denominan aplicaciones web.

HTML (HyperText Markup Language)

HTML es el lenguaje de marcado estándar para documentos diseñados para mostrarse en un navegador web. Puede ser asistido por tecnologías como hojas de estilo en cascada y lenguajes de scripting como JavaScript.
● HyperText: HyperText simplemente significa "Texto dentro del texto". Un texto tiene un enlace dentro de él, es un hipertexto. El hipertexto es una forma de vincular dos o más páginas web (documentos HTML) entre sí.
● Markup Language: es un lenguaje informático que se utiliza para aplicar convenciones de diseño y formato a un documento de texto.

CSS (hojas de estilo en cascada)

Cascading Style Sheets (CSS) es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML o XML (incluidos dialectos XML como SVG, MathML o XHTML).
● CSS proporciona una vista mucho mejor de nuestra página HTML en comparación con los atributos HTML.
● Los estilos se aplican como reglas en cascada a cada aparición de ese elemento. Por lo tanto, el código corto significa tiempos de descarga de alta velocidad.
● Los cambios se actualizan automáticamente en todas las páginas web. No necesitamos cambiar html.
● CSS permite contenido que funciona en todos los navegadores web. Se puede entender como la piel de una página web.

Javascript (JS)

JavaScript, a menudo llamado JS, es un lenguaje de programación imperativo, ligero, interpretado (use una máquina virtual) o compilado justo a tiempo con funciones orientadas a objetos y de primera clase. Es una de las tecnologías centrales de la World Wide Web, junto con HTML y CSS..
● El 98% de los sitios web actuales utilizan JS en el lado del cliente, a menudo incorporando bibliotecas de terceros.
● Todos los principales navegadores web tienen un motor JS dedicado para ejecutar el código en el lado de los usuarios..
Se puede entender como el motor de comportamiento de una página web. Aunque Java y JavaScript son similares en nombre, sintaxis y respectivas bibliotecas estándar, ambos lenguajes son distintos y difieren enormemente en diseño.

Tema IV: HTML

¿Que es HTMl?

The HyperText Markup Language or HTML es el lenguaje estándar para documentos diseñados para mostrarse en un navegador web. Puede ser asistido por tecnologías como las hojas de estilo en cascada y lenguajes de scripting como JavaScript.
● HyperText: HyperText simplemente significa "Texto dentro del texto". Un texto tiene un enlace dentro de él, es un hipertexto. El hipertexto es una forma de vincular dos o más páginas web (documentos HTML) entre sí.
● Markup Language: A markup language es un lenguaje informático que se utiliza para aplicar convenciones de diseño y formato a un documento de texto.

Conceptos básicos de HTML

Hay cuatro etiquetas principales que debemos incluir en cualquier página web:
● DOCTYPE html (opcional): Esta es la declaración de tipo de documento (técnicamente no es una etiqueta). Declara un documento como un documento HTML.
● html: Esta etiqueta se denomina elemento raíz HTML. Todos los demás elementos de la página web están contenidos en ella.
● head: Esta etiqueta define el encabezado que contiene los elementos "detrás de escena" para una página web. Los elementos dentro de la cabeza no son visibles en el front-end de una página web.
● body: Esta etiqueta define el contenido que se utiliza para encerrar todo el contenido visible de una página web. En otras palabras, el contenido del cuerpo es lo que el navegador mostrará en el front-end.
What is a trend technology?Conceptos básicos de HTML El es un contenedor de metadatos (datos sobre datos) y se coloca entre la etiqueta y la etiqueta. Los metadatos son datos que no se muestran sobre el documento HTML. Los siguientes elementos pueden ir dentro del elemento:
● title> (required in every HTML document)
● style>
● base>
● link>
● meta>
● script>
● noscript>
Los metadatos suelen definir el título del documento, el juego de caracteres, los estilos, los scripts y otra metainformación.What is a trend technology?Conceptos básicos de HTML El es un contenedor de metadatos (datos sobre datos) y se coloca entre la etiqueta y la etiqueta. Los metadatos son datos que no se muestran sobre el documento HTML. Los siguientes elementos pueden ir dentro del elemento:
● title> (required in every HTML document)
● style>
● base>
● link>
● meta>
● script>
● noscript>

Los metadatos suelen definir el título del documento, el juego de caracteres, los estilos, los scripts y otra metainformación. What is a trend technology?Conceptos básicos de HTML La etiqueta define el cuerpo del documento. El elemento body contiene todo el contenido de un documento HTML, como encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc. Importante: Solo puede haber un elemento en un documento HTML.

Tema V: CSS

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje que define el estilo de los elementos de un documento HTML con el fin de controlar el diseño, la apariencia de nuestras páginas web hechas con HTML.
● Es un lenguaje fácil de entender y aprender, pero proporciona un control robusto sobre la presentación de documentos HTML
● especifica cómo se presentarán los diferentes elementos HTML o etiquetas en la pantalla.
● Es un lenguaje diseñado para ahorrar tiempo, navegación sin conexión, carga rápida de páginas.
CSS se puede agregar a documentos HTML de 3 maneras:
● En línea: mediante el uso del atributo style dentro de elementos HTML
● Interno: mediante el uso de un style> elemento de la head> sección
● Externo: mediante el uso de un link> elemento para vincular a un