PROGRAMACION: Inicios en Python

Esta evaluación en clase hemos tenido que trabajar un lenguaje de programación. En mi caso, he elegido PYTHON, sencillamente porque me pareció el lenguaje mas asequible, además del más sencillo de entender.

A través de la página web CODEACADEMY hemos podido trabajar el lenguaje de programación que hemos querido aprendiendo la base de cada lenguaje.

Trás trabajar durante 1 mes este lenguaje, me he dado cuenta de que toda su base está en ecuaciones. Cada operación que quieres hacer se basa en una serie de ecuaciones que la maquina va resolviendo. Otra de las cosas que he aprendido es que la maquina lee de linea en linea, es decir, empieza en la línea 1 y continua con la 2 como si de una lista de condiciones se tratara o la lógica aristotélica.

PROGRAMACIÓN: Principales lenguajes de programación

Antes de comenzar a adentrarnos por el mundo de la programación, tendremos que saber qué es programar y en que consiste.

Programar es crear programas (software) que enseñan al ordenador a hacer algo, a través de una secuencia de instrucciones que debe seguir, y que hemos escrito usando un lenguaje (de programación) específico para ello.

Estos lenguajes de programación los podemos dividir en tres entornos: entorno web, entorno app o un entorno general.

Como primer lenguaje destacamos JAVA:
Un lenguaje multiplataforma (permite programar desde distintos dispositivos) que se programa orientado a objetos. Cuando hablamos de objetos, son entidades que tienen distintas características que les puedes atribuir. Es uno de los lenguajes más utilizados por no decir, el más utilizado.

Siguiendo por la rama de programación más general, destacamos el bloque C es decir C / C++ / C#:

C es el lenguaje de programación que sigue a Java. Con un lenguaje medio donde no utiliza un código muy complejo y gacias a eso se utliza mucho en el desarrollo de Hardware. 

C++ (C plus plus), un lenguaje que tiene como base C pero que SI está orientado a la programación de objetos. 

C#, es un lenguaje desarrollado por Microsoft, que al igual que C++ tiene su base en C, pero tiene como objetivo ser un lenguaje mucho más intuitivo.

Destacamos por último PYTHON:
Un lenguaje de los más "jóvenes" que ha triunfado por su versatilidad, es decir, por su capacidad de programar de diferentes formas y en diferentes plataformas.

Para compara la complejidad y funcionamiento básico de cada programa, se habla del conocido código de "Hola Mundo", un código que permite que aparezca un mensaje en la pantalla de tu ordenador.  Veámoslo en cada tipo de lenguaje de programación:

JAVA:

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hola mundo");
  }
}

 C:

#include <stdio.h>

int main()
{
        printf("Hola mundo");
        return 0;
}

C++:

#include <iostream>

using namespace std;

int main() {

    cout << "Hola Mundo" << endl;

    return 0;

}

PYTHON:

print "Hola mundo";

KitEducaixa - DESAFIO EMPRENDE : FIN DE ROYECTO

Tras varias semanas de clases trabajando en la propuesta para el concurso de la Caixa de "Desafiío Emprende" , ¡por fin hemos acabado!

Hemos tenido que presentar un "NABCH", un documento donde dábamos a conocer nuestro proyecto de forma esquemática y donde abarcábamos el PROBLEMA que nos habíamos encontrado, la SOLUCIÓN, los BENEFICIOS de nuestra propuesta, su SOSTENIBILIDAD, la RELACIÓN con el cliente que ibamos a tener y nuestra posible COMPETENCIA.

Además presentamos un documento adicional donde desarrollamos más en profundida nuestro proyecto:

KitEducaixa - DESAFIO EMPRENDE: PRESENTACIÓN

Esta evaluación hemos empezado a trabajar en un programa de la fundación La Caixa llamado Desafío Emprende. Consiste en un concurso de colegios de toda España sobre proyectos de emprendimiento.

Pero no solo consiste en un concurso si no que incluye varias sesiones o módulos donde aprendes con ejemplos y ejercicios qué es emprender o qué tiene que hacer una persona joven para poder emprender.

El proyecto empezó fomentando nuestra creatividad y haciéndonos entender que todos éramos creativos de uno u otro modo tratando de imaginar que podíamos crear con una pelota de tenis o un taburete.

Seguidamente nos dividimos en grupos de trabajo y comenzamos a pensar en problemáticas que nos rodean por que eso significaba emprender: buscar una solución a un problema que nos rodeaba.

Mi grupo comenzamos a pensar problemas muy grandes comparado con nuestra capacidad de ayuda como el gasto de comida en los restaurantes, las pocas ofertas a la cultura o las muchas tarjetas que llevábamos día a día. Claro que cuando analizábamos los problemas obteníamos un 5 en "eficiencia" porque eran problemas que incluían casi al 100% de la población pero eran muy poco viables para nuestros conocimientos y tiempo.

Así que ante esta situación tuvimos que volver a empezar de cero y cambiamos de mentalidad por completo. Empezamos a pensar en problemas cotidianos, de "andar por casa", y al final conseguimos lo que queríamos.

Os presento:

Nuestro problema era el malgasto de agua que existía cada vez que nos duchábamos entre que abríamos el grifo y nos metíamos en la ducha. Sabíamos que había varias soluciones al respecto pero todas implicaban tiempo y esfuerzo de la persona que se iba a duchar.

Por eso hemos diseñado un sistema que permite ahorrar esos mas de 10 litros de agua cada vez que te duchas porque no están a la temperatura adecuada.

Nuestro sistema requiere una pequeña instalación pero es muy sencillo. Lo único que el cliente tendría que hacer es determinar una temperatura a la que quiere que este el agua y encender la ducha. 

Todo el agua que saldría hasta estar a la temperatura adecuada no sale y se recopila en un tanque que más tarde vuelve a salir por la ducha vaciándose para su siguiente uso o se redirige a la cisterna. 

Con este sistema conseguimos que ningún solo litro se malgaste antes de ducharte, un problema que 

creemos que nos engloba muchos de nosotros.

Nuestra presentación del producto para clase

MAC BETH - SHAKESPEARE - TEATRO EL PILAR

Macbeth fue escrita por William Shakespeare. Es considerada una de sus más poderosas y más oscuras tragedias. Ambientada en Escocia, la obra dramatiza los efectos psicológicos y políticos corrosivos producidos cuando el mal es elegido como una vía para satisfacer la ambición de poder.

​

Representadas los días 10 de Marzo, 17.18 y 19 de Marzo y unas dos últimas representaciones los días 24 y 25 de Marzo.

​

Con una duración de 2 horas aproximadamente con un descanso de 10 minutos.

​

Dirección: Jose Luis Buitron

Ayudante de dirección: David Constanzo

DISEÑO DE ILUMINACIÓN por GUZMÁN FERNÁNDEZ:

Distribución de focos

Planta del teatro

Programación básica de HTML: DIV

Lo último que aprendimos en este cuerso básico de HTML, fue a dividir nuestra página. Estas divisiones las conocemos como contenedores o DIV`s, muy utiles para darle una imagen más bonita a nuestra página.

 Comenzamos como siempre añadiendo las etiquetas básicas (<html> </html>). Lo primero que hay que tener en cuenta es que estos DIV`s o contenedores dividen tu página como tu quieras y además, como suele pasar en HTML y hemos comprobado, los podemos modificar a nuestra manera.

La etiqueta para añadir un div es; <div> </div>. Para añadirle las características que queramos utilizamos el atributo de CSS style, añadiéndolo despues de la etiqueta <div> de la siguiente forma:

<div style="..."> Contenido que queramos que aparezca </div>

Los valores que podemos modificar son los siguientes:

Hay que tener en cuenta que es lo que queremos crear y como debemos hacerlo. Recomiendo jugar con los valores Position y top/bottom/right/left porque podemos dividir nuestra página web en diferentes columnas y franjas que nos van a ser muy útiles.

Un ejemplo de como podemos usar estos DIV`s:

<html>

<head>

<title> Contenedores </title>

</head>

<body>

<div style="border:3px dashed rgb(171,16,16); position: absolute; top:10%; left:20%; right:20%; height: 200px;text-align: center; font-size:30px; background-image:url(IMG/IMG_01.jpg);" >

Guzmán Fernández - Prueba página 

</div>

<div style="border:3px solid rgb(248,188,59); position: absolute; top:40%; left:20%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >

Contenedor 1

</div>

<div style="border:3px solid #3A15E0; position: absolute; top:40%; left:45%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >

Contenedor 2

</div>

<div style="border:3px solid #95E015; position: absolute; top:40%; left:65,5%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >

Contenedor 3

</div>

<div style="border:3px double #000000; position: absolute; top:60%; left:30%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >

Contenedor 4

</div>

<div style="border:3px double #B700FF; position: absolute; top:60%; left:55%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >

Contenedor 5

</div>

<div style="border:3px dotted #00FFDA; position: absolute; top:80%; left:20%; right:20%; height:30px; width:860px; text-align: center; font-size:20px;" >

Contenedor Largo 1

</div>

<div style="border:3px solid #F2FF78; position: absolute; top:85%; left:20%; right:20%; height:30px; width:860px; text-align: center; font-size:20px;" >

Contenedor Largo 2

</div>

<div style="border:3px double #000000; position: absolute; top:90%; left:20%; right:20%; height:30px; width:430px; text-align: center; font-size:20px;" >

Contenedor Largo 3

</div>

<div style="border:3px double #000000; position: absolute; top:90%; left:54%; right:20%; height:30px; width:430px; text-align: center; font-size:20px;" >

Contenedor Largo 4

</div>

</body>

</html>

El resultado sería el siguiente:

Programación avanzada de HTML: Ejemplo web

Adjunto la explicación de una página web  programada con los conocimientos mostrados en los anteriores post y con conocimientos más avanzados de HTML y CSS:

EXPLICACIÓN CÓDIGO:

La base general de la página web es HTML (Lenguaje de código web por etiquetas) pero además he usado CSS (Hojas de estilo para HTML) que me ha ayudado a crear el 90% de la página web.

Lo primero de todo antes de analizar cada parte del código, he usado dos archivos CSS muy útiles, libre y al alcance de todo el mundo. 

Uno de esos archivos es de una empresa o plataforma web llamada: “Bootstrap”. En concreto he usado su archivo CSS más básico que se encuentra alojado en un servidor y al que no puedes acceder y editar, pero es muy útil para algo básico. Lo único que he hecho es enlazar ese documento que se encuentra en la nube a mis documentos HTML y programar.

Un segundo archivo CSS es de un programador, Daniel Eden. Este archivo se llama anímate.css, y es un archivo de descargar gratuita que añades a tu carpeta de archivos de la página web y que contiene millones de animaciones que puedes aplicar a diferentes componentes de tu código. 

DESCARGAR WEB

Programación básica de HTML: Imágenes

Finalizando nuestras clases de programación HTML. Aprendimos a insertar imágenes.

Comencemos añadiendo imágenes a nuestro documento HTML, pero como siempre empezaremos escribiendo las etiquetas más básicas (<head> </head>...). Para insertar una imagen en HTML utilizaremos el código:

<img src="Dirección del archivo">

Si añadimos a nuestro documento HTML, dos imágenes, el código y la página nos quedarían así:

Como en otro códigos, podemos editar el formato de nuestra imagen, con las siguientes etiquetas:

ALIGN= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o  a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y  bottom.  

WIDTH= Este atributo es opcional, pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.

HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el    alto de la imagen.  

BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.

Si añadimos más imágenes a nuestra página y además cambiamos su formato, nuestro código quedaría de la siguiente manera:

Y nuestra página quedaría de la siguiente manera:

Programación básica de HTML: Tablas y listas

Siguiendo con nuestra programación de una página web HTML. Vamos a aprender cómo hacer listas y tablas. 

Para hacer tablas numeradas o no, utilizamos los siguientes comandos:

Seguimos utilizando los mismo codigo (<html> </html> ; <head> </head>; <body> </body>) para la estructura de la página y añadiremos nuestras listas:

Nuestra página se vería así:

Para añadir una tabla a nuestra página web tenemos varios códigos donde también la configuramos:

También podemos añadirle los siguientes atributos:

Para crear una tabla, primeros crearemos filas ( <tr> </tr> ) y dentro de ellas todas las celdas que necesitemos ( <td> </td> ). Tenemos que configurar nuestras tablas por filas:

El siguiente código quedaría así:

Programación básica de HTML: Nuestra primera página

En una primera clase de TIC hemos aprendido a programar en HTML (Hyper Text Markup Language).

HTML es un lenguaje que leen los navegadores y que se encargan de interpretar el código y traducirla para que el usuario pueda verla. En esta entrada veremos como empezar a programar un documento HTML.

Estos documentos se basan en una programación de etiquetas ( <> </> ), y todo archivo HTML comenzará con lo siguiente:

 

Estas etiquetas informan al navegador de que lo que comienza a traducir es un documento HTML. Tras esto podemos comenzar a programar nuestra pagina. Un documento HTML tiene una parte donde informa de como es la pagina es decir nombre, dirección, etc y una parte donde se encuentra el contenido de la pagina conocido como cuerpo (body). Para ello escribiremos los siguiente:

Centrémonos en la cabeza (head), ahora queremos configurar el nombre de nuestra pagina web, para ello escribiremos lo siguiente:

Veamos como queda si abrimos nuestro documento .html:

Como vemos nuestra página no tiene ningún contenido pero ya tiene nombre. Pasemos al cuerpo (body) de nuestro documento HTML donde aparecerá el contenido que queremos. Primero pondremos una imagen de fondo siguiendo este código:

Donde está escrito "Imagen que queremos añadir y donde se ubica" , tenemos que introducir la ubicación de la imagen que queramos añadir que este ubicada en nuestro ordenador. Recomiendo crear una carpeta donde introducir todas estas imágenes. Por ejemplo:

Mis archivos están alojados en la carpeta IMG y se llama IMG_01 con la extensión .jpg. MUY IMPORTANTE que aparezca la extensión. Nuestra web se vería así:

Ahora nos toca añadir textos y títulos. Para ello tenemos una multitud de comandos que podemos combinar pero que funcionan igual. Los comando son:

Títulos: <h1><h2><h3><h4><h5><h6> 

Párrafos: <p> </p>

Letras más detalladas: <font...> </font>

Para poner en negrita, cursiva o subrayado cualquier texto:

Podemos ver su uso:

Y nos quedaría así:

Recordar que todos los comando que abramos <> hay que cerrarlos </>  y que nuestro código HTML esté lo más ordenador posible.