¡Descarga Informe acerca de sitio web y más Guías, Proyectos, Investigaciones en PDF de Tecnologías de la Información y la Comunicación solo en Docsity!
1º BACHILLERATO TECNOLOGÍA
PROYECTO
TRABAJO SOBRE CODIGO EN SPYDER
(IDE PARA PYTHON)
Introducción al proyecto
Hola, en este documento explicare mi proyecto, el cual es una pagina web hecha con Python, HTML y CSS. Primero, me gustaría explicar unas bases de mi proyecto, como, por ejemplo, ¿qué es Spyder? Spyder es un entorno de desarrollo integrado (IDE) de código abierto y multiplataforma para la programación científica en el lenguaje Python. Spyder se integra con varios paquetes destacados del stack científico de Python, así como con otro software de código abierto. (Imagen del IDE.) Aclarado ya esto, creo que no hay razón de explicar que es Python, o HTML, o CSS, ya que todos estos son lenguajes de programación.
El Proyecto Mi proyecto es una pagina web usando Python, pero uno simplemente no podría hacer la página web, así como así, hacen falta ciertas herramientas, bueno, una en específico. Esta herramienta es Flask. Flask es un framework minimalista escrito en Python que permite crear aplicaciones web rápidamente y con un mínimo número de líneas de código. Está basado en la especificación WSGI de Werkzeug y el motor de templates Jinja2 y tiene una licencia BSD. Esta herramienta no esta por defecto en Spyder, asique tenemos que instalarla, para esto hay que escribir un sencillo comando en la terminal IPython de Spyder. (Imagen de la Terminal IPython con el comando ejecutado.) Como puede apreciarse en la imagen, el comando usado es “!pip install flask”, lo que hace el comando es, obviamente, instalar la herramienta Flask, herramienta la cual será muy importante por razones ya dadas. Luego de hacer este paso, ahora tenemos que hacer nuestra carpeta de proyecto. Esta carpeta se hace yendo a la parte superior arriba de el IDE, en la casilla que dice Proyectos.
App.py – Cerebro del sitio web Este archivo de Python (.py) es el corazón del sitio, donde está la lógica que controla cómo y cuándo se muestra cada página (Codigo backend “app.py”, hecho por Eduardo Alvarez.) Lo primero que hace es importar dos cosas importantes: el módulo os (que sirve para trabajar con rutas de carpetas) y Flask, una herramienta de Python que permite crear páginas web fácilmente. Después cambia la carpeta de trabajo a la ruta donde está guardado tu
proyecto, y crea una aplicación Flask con la línea app = Flask(name). Esa línea es, literalmente, la que enciende tu “servidor” local. Luego vienen los ruteos, que son las direcciones que los visitantes pueden usar. Cada ruta empieza con @app.route('/'), y lo que hay entre comillas es la dirección de la página. Por ejemplo, '/' es la página principal, y debajo hay una función llamada home() que devuelve el contenido que debe mostrarse. En este caso, devuelve index.html, que es tu página principal, junto con un título llamado “Warehouse”. De esta forma, cuando alguien entra a tu web, Flask sabe que tiene que mostrar esa plantilla. Más abajo, hay dos rutas más: una llamada '/gallery', que en el futuro servirá para una galería de imágenes, y otra '/credits', pensada para mostrar los créditos o información de contacto. Cada una tiene su función (gallery() y contact()) que devuelven plantillas diferentes, como gallery.html o contact.html. Por último, está la parte que hace que todo funcione: if name == "main": app.run(debug=False, use_reloader=False). Eso significa que, si ejecutas el archivo directamente, Flask inicia el servidor local y la web se puede ver desde el navegador en la dirección http://127.0.0.1:5000/. El modo “debug” está apagado para evitar que se reinicie solo cada vez que cambias algo.
El archivo empieza declarando el tipo de documento () y el idioma (), para que los navegadores sepan cómo interpretarlo. En la sección , se incluyen los metadatos básicos: el tipo de codificación (UTF-8, para que se vean bien los acentos y símbolos), la etiqueta que hace que la página se adapte a móviles, y el , que define el texto que se muestra en la pestaña del navegador. Justo después, se enlaza la hoja de estilos externa (style.css) con la línea <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">. Esa sintaxis de llaves dobles ({{ }}) es propia de Flask, y sirve para decirle al programa dónde buscar el archivo dentro de la carpeta “static”. Dentro del HTML también hay un pequeño bloque de estilos básicos, que definen cosas como el tipo de letra, el color de fondo y la alineación del texto. Se usa una fuente monoespaciada (“Courier New”) y un color gris claro (#f4f4f4), todo con un aire retro muy de los años 2000. (2da parte del código frontend “index.html”, hecho por Eduardo Alvarez.) En la parte del cuerpo (<body>), lo primero que aparece es un gran título que dice “Welcome to the Warehouse.” Justo debajo hay un texto en movimiento hecho con la etiqueta <marquee>, que es una característica antigua del HTML que hace que el texto se desplace de lado a lado, dando un efecto nostálgico de las webs de principios de siglo. El texto dice “Welcome to my little place in the Internet.”, que añade un toque personal. Al ser mi sitio web, es técnicamente mi pequeño rincón en ese inmenso sitio.
Después viene un pequeño menú de navegación con la etiqueta , que contiene un enlace llamado “Inicio” que lleva de vuelta a la página principal. Luego hay una línea horizontal () que sirve para separar secciones, y un mensaje simpático que indica que la página está “orgullosamente en construcción”, acompañado de una imagen GIF animada típica de los viejos sitios personales. Por último, el pie de página muestra un texto con derechos reservados y mi alias o nombre de usuario, “ReceptionDry”, junto con los años 2001– 2025, reforzando el estilo Y2K de la web. Style.css – Diseño visual del Sitio Web Por último, está el archivo CSS (.css) que da personalidad visual a la página. Todo lo que aquí se define afecta a la apariencia de los elementos del HTML.
Las líneas divisorias (hr) se muestran con un borde punteado en color turquesa y un ancho reducido al 60% del total de la página, lo que le da un aire más centrado y decorativo. Finalmente, el pie de página (footer) reduce un poco el tamaño del texto y deja espacio arriba para separarlo del resto del contenido. El sitio web y conclusiones Después de toda esta extensa explicación, supongo que tocara explicar mis razones del porque decidí irme a Python, y mas el hacer un sitio web, que irme a SketchUp como gran parte lo hizo. La razón es que ya se programar, entonces simplemente quise hacer algo entretenido y sencillo para para pasar el rato, quizás tuve que haber escogido algo que no se para, pues, aprender. Pero tampoco es que sea muy bueno en esto, es solo un hobby y cada proyecto de programacion que hago me hace mejorar un poco cada vez más. A lo largo del informe, habrá leído mucho las palabras “Retro”, “2000s”, “Y2K”, todo esto son estéticas del internet. Visuales pasadas que realmente, aunque sean de una época que yo no viví, me gustan mucho, las paginas viejas y toscas de un Internet prematuro son curiosas de ver. Y quise plasmar eso aquí, aunque debo avisar, la página web no está terminada (¡hay funciones como la galería y contactos en la que ya estoy trabajando, ya terminé el codigo frontend HTML del apartado de la galería!), también, lo siento si la pagina no es realmente lo esperado. La imagen que elegí es provisional y solo es para rellenar por ahora (también cumple con la estética, asique funciona perfectamente, aun con lo chillona que es.)
(“Warehouse”, hecha por Eduardo Alvarez.) Muchas gracias por leer.
