lunes, 27 de marzo de 2017

Fundamentos de la programación Algoritmos y lógica

INTRODUCCIÓN:
A la hora de programar tan importante como conocer sintaxis que utilicemos (lenguaje de programación) es conocer la forma de estructurar dicha sintaxis (uso de los distintos algoritmos y sentencias).
 Por ello es importante conocer los pasos lógicos para realizar un programa.
 Es conveniente tener muy claro lo que queremos conseguir y aplicar estrategias de resolución y desarrollo adecuadas.
 Si programamos sin tener en cuenta esto, sería como construir un edificio sin tener un plano, un proyecto, etc.
El buen programador, al igual que el buen proyectista en arquitectura, ha de tener claros cuáles son los pasos a ir dando para desarrollar una construcción sólida.
La precipitación, la falta de reflexión o las prisas por terminar son malas consejeras.
¿Por qué emplear nuestro tiempo en esta tarea? 
-A pesar de existir programas e incluso páginas web que nos facilitan esta tareas es importante que para que nuestra página esté bien diseñada y podamos mejorarla o adaptarla con nuevos y mejores recursos que van apareciendo conozcamos los pasos intermedios. 
-La mayoría de los programas generan un código de gran complejidad y ante cualquier problema será complicado localizarlo y resolverlo si no tenemos unos conocimientos mínimos.
1. FASES EN EL DESARROLLO DE UN PROGRAMA
 Cada programador tiene sus propios esquemas de trabajo, pero en líneas generales podemos distinguir las siguientes fases en el desarrollo de un programa:
2. CONOCER EL PROBLEMA A RESOLVER
Necesitaremos un conocimiento profundo de todos los aspectos relacionados con el problema, lo cual implica saber responder las siguientes preguntas:
1.     ¿Cuál es mi objetivo?
2.     ¿Cuáles son los condicionantes que afectan al problema?
3.     ¿Qué método o esquema de resolución voy a aplicar?
4.     ¿Cuáles son los datos de partida?
5.    ¿Qué resultado quiero obtener?
SOBRE EL OBJETIVO
A la hora de plantear un objetivo trataremos de subdividir la extensión y complejidad del problema hasta niveles lo más fácilmente abarcables por una persona, según la conocida estrategia del "divide y vencerás".
Aunque será la experiencia la que mejor nos guíe a la hora de plantear objetivos podemos usar esta regla: "Sólo trataremos de programar aquello que mentalmente somos capaces de abarcar en método, extensión y condicionantes".
EJEMPLOS: Los programas se utilizan en muchas actividades diarias. Por ejemplo en una farmacia, hay un ordenador que controla a través de un programa:
-La entrada de medicamentos (recepción)
-Salida de medicamentos (venta o envía a otras farmacias)
-Facturación. etc
-Avisar cuando el stock de cierto medicamento baja, fecha de caducidad,  etc
-Nóminas de los empleados, etc
Es claro que necesitará varios programas y algunos serán específicos a las caractarísticas de la farmacia.
EJERCICIOS: Realiza los siguientes ejercicios utilizando Google docs, y una vez que termines copiado a la carpeta compartida: FUNDAMENTOS DE PROGRAMACIÓN.

EJERCICIO 1: Tenemos una empresa que diseña paquetes informáticos a medida. Deberás entregar a tu cliente un listado de los programas que sería necesario implementar en su empresa para poder informatizarla:
a) Una tienda de ropa a nivel nacional, ejemplo: ZARA
b) Un banco que tiene banca on-line y ofrece diversos servicios, prestamos, hipoteca, etc. 
EJERCICIO 2: Supongamos que tenemos una empresa de reformas y el I.E.S. Aricel nos pide varios presupuesto para cambiar el muro. (según material/según nº de albañiles/según calidades, etc.
a) Diseña un programa informático que nos realice los cálculos de forma automática. Para ello utiliza en primer lugar los pasos para conocer el problema que vamos a resolver.
b) Uno de los elementos que tendremos que tener en cuenta es la elaboración de una factura. Indica las distintas fórmulas que serán necesarias para ello. 
c) OPINIÓN: ¿Crees que sería factible elaborar dicho programa y lo podríais utilizar para elaborar otros presupuestos para otras empresas? ¿Por qué?


4. REPRESENTACIÓN GRÁFICO-ESQUEMÁTICA DE PROGRAMAS. DIAGRAMAS DE FLUJO.
Un diagrama de flujo es una representación esquemática de los distintos pasos de un programa. 
Si tenemos un programa donde cada una de las sentencias se realiza de forma ordenada su diagrama sería el siguiente:
 Ejemplo: Uso del lavavajillas: 
1º El usuario indica el programa que quiere llevar a cabo.
2º El lavavajillas lee los datos dados por el usuario.
3º, 4º, 5º, 6º Realiza cada paso de la manera indicada por el usuario.
7º Termina el lavado y el lavavajillas se apaga y pita.
 En cambio, un diagrama de flujo que ocupe siete páginas podrá adoptar cualquier forma, por ejemplo:
Ejemplo 1: El ejemplo anterior valdría. Imagina que el usuario decide que no es necesario realizar los pasos 5º y 6º.
Así que en el paso 4º, saltaría automáticamente al 7º.
 Ejemplo 2: en un cajero automático:
1º El usuario introduce la tarjeta.
2º El cajero solicita la clave
3º El cajero lee los datos introducidos,
   3º.1 Si los datos solicitados son correctos aparece una ventana con varias preguntas. (va al paso 4º)
    3º.2. Si los datos solicitados son incorrectos se volverá a solicitar la clave (vuelve al paso 2º)
4º El cajero muestra varias opciones, dependiendo de éstas se irá a un paso u otro.
etc...

VER VIDEO

SÍMBOLOS UTILIZADOS: (copialos en tu libreta)
Para la creación de diagramas de flujo utilizaremos unos símbolos y normas de construcción determinados. En nuestro caso, un modelo simplificado de los estándares internacionales, con el objeto de poder interpretar y ser interpretados por otros programadores.
Terminal. Indica comienzo o final de un programa, subprograma o módulo.


Captura y emisión de datos. Entrada o salida de información desde o hacia el ordenador.


Proceso. Cualquier proceso interno realizado por el ordenador como asignación de valor a variables, operaciones matemáticas, etc.


Decisión múltiple. El dato o condición planteada presenta distintas alternativas (casos), siguiendo el programa distinta vía en función del caso.




Línea de flujo. Sentido del flujo de procesos. Indica qué proceso viene a continuación del otro.



    


Decisión múltiple. El dato o condición planteada presenta distintas alternativas (casos), siguiendo el programa distinta vía en función del caso.




Conector. Indica a través de una referencia  (número, letra o texto) dónde debe continuar un diagrama de flujo que se interrumpe.



Módulo independiente. Recibe distintos nombres como subprograma, subrutina, proceso, procedimiento, etc. Al llegar a esta llamada el programa pasa a ejecutar todas las instrucciones contenidas en la subrutina para una vez terminadas continuar el flujo.

NORMAS O REGLAS PARA LA CREACIÓN DE DIAGRAMAS DE FLUJO
1. Los diagramas de flujo se escriben de arriba abajo y de izquierda a derecha.
2. Todo símbolo (excepto las líneas de flujo) llevará en su interior información que indique su función exacta y unívoca.
EJEMPLOS


3. Un elemento del diagrama no puede tener más de una salida si no es un elemento de decisión. Existen excepciones que veremos en su debido momento.


EJEMPLOS


4. Las líneas de flujo no pueden cruzarse.


EJEMPLOS


EJERCICIO
Crear el diagrama de flujo que proporcione el volumen de un cilindro dados su altura y diámetro.


SOLUCIÓN

  INSTRUCCIÓN CONDICIONAL. BUCLES:
 
Anidamiento doble
(pseudocódigo y diagrama de flujo)
Si [Condición 1] Entonces
Instrucción 1
Instrucción 2
Si [Condición 2] Entonces
Instrucción 3
Instrucción 4
Si [Condición 3] Entonces
Instrucción 5
Instrucción 6
SiNo
Instrucción 7
Instrucción 8
FinSi
SiNo
Instrucción 9
Instrucción 10
FinSi
SiNo
Instrucción 11
Instrucción 12
FinSi
Ejemplo3. Hacer un diagrama de flujo que permita leer 2 números diferentes y nos diga cual es el mayor de los 2 números.

diagrama de flujo numero mayor
Los siguientes ejercicios los deberás realizar en la libreta:
EJERCICIO 1: Crear el pseudocódigo y el diagrama de flujo para un programa que pida un número entero distinto de cero y nos muestre en pantalla un mensaje indicándonos si el número es par o impar. Utiliza las sentencia SI.
2.Realiza el diagrama de flujo en el que se le pida al usuario que introduzca dos números, el ordenador deberá realizar la suma y mostrarla en pantalla. Luego preguntará al usuario si desea realizar otra suma o finalizar el programa, y dependiendo de cada caso volverá al paso inicial o finalizará el programa. 

3. Realiza el diagrama de flujo de una máquina expedidora de bebidas donde haya 3 tipos de comida y 2 de bebidas. Deberás utilizar las funciones CASO1,...; y SI.
4. Crea un diagrama de flujo del cajero de una tienda de ropa. Será un programa que permita introducir el precio de varios productos y solicite ser pagado por el cliente. Éste podrá pagar al contado o utilizando su tarjeta de crédito. Además cada artículo está identificado por un código de barras que indica su precio. Al final el cajero deberá mostrar una factura donde aparezca el precio base y el IVA.


5. Invéntate un ejemplo, crea su diagrama de flujo y el algoritmo que necesitas. Utiliza alguna de las sentencias siguientes:
PARA AMPLIAR: Mas sentencias:
CASO1, CASO2,...
WHILE -REPETIR
REPETIR MIENTRAS...
FOR-NEXT
WHILE-DO


PROGRAMAS PARA HACER DIAGRAMAS:
draw.io de google, permite muchos tipos de diagramas.

smartdraw, es más sencillo de usar pero su versión demo es sólo de 7 días.


PARA AMPLIAR:

HTML

HTML (HyperText Markup Language) es el lenguaje usado en las páginas webs. 
Es un lenguaje que puede ser interpretado por cualquier equipo informático independientemente del sistema operativo y explorador que utilice.
HyperText se refire a que aparecen enlaces a otras páginas, utilizando links.

Conoceremos el código básico, con el que podrás realizar tus primeras páginas web, antes de pasar a ver algún editor de código concreto como el Dreamweaver que facilitan la tarea.

Es muy importante tener ciertos conocimientos del lenguaje ante posibles problemas que, sin lugar a dudas, se nos van a presentar al editar nuestras páginas. 

Desde  aquí podrás acceder a otros cursos sobre este tema que hay en la red.


ACTIVIDAD: 1. Deberás copiar todas las sentencias que aparecen en el manual explicando para qué se utilizan y en caso de que tengan algún parámetro que valor puede tomar. Además, realiza a la vez las actividades que se van proponiendo, escribiendo el código adecuado y actualizando la página para ver los resultados.

1. Antes de empezar, veamos en qué consiste este código:


Actividad: Situate con el puntero del ratón sobre cualquier punto vacío de esta página. Pulsa el botón derecho y selecciona en el menú contextual la opción VER CÓDIGO FUENTE. Aparecerá algo similar a esto:


a02
En el caso de que estés con el Explorer. O algo así:
a03
En el caso del Firefox.

Aunque veas muchas sentencias raras, cuando te familiarices con ellas verás lo sencillo que puede ser programar en HTML.


2. Mi primera página:

Para escribir el código fuente utilizaremos un procesador de textos básico como el BLOC DE NOTAS. Inicio > Todos los programas > Accesorios > Bloc de notas. Se abrirá una ventana como ésta:
a04
En el código HTML cada sentencia aparecerá introducida una ETIQUETA de entrada y otra de SALIDA. 
1º-La primera etiqueta será la que indique que estamos escribiendo en lenguaje HTML:
<html> 
</html>
2º Dentro de esta etiqueta deberemos distinguir lo que es el encabezado y el cuerpo de la página usando las etiquetas HEAD y BODY, respectivamente. El encabezado lo usaremos para el título que aparecerá en la pestaña y en el body estará el contenido del programa.
3º Tendremos en cuenta siempre la siguiente norma: Tabula las etiquetas según el lugar que ocupen en el código, aunque puede parecerte un poco engorroso al principio, esta nota te hará más sencillo encontrar cada parte del código.
El código quedará tabulado así:


Para que se vea el documento como una página web, es necesario que le demos nombre y extensión. Así que lo guardaremos en el escritorio como índex.html
Observa que aparecerá el archivo en el escritorio con el icono de una página web.
Cierra el archivo y ábrelo de nuevo. Verás como de forma automática se abre el explorador mostrando tu página web.
Si quieres volver a editarla tendrás que hacer clic con el botón derecho sobre el archivo y darle a abrir como, escogiendo la opción editor de textos.

Actividad 2: cambia el cuerpo de tu página por el siguiente texto: Hola a tod@s!!!


3. Mejorando la página:

3.1. Centrar el texto: CENTER: Permite centrar el texto que se encuentre dentro de la etiqueta:
pondremos: 
<center>
    Hola a tod@s!!!
</center>

Para comprobarlo basta con guardar y hacer doble clic. O si tenemos abierto el archivo en el explorador bastaría con actualizar la página.

3.2. Aumentar el tamaño del texto: Hnumero: Cambia el tamaño según el valor numérico que pongamos, siendo el 1 el tamaño más grande y 6 el más pequeño:

pondremos: 
<center>
    <h6>Hola</h6> <h3>a</h3> <h2>tod@s</h2><h1>!!!</h1>
</center>


3.3. Poner un color e fondo: Se entiende que el color de fondo es una propiedad que afecta a todo el documento por lo que esta característica será lo que se llama un ATRIBUTO del cuerpo (BODY). Este atributo se llama BGCOLOR, BG de background.
Los parámetros que toma son los colores escritos en código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.
Ejemplo para poner el fondo de color verde:
<body bgcolor="green">


</body>

Para que veas cómo utilizar el sistema hexadecimal accede al enlace.


Actividad 3: 
a) Busca una página donde puedas acceder al código hexadecimal de los colores. Escribe su dirección web en tu libreta.
b) Utiliza el código hexadecimal para poner de color lila el fondo de la página.
c) Explica la diferencia entre utilizar Comillas dobles y no utilizarlas. (libreta)

c) Copia el siguiente texto y explica cómo podemos mejorarlo para que el título sea del mismo color, ponle un color azul. 




recursos: http://roble.pntic.mec.es/apuente/html/paginas/seis.htm

PROGRAMACIÓN

ÍNDICE
0. Introducción a la programación
1. Fundamentos de la programación. Algoritmos.

DISEÑO WEB
2. Lenguaje HTML. Uso en la creación de páginas web.
4. Editores web. Servidores de páginas web: Googe page, Blogger. JIMDO, etc.


PROGRAMACIÓN
5. SCRATCH
6. Procesing
7. Unity