REPÚBLICA BOLIVARIANA DE VENEZUELA INSTITUTO UNIVERSITARIO POLITÉCNICO “SANTIAGO MARIÑO” SEDE BARCELONA INGENIERÍA EN SISTEMAS INTRODUCCIÓN A LA PROGRAMACIÓN WEB Autor/ Autora: María Gonzalez C.I 30.899.206 Docente de la Asignatura: José Castillo ELECTIVA II Sección “AC” Anaco, abril del 2024 TABLA DE CONTENIDO INTRODUCCIÓN....................................................................................................................... 3 LA PROGRAMACIÓN WEB.................................................................................................... 4 TIPOS DE APLICACIONES WEB .......................................................................................... 5 1. Aplicaciones web estáticas ................................................................................................ 6 2. Aplicaciones web dinámicas ............................................................................................. 6 3. Aplicaciones web de comercio electrónico ....................................................................... 6 4. Aplicaciones web de gestión de contenido........................................................................ 6 5. Aplicaciones web de página única .................................................................................... 6 6. Aplicaciones web de portal ............................................................................................... 6 7. Aplicaciones web progresivas ........................................................................................... 7 PRINCIPALES LENGUAJES PARA LA PROGRAMACIÓN WEB................................... 7 1. HTML ............................................................................................................................... 7 2. CSS.................................................................................................................................... 8 3. JavaScript .......................................................................................................................... 8 4. PHP ................................................................................................................................... 9 5. Python ............................................................................................................................... 9 HERRAMIENTAS BÁSICAS PARA EL DESARROLLO WEB ........................................ 10 1. Color Hunt ....................................................................................................................... 10 2. Google Fonts ................................................................................................................... 10 3. Unsplash y Pexels............................................................................................................ 10 4. Onepage Love y Dribbble ............................................................................................... 10 5. JavaScript Hero ............................................................................................................... 10 6. Stack Overflow................................................................................................................ 11 7. MDN Web Docs .............................................................................................................. 11 8. Vercel y Netlify ............................................................................................................... 11 CONCLUSIÓN .......................................................................................................................... 12 REFERENCIAS BIBLIOGRAFICAS .................................................................................... 13 ANEXOS .................................................................................................................................... 14 INTRODUCCIÓN La programación web es el proceso de creación y mantenimiento de sitios web. Puede implicar una amplia gama de acciones, desde la codificación y el diseño hasta la gestión de contenidos y la administración del servidor web. En 1989, Tim Berners-Lee, un científico de la computación británico, comenzó a trabajar en el proyecto de la web mientras estaba en el CERN, el laboratorio de física de partículas en Ginebra. Berners-Lee buscaba una forma de compartir información y documentos de manera eficiente entre científicos de todo el mundo. Así nació la idea de un sistema hipertextual basado en internet. El 06 de agosto de 1991 se creó la primera web, aunque no se abrió al público en general hasta el 23 de agosto de 1991. Con esta breve introducción queremos dar inicio al siguiente trabajo de investigación con el objetivo de entender los siguientes puntos provenientes (Concepto de programación web, Tipos de aplicaciones web, Principales lenguajes de programación web y Herramientas básicas para el desarrollo web) del tema 01 llamado INTRODUCCIÓN A LA PROGRAMACIÓN WEB de la materia ELECTIVA II. LA PROGRAMACIÓN WEB Entendemos por programar el proceso a través del cual se emplean una serie de códigos y cifras para introducir algoritmos necesarios para la realización de un proyecto. La acción de programar es desasociable del lenguaje de programación, que es la herramienta que le permite al programador ordenar acciones a un terminal. El primer hallazgo de algo relacionado con la programación lo encontramos en 1801 de la mano de Joseph Marie Jacquard y su telar programable. Con el se da a luz al primer sistema de programación, integrado en un telar que leía el código introducido y automatizaba los procesos. La programación web es un proceso complejo que implica la creación de productos digitales en línea. También es un término que define la creación de un sitio web para Internet o intranet. Para lograr esto, se utilizan tecnologías de software del lado del servidor y del lado del cliente que involucran una combinación de procesos de base de datos con el uso de un navegador web para realizar ciertas tareas o mostrar información. Tradicionalmente, el software departamental o incluso los proyectos empresariales ambiciosos a gran escala se desarrollan de forma independiente, es decir, utilizando lenguajes PHP compilados (C, C++, Delphi), semicompilados (.NET, Mono, Java) o interpretados (Python). crear funcionalidad y la interfaz de usuario general, pero el desarrollo orientado a web es muy adecuado para este propósito, porque es más homogéneo y multiplataforma, y dependiendo de la tecnología utilizada, más rápido y más. potente tanto para diseñar, implementar y probar, como para su uso una vez completado. En el desarrollo web intervienen varias funciones diferentes, cada una con su propio conjunto de técnicas y responsabilidades. Estas son las funciones de quienes trabajan en el área de desarrollo web de una compañía: - Un Desarrollador web: se encarga de codificar y crear el sitio web. Trabaja con los diseñadores para crear un diseño que satisfaga las necesidades del cliente y luego escribe el código para hacer realidad ese diseño. - El Diseñador CSS: es el responsable del aspecto de un sitio web. Crean las hojas de estilo que dictan el aspecto de cada elemento de una página. - Un Codificador de HTML: el codificador toma los diseños creados por el diseñador de css y los convierte en código HTML real. También, se asegura de que todos los elementos de una página estén en el lugar correcto y puedan tener el estilo deseado. - El Desarrollador de JavaScript describe el código que hace que los sitios web sean interactivos. Participa en la creación del software y se asegura de que el sitio web esté listo para ser público. - El administrador del servidor web es responsable de configurar y mantener el servidor web que aloja el sitio web. Se asegura de que el servidor funcione correctamente y esté a la altura de las exigencias del sitio web. TIPOS DE APLICACIONES WEB Las aplicaciones web son programas de software que se ejecutan en un navegador web, como Google Chrome o Firefox. Estas aplicaciones no se descargan en nuestros dispositivos, sino que se ejecutan en un servidor y se transmiten a través de Internet al navegador de nuestro dispositivo. Algunas de las aplicaciones web más populares incluyen Gmail, Google Maps y YouTube. Estas poderosas herramientas ofrecen la comodidad de ser accesibles desde cualquier lugar y en cualquier momento, siempre que tengas una conexión a internet. Dichas aplicaciones han revolucionado la manera en que realizamos tareas cotidianas, ya que permiten ejecutar funciones complejas que antes requerían software específico. Además, fomentan la colaboración en tiempo real y ofrecen actualizaciones automáticas, garantizando así la última versión y funcionalidad mejorada sin esfuerzo por parte del usuario. Existen diversos tipos de aplicaciones web como: 1. Aplicaciones web estáticas Estos sitios están diseñados para presentar información a los visitantes sin permitirles interactuar más allá de la lectura. Son simples y generalmente están compuestos por datos HTML y algunas líneas de CSS. Como por ejemplo el sitio web de la fotógrafa mexicana Graciela Iturbide, que muestra información sobre sus proyectos y fotografías. 2. Aplicaciones web dinámicas Estos sitios no son estáticos y se actualizan constantemente. Pueden modificar partes del sitio o cambiar completamente según la interacción del usuario. Son ideales para tiendas en línea que deben actualizar su stock y precios constantemente. 3. Aplicaciones web de comercio electrónico Diseñadas para comprar y vender productos en línea y ofrecer diversos servicios donde existan métodos de pago como lo puede ser Amazon, eBay, shein, etc. 4. Aplicaciones web de gestión de contenido Permiten crear, editar y organizar contenido en línea. Google drive, Dropbox, 4share son algunos ejemplos donde puedes gestionar todo tu contenido multimedia o documental agregándolo a la nube para que exista un respaldo en dicha aplicación y el usuario no pierda sus datos. 5. Aplicaciones web de página única Cargan una sola página y actualizan el contenido dinámicamente. Comunes en aplicaciones como Gmail o Trello. 6. Aplicaciones web de portal Ofrecen información centralizada y enlaces a otros recursos como BBC news, CNN y cualquier plataforma de noticias y contenido. 7. Aplicaciones web progresivas Combinan características de aplicaciones web y móviles. Pueden funcionar sin conexión y ofrecen una experiencia similar a las aplicaciones nativas. PRINCIPALES LENGUAJES PARA LA PROGRAMACIÓN WEB Existen muchos lenguajes de programación que se pueden usar para desarrollar una página web. Incluso se pueden usar varios de ellos y mezclar tecnologías. Puedes tener un frontend en una tecnología y el backend en otra. Las opciones son muchas. Sin embargo, se puede decir que los principales lenguajes de programación para desarrollar web son: 1. HTML Es el lenguaje básico utilizado para estructurar el contenido de un sitio web. Es el estándar de la industria para la creación de páginas web y es el lenguaje que todo desarrollador web debe dominar. HTML es un lenguaje de marcas, lo que significa que utiliza etiquetas para describir la estructura y el contenido de una página web. Con HTML, puedes crear estructuras básicas como encabezados, párrafos, imágenes, enlaces y formularios. Cada etiqueta describe una función específica, como el encabezado, el párrafo o la imagen. Por ejemplo, la etiqueta <h1> se utiliza para describir un encabezado de primer nivel, mientras que <p> se utiliza para describir un párrafo de texto. Además, HTML permite la creación de enlaces mediante la etiqueta <a> y la adición de imágenes a través de la etiqueta <img>. También se pueden crear formularios para recolectar información del usuario, utilizando etiquetas como <form>, <input> y <textarea>. Es importante recordar que HTML solo se ocupa de la estructura de la página, no de su estilo. El diseño visual de una página web se maneja mediante CSS, un lenguaje de hojas de estilo en cascada (CSS) y se utiliza para dar estilo y formato a la estructura HTML. 2. CSS Es un lenguaje de diseño utilizado para dar estilo y formato a los documentos HTML y XML. Es utilizado para separar el contenido de la presentación en las páginas web. Te permite controlar el diseño de tu sitio web, incluyendo los colores, las fuentes, las imágenes, los márgenes y las posiciones de los elementos en la página. Utilizando selectores y reglas, puedes aplicar estilos a elementos específicos en tu HTML y así crear una apariencia consistente en todas las páginas de tu sitio. Una regla CSS consta de un selector y un conjunto de declaraciones. El selector especifica a qué elemento o elementos de HTML se aplicará la regla y las declaraciones especifican qué propiedades del elemento deben ser modificadas. Por ejemplo, si queremos cambiar el color de fondo de todos los elementos <p> a azul, utilizaríamos el siguiente código CSS: p { background-color: blue; } También es posible utilizar clases e identificadores para especificar selectores más precisos, permitiendo aplicar estilos a grupos específicos de elementos o incluso a un elemento específico. CSS también proporciona una variedad de modelos de posicionamiento, permitiendo controlar con precisión la posición de los elementos en una página. Además de los estilos básicos como color, tamaño y posición, CSS también ofrece una gran variedad de efectos visuales avanzados, como sombras, transiciones y animaciones, lo que permite crear diseños atractivos y dinámicos. 3. JavaScript JavaScript es un lenguaje de programación de alto nivel utilizado para agregar interactividad y dinamismo a las páginas web. Es un lenguaje interpretado que se ejecuta directamente en el navegador web del usuario, lo que significa que no es necesario un servidor para su ejecución. Con JavaScript, puedes crear efectos visuales, validar formularios, manejar eventos, crear animaciones, y mucho más. Te permite crear experiencias interactivas para los visitantes de tu sitio web, como juegos, aplicaciones en línea, y características de navegación avanzadas. Por ejemplo, se pueden utilizar scripts de JavaScript para validar formularios antes de enviarlos, mostrar y ocultar elementos en una página, o crear efectos visuales como desplazamientos suaves y galerías de imágenes. Se utiliza en conjunto con otras tecnologías como AJAX y JSON para crear aplicaciones web ricas. AJAX permite la actualización de contenido en una página sin necesidad de recargarla completamente, mientras que JSON es un formato de intercambio de datos popular que se utiliza para transmitir información entre el servidor y el navegador. 4. PHP Es un lenguaje de programación de código abierto especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML. Fue creado originalmente por Rasmus Lerdorf en 1995. PHP es un lenguaje de programación del lado del servidor, lo que significa que se ejecuta en el servidor web y el resultado se envía al navegador del usuario en forma de HTML. Se utiliza principalmente para generar dinámicamente contenido HTML, pero también se puede utilizar para generar XML, imágenes y otros tipos de contenido. Es compatible con varios sistemas operativos, incluidos Windows, MacOS, Linux y Unix, y se puede usar junto con varias bases de datos, como MySQL, PostgreSQL y Oracle. 5. Python Es un lenguaje de programación de alto nivel, interpretado y de propósito general. Es muy popular debido a su legibilidad y facilidad de aprendizaje. Fue creado a principios de los años 90 por Guido van Rossum. Se usa ampliamente en desarrollo web gracias a la gran cantidad de librerías y frameworks disponibles para este fin. Algunos de estos frameworks populares son Django y Flask, que proporcionan una estructura para desarrollar aplicaciones web rápidamente, y ofrecen funciones como gestión de bases de datos, autenticación de usuarios y manejo de solicitudes HTTP. Además, Python también se utiliza para el procesamiento de datos y la automatización de tareas a través de librerías como NumPy y Pandas, y se utiliza en una amplia variedad de campos, desde la ciencia de datos y la inteligencia artificial hasta la automatización de tareas y la automatización de pruebas. HERRAMIENTAS BÁSICAS PARA EL DESARROLLO WEB 1. Color Hunt Es una herramienta muy útil ya que te permite buscar por categorías de colores, añadir a favoritos las paletas de colores que más te gusten y cada uno de estos vienen con su respectivo código hexadecimal, el cual podrás copiar para usarlo en el código fuente de tu página. 2. Google Fonts Es un repositorio de fonts e íconos gratuitos. Además de eso, es un sitio seguro y mantenido por Google para descargar estos materiales. En la sección de íconos de Google Fonts se puede hacer lo mismo. Se pueden descargar en formatos .png y. svg o también insertarlos directamente en el código de la página web. 3. Unsplash y Pexels Son herramientas que te ofrecen imágenes de alta calidad para agregarlas a la página web. 4. Onepage Love y Dribbble Son sitios donde tanto personas que diseñan como las que programan publican sus creaciones. De ahí se pueden tomar ideas y referencias para empezar a crear un portafolio con los proyectos en la web, o también para tomar inspiración en los proyectos futuros. 5. JavaScript Hero Es una página encargada de enseñar todo lo necesario con ejercicios totalmente prácticos de JavaScript. 6. Stack Overflow Stack Overflow es el sitio de preferencia para publicar cualquier duda que exista sobre programación. Ahí se pueden compartir los bugs que estén sucediendo en el código y la comunidad intentará dar una solución del porqué puede estar sucediéndote eso. También es el sitio donde se puede encontrar algunos de los errores que suceden y ya han sido resueltos por la comunidad 7. MDN Web Docs Acá se encuentra toda la documentación existente sobre los estándares web de HTML, CSS y JavaScript. Es la fuente de conocimiento donde se descubren las razones de cada cosa en el desarrollo web y el cómo usarlas para programar tus páginas. 8. Vercel y Netlify Son plataformas en la nube que, entre tantas de sus funciones, permiten hacer deploy o lanzar a producción la página web. Estas herramientas alojan sitio en la nube y con una interfaz intuitiva se pueden ver páginas o aplicaciones web funcionando en internet sin necesidad de realizar alguna configuración compleja. CONCLUSIÓN Hoy en día utilizamos aplicaciones para todo, programas especializados en diferentes tareas, etc. Los lenguajes de programación no son simplemente un detalle más del amplio mundo de la informática, y por lo tanto deben ser vistos como el fundamento y la base del desarrollo y avance de la computación. Un lenguaje de programación permite a uno o más programadores especificar de manera precisa sobre qué datos una computadora debe operar, cómo deben ser estos almacenados, transmitidos y qué acciones debe tomar bajo una variada gama de circunstancias. Todo esto, a través de un lenguaje que intenta estar relativamente próximo al lenguaje humano o natural, tal como sucede con el lenguaje Léxico. Una característica relevante de los lenguajes de programación es precisamente que más de un programador puedan tener un conjunto común de instrucciones que puedan ser comprendidas entre ellos para realizar la construcción del programa de forma colaborativa. REFERENCIAS BIBLIOGRAFICAS 1. Admin. (2021, 5 octubre). Programación, un poco de historia y conceptos clave. https://syltec.es/blog/2021/10/05/programacion-un-poco-de-historia-yconceptos-clave/ 2. Admin. (2023, 13 enero). Tipos de aplicaciones web. Bambu Mobile. https://bambu-mobile.com/tipos-de-aplicaciones-web/ 3. colaboradores de Wikipedia. (2024, 23 febrero). Desarrollo web. Wikipedia, la Enciclopedia Libre. https://es.wikipedia.org/wiki/Desarrollo_web 4. Dazzet. (2023, 3 noviembre). Principales lenguajes de programación para web Dazzet. Dazzet. https://dazzet.co/lenguajes-de-programacion/ 5. Juanexplosions. (2022, 30 noviembre). 9 herramientas necesarias para el desarrollo web. Platzi. https://platzi.com/blog/herramientas-desarrollo-web/ 6. Platziteam. (2023, 7 diciembre). ¿Qué son las aplicaciones web? Características y ejemplos. Platzi. https://platzi.com/blog/que-son-aplicacionesweb/ 7. Tekla. (2022, 18 marzo). ¿Qué es el desarrollo web? [Todo lo que necesitas saber]. Tekla, agencia digital. https://tekla.io/blog/que-es-desarrollo-web/ ANEXOS 1. DESCRIPCIÓN GRÁFICA DE UNA WEB ESTÁTICA Y UNA DINÁMICA 2. APLICACIONES WEB DE COMERCIO ELECTRÓNICO 3. CÓDIGO FUENTE EN HTML