TS en Des. de Software – Práctica profesionalizante 1

Proyectos Realizados:

Estos son algunos de los proyectos realizados en el primer cuatrimestre de la materia. ¡Felicidades chicos! Sigamos avanzando y aprendiendo nuevas tecnologías juntos.

El "frontend"

El “frontend” se refiere a la parte de un sistema informático o aplicación que interactúa directamente con los usuarios finales. En el contexto del desarrollo web, el frontend se refiere específicamente a la interfaz de usuario y la experiencia del usuario en un sitio web o aplicación web. Esto incluye todo lo que un usuario ve, interactúa y experimenta en su navegador web o dispositivo móvil.

Algunos puntos clave sobre el frontend:

Interfaz de usuario (UI): El frontend se centra en la creación de una interfaz de usuario intuitiva y atractiva. Esto implica el diseño de la disposición visual de los elementos en la pantalla, como botones, formularios, menús, etc., y la organización del contenido para que sea fácilmente comprensible y accesible para los usuarios.
Experiencia del usuario (UX): Además del diseño visual, el frontend también se preocupa por la experiencia del usuario. Esto implica garantizar que la navegación por el sitio o la aplicación sea fluida y sin problemas, que las acciones del usuario sean claras y que el rendimiento sea óptimo para una experiencia de usuario satisfactoria.
Lenguajes y tecnologías: En el desarrollo web, el frontend se construye principalmente utilizando tecnologías como HTML (para la estructura del contenido), CSS (para el diseño y estilo visual) y JavaScript (para la interactividad y la dinámica). Además, se pueden utilizar frameworks y bibliotecas como React.js, Angular, Vue.js, etc., para simplificar y acelerar el desarrollo.
Compatibilidad con diferentes dispositivos y navegadores: El frontend debe ser compatible con una variedad de dispositivos y tamaños de pantalla, desde computadoras de escritorio hasta dispositivos móviles. Además, debe funcionar correctamente en diferentes navegadores web, como Chrome, Firefox, Safari, etc.
Integración con el backend: A menudo, el frontend interactúa con un backend, que es la parte del sistema que maneja la lógica de la aplicación, la base de datos y otras funcionalidades del servidor. El frontend envía solicitudes al backend para obtener o enviar datos, y luego muestra la información procesada al usuario.

HTML, o HyperText Markup Language

HTML, o HyperText Markup Language, es el lenguaje estándar utilizado para crear y diseñar páginas web. Se compone de una serie de elementos llamados “tags” o etiquetas, que definen la estructura y el contenido de una página web. Estas etiquetas permiten a los desarrolladores web especificar cómo se deben mostrar los diferentes tipos de contenido, como texto, imágenes, enlaces, formularios, videos, entre otros. HTML proporciona la base sobre la cual se construyen todas las páginas web en internet, permitiendo la creación de sitios web interactivos y accesibles para usuarios de todo el mundo

CSS, o Cascading Style Sheets (Hojas de Estilo en Cascada)

es un lenguaje utilizado para definir el aspecto y el formato visual de documentos HTML y XML. Se utiliza para describir cómo se debe presentar el contenido de una página web, incluyendo el diseño, el color, la tipografía y otros aspectos visuales. CSS permite separar el contenido de la presentación, lo que facilita la creación de sitios web con un diseño coherente y flexible. Con CSS, los desarrolladores web pueden crear reglas de estilo que se aplican a elementos específicos o a grupos de elementos en una página, lo que proporciona un control detallado sobre la apariencia de un sitio web. CSS se utiliza en conjunto con HTML para crear páginas web modernas y atractivas, y es una parte fundamental del desarrollo web en la actualidad.

JavaScript

JavaScript es un lenguaje de programación de alto nivel, dinámico e interpretado, ampliamente utilizado en el desarrollo web. Aunque inicialmente se diseñó para ejecutarse en navegadores web para interactuar con el contenido HTML y CSS de las páginas web, JavaScript también se utiliza en entornos de desarrollo del lado del servidor y en aplicaciones de escritorio y móviles.

Algunos puntos clave sobre JavaScript:

Interactividad en el navegador: JavaScript se utiliza para crear interactividad en las páginas web, como formularios dinámicos, efectos visuales, animaciones, validaciones de entrada de usuario y mucho más.
Manipulación del DOM: JavaScript permite a los desarrolladores acceder y modificar el Document Object Model (DOM) de una página web, lo que permite actualizar el contenido de la página de forma dinámica sin necesidad de recargarla.
Programación del lado del cliente y del servidor: En el lado del cliente, JavaScript se ejecuta en el navegador del usuario para manipular el contenido de la página web. En el lado del servidor, JavaScript se ejecuta en el servidor web para manejar solicitudes del cliente, interactuar con bases de datos y realizar otras tareas del lado del servidor.
Frameworks y bibliotecas: Existen numerosos frameworks y bibliotecas de JavaScript que facilitan el desarrollo de aplicaciones web complejas y eficientes. Algunos ejemplos populares incluyen React.js, Angular, Vue.js y Node.js.
Asincronía: JavaScript es un lenguaje de programación asincrónico, lo que significa que puede manejar múltiples tareas simultáneamente sin bloquear la ejecución del programa. Esto se logra mediante el uso de callbacks, promesas, y más recientemente, async/await.

Actividad: Desarrollo de un Sitio Web Interactivo con HTML y CSS3 - fecha 07/05/2024

Se requiere la creación de un proyecto HTML y CSS3 que conste de tres páginas con una barra de navegación. En la página principal se debe presentar el tema seleccionado, mientras que en la segunda se detallarán aspectos adicionales sobre dicho tema. La tercera página deberá contener un formulario de contacto. Se utilizarán etiquetas como H1, H2, H3, P, A, NAV, UL, IMG, FORM, FOOTER, entre otras. Además, se creará un archivo CSS3 para aplicar estilos al sitio completo, utilizando identificadores, clases, y otros recursos disponibles en CSS3

Actividad: Guía de preguntas sobre hosting, dominio, servicio FTP y servicio MySQL - fecha 21/05/2024

Guía de preguntas sobre hosting, dominio, servicio FTP y servicio MySQL:

Hosting:

¿Qué es un servicio de hosting y para qué se utiliza?
¿Cuál es la diferencia entre un servidor de hosting compartido y uno dedicado?
¿Cuáles son los factores importantes a considerar al elegir un servicio de hosting?
¿Cómo afecta la ubicación del servidor de hosting a un sitio web?

Dominio:

¿Qué es un dominio y cuál es su función?
¿Cuál es la diferencia entre un nombre de dominio y una dirección IP?
¿Cómo se registra un nombre de dominio?
¿Qué es un subdominio y cómo se utiliza?

Servicio FTP:

¿Qué significa FTP y cuál es su propósito?
¿Cómo se conecta un cliente FTP a un servidor FTP?
- ¿Cuáles son algunas aplicaciones comunes del servicio FTP?

Servicio MySQL:

¿Qué es MySQL y cuál es su función en un entorno web?
¿Qué tipo de datos se pueden almacenar en una base de datos MySQL?
¿Cómo se accede y manipula la información en una base de datos MySQL?
¿Cuáles son algunos ejemplos de aplicaciones que utilizan MySQL como base de datos?

Actividad de Investigación:

Comparación de Proveedores de Hosting:
- Investiga y compara diferentes proveedores de hosting en términos de características, precios y opiniones de los usuarios.
Registro de Dominios:
- Investiga los diferentes registradores de dominios disponibles y compara los precios y servicios que ofrecen.
Configuración de un Servidor FTP:
- Configura un servidor FTP en una máquina local y prueba la transferencia de archivos entre diferentes dispositivos.
Instalación y Uso de MySQL:
- Instala MySQL en tu sistema y practica la creación de bases de datos, tablas y consultas SQL básicas.

Actividad: Que es xampp - fecha 28/05/2024

XAMPP es un paquete de software libre que proporciona una solución fácil de instalar para servidores web locales. El nombre XAMPP es un acrónimo que representa las plataformas cruzadas (X), Apache (A), MySQL (M), PHP (P) y Perl (P). Este paquete incluye:

Apache: Un servidor web que permite alojar sitios web y aplicaciones web.
MySQL/MariaDB: Un sistema de gestión de bases de datos relacional que se utiliza para almacenar y gestionar datos.
PHP: Un lenguaje de programación del lado del servidor que se utiliza para crear páginas web dinámicas.
Perl: Un lenguaje de programación de propósito general que también se puede utilizar para el desarrollo web.

XAMPP es ampliamente utilizado por desarrolladores para crear y probar aplicaciones web en sus computadoras locales antes de desplegarlas en un servidor en producción. Su principal ventaja es la facilidad de instalación y configuración, lo que permite a los desarrolladores enfocarse en el desarrollo y prueba de sus aplicaciones sin preocuparse demasiado por los aspectos técnicos de la configuración del servidor.

Características de XAMPP

Multiplataforma: Disponible para Windows, Linux y macOS.
Portabilidad: Fácil de instalar y configurar, puede llevarse en una unidad USB.
Componentes adicionales: Incluye herramientas como phpMyAdmin para la gestión de bases de datos, OpenSSL para seguridad, y más.
Uso educativo: Ideal para aprender y practicar desarrollo web sin necesidad de configurar un servidor remoto.

Cómo funciona

Para usar XAMPP, simplemente se descarga el instalador desde el sitio oficial de Apache Friends, se ejecuta la instalación y se inician los módulos necesarios (Apache, MySQL, etc.) desde el panel de control de XAMPP. Una vez que los servicios están en funcionamiento, se pueden desarrollar y probar aplicaciones web localmente accediendo a http://localhost en un navegador web.

En resumen, XAMPP es una herramienta fundamental para desarrolladores web que facilita la creación, prueba y depuración de aplicaciones web en un entorno local.

Actividad: FlexBox en CSS3 - fecha 02/07/2024

1- ¿Qué es Flexbox y para qué se utiliza en CSS?

2- Explica las propiedades principales del contenedor Flexbox.

3- ¿Cuál es la diferencia entre justify-content y align-items en Flexbox?

4- ¿Qué hace la propiedad flex-direction y cuáles son sus valores posibles?

5- Describe la propiedad flex-wrap y sus valores posibles.

6- Prácticas:

Crea un contenedor flexible que distribuya tres elementos de manera uniforme con espacios iguales entre ellos:

Preguntas sobre Media Queries

7- ¿Qué es una media query en CSS y para qué se utiliza?

8-Escribe la sintaxis básica de una media query en CSS.

9-¿Cuáles son algunas de las características que puedes usar en una media query?

Práctica:

10- Escribe una media query que cambie el color de fondo de una página cuando el ancho de la pantalla es menor a 500px.

11- Crea una media query que ajuste el tamaño de la fuente de los encabezados (h1) a 20px en pantallas menores a 800px.

12- Diseña un contenedor que cambie de una sola columna a dos columnas cuando el ancho de la pantalla sea mayor a 700px.