clase3.md

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 3

Pseudocódigo

El pseudocódigo (o falso lenguaje) es una descripción de alto nivel compacta e informal del principio operativo de un programa informático u otro algoritmo.

Utiliza las convenciones estructurales de un lenguaje de programación real, pero está diseñado para la lectura humana en lugar de la lectura mediante máquina, y con independencia de cualquier otro lenguaje de programación. Normalmente, el pseudocódigo omite detalles que no son esenciales para la comprensión humana del algoritmo, tales como declaraciones de variables, código específico del sistema y algunas subrutinas. Fuente: Wikiwand

Partes:

• Definición del Problema:
• Entrada (Datos de Entrada)
• Proceso (Modificaciones)
• Salida (Datos finales)
• Cabecera:
• Variables, Constantes, etc...
• Cuerpo:
• Inicio, Instrucciones, Fin

Ginger Code

• @gingerCode en Github
• Especificación

PSeInt:

...una invitación a entrar en el maravilloso mundo de la programación...

• Descargar
• Noticias
• Documentacion
• Exportar

Trabajando con PSeInt

• No utilizaremos:
  • Arreglos
  • Objetos
  • Definición explícita
  • Expresiones coloquiales
  • Exportaciones

Variables:

• Numéricos
• Enteros

 -123, 12, 0...

• Reales

 1.75, 3.1415...

• Carácter (cadenas)

	'texto', "más textos..."

• Lógico (Boleanos)

	VERDADERO o FALSO

Expresiones:

• Operadores
• Funciones

Acciones Secuenciales:

• Asignación

	(variable)<-(expresion);
	
	// Otra opción
	(variable) = (expresión); 

• Lectura (asignacion desde el ambiente)

	Leer (variable)

• Escritura (muestra en el ambiente)

	Escribir (variable)

• Otras

	// Limpiar ventana
	Borrar Pantalla; 
	// Simulacion evento tecla
	Esperar tecla; 
	// Parar temporalmente
	Esperar (numero) Segundos; 

Estructuras de control:

• Condicionales:
  • Simple (if)

    Si (expresion_logica) Entonces
    	(acciones_por_verdadero)
    Fin Si
  

  • Valor por defecto (if... else)

    Si (expresion_logica) Entonces
    	(acciones_por_verdadero)
    Sino
    	(acciones_por_falso)
    Fin Si
  

  • Casos (Switch)

    Segun (variable_numerica) Hacer
    	(opcion_1):
    		(secuencia_de_acciones_1)
    	(opcion_2):
    		(secuencia_de_acciones_2)
    	(opcion_3):
    		secuencia_de_acciones_3)
    	De Otro Modo:
    		(secuencia_de_acciones_dom)
    Fin Segun 
  

• Bucles:
  • Mientras (while) Solo si se cumple la condicion se ejecutará

    Mientras (expresion_logica) Hacer
    	(secuencia_de_acciones)
    Fin Mientras
  

  • Para (for) Se ejecutará un número limitado de veces.

    Para (variable_numerica)<-(valor_inicial) Hasta (valor_final) Con (Paso) paso Hacer
    	(secuencia_de_acciones)
    Fin Para
  

  • Repetir (Do... While) Se ejecuta una vez al menos.

    Repetir
    	(secuencia_de_acciones)
    Hasta Que (expresion_logica)
  

Diagramas de flujo

El diagrama de flujo o diagrama de actividades es la representación gráfica del algoritmo o proceso. Se utiliza en disciplinas como programación, economía, procesos industriales y psicología cognitiva.

Estos diagramas utilizan símbolos con significados definidos que representan los pasos del algoritmo, y representan el flujo de ejecución mediante flechas que conectan los puntos de inicio y de fin del proceso. Fuente: Wikiwand

• Teoría

• Ejemplo

• Herramientas

  • Draw.io
  • Draw de LibreOffice
  • lucidchart

Demostración:

• Problema:

• Objetivo: Calcular el área de un triángulo

• Fórmula: (base*altura)/2

• Solución:

• Pseudocódigo (Ginger Code)

@altura = 4
@base = 6
@resultado = (@base * @altura) / 2
mostrar "El resultado es " + @resultado

• Pseudocódigo (pesInt):

Proceso areaTriangulo
	altura<-4
	base<-6
	resultado<-(base*altura)/2
	Escribir "El resultado es ", resultado
FinProceso

• Código:

	var altura = 4;
	var base = 6;
	var resultado = (base*altura)/2;
	console.log("El resultado es ", resultado);

Lenguaje unificado de modelado

El lenguaje unificado de modelado (UML, por sus siglas en inglés, Unified Modeling Language) es el lenguaje de modelado de sistemas de software más conocido y utilizado en la actualidad; está respaldado por el Object Management Group (OMG).

Es un lenguaje gráfico para visualizar, especificar, construir y documentar un sistema. UML ofrece un estándar para describir un "plano" del sistema (modelo), incluyendo aspectos conceptuales tales como procesos, funciones del sistema, y aspectos concretos como expresiones de lenguajes de programación, esquemas de bases de datos y compuestos reciclados.

Es importante remarcar que UML es un "lenguaje de modelado" para especificar o para describir métodos o procesos. Se utiliza para definir un sistema, para detallar los artefactos en el sistema y para documentar y construir. En otras palabras, es el lenguaje en el que está descrito el modelo.

Se puede aplicar en el desarrollo de software gran variedad de formas para dar soporte a una metodología de desarrollo de software (tal como el Proceso Unificado Racional, Rational Unified Process o RUP), pero no especifica en sí mismo qué metodología o proceso usar.

UML no puede compararse con la programación estructurada, pues UML significa Lenguaje Unificado de Modelado, no es programación, solo se diagrama la realidad de una utilización en un requerimiento. Mientras que programación estructurada es una forma de programar como lo es la orientación a objetos, la programación orientada a objetos viene siendo un complemento perfecto de UML, pero no por eso se toma UML solo para lenguajes orientados a objetos.

UML cuenta con varios tipos de diagramas, los cuales muestran diferentes aspectos de las entidades representadas.

Más información en Wikipedia

Recursos

• Wikipedia
• Herramientas
• Ejemplos

Mejorando con juegos

• Code Monkey
• Code Combat
• CodinGame
• Untrusted
• CheckIO & Empire of Code
• Elevator Saga
• CSS Diner
• Flexbox Froggy
• Flexbox Defense
• VIM Adventures
• Code Wars

Ejercicios: Pseudocódigo

1 - Diseña un programa que imprima los numeros del 1 al 100.

Proceso contadorPositivo
	
	Escribir "Empieza la cuenta!"

	controlador = 1

	Mientras controlador <= 100 Hacer
		Escribir controlador
		controlador = controlador +1
	Fin Mientras
	
	Escribir "Terminó la cuenta mágica..."
	
FinProceso

2 - Diseña un programa que muestre los numeros del 100 al 0.

Proceso contadorNegativo
	
	controlador = 100
	
	Escribir "Empieza la cuenta!"
	
	Mientras controlador >= 0 Hacer
		Escribir controlador
		controlador = controlador -1
	Fin Mientras
	
	Escribir "Terminó la cuenta mágica..."
	
FinProceso

3 - Diseña un programa que muestre los numeros pares entre 0 y 100.

Proceso contadorPares
	
	controlador = 0
	
	Escribir "Empieza la cuenta!"
	
	Mientras controlador <= 100 Hacer
		Escribir controlador
		controlador = controlador +2
	Fin Mientras
	
	Escribir "Terminó la cuenta mágica..."
	
FinProceso 

4 - Diseña un programa que simula el lanzamiento de una moneda al aire e imprimir si ha salido cara o cruz.

Proceso azarMoneda
	valor <- azar(2)
	
	Si valor = 1 Entonces
		Escribir "Salio Cara!"
	Sino
		Escribir "Salio Cruz!"
	Fin Si
	
FinProceso

5 - Diseña un programa que simula cien tiradas de dos dados y contar las veces que entre los dos suman 10.

Proceso azarMoneda

	coincidencias <- 0
	controlador <- 0
	
	Mientras controlador <= 100 Hacer
		
		dado1 <- azar(7)
		dado2 <- azar(7)
		tirada <- dado1 + dado2

		Si tirada = 10 Entonces
			coincidencias = coincidencias +1
		Fin Si
		
		controlador = controlador + 1
		
	Fin Mientras
	
	Escribir "El azar ... sumó 10 un total de " coincidencias " veces"

FinProceso

6 - Diseña un programa para calcular el porcentaje de hombres y mujeres en nuestro curso.

• Trucos:
  • Calcular porcentajes (segmento*100)/total

Proceso porcentajeAlumnos
	Escribir "El número de mujeres:"
	Leer cantidadMujeres
	
	Escribir "El número de hombres:"
	Leer cantidadHombres
	
	// Suma
	totalAlumnos <- cantidadHombres + cantidadMujeres
	Escribir "El total de alumnos es: ", totalAlumnos
	
	// Porcentaje mujeres
	porcentajeMujeres <- (cantidadMujeres*100)/totalAlumnos
	Escribir "El total de mujeres es: ", cantidadMujeres
	Escribir "El % de mujeres es: ", porcentajeMujeres
	
	// Porcentaje hombres
	porcentajeHombres <- (cantidadHombres*100)/totalAlumnos
	Escribir "El total de hombres es: ", cantidadHombres
	Escribir "El % de hombres es: ", porcentajeHombres

FinProceso

7 - Diseña un algoritmo que aplique al precio de un producto un descuento cuando se den las siguientes caracteristicas.

• Se aplica un 25% cuando:
  • Estamos en los meses de invierno
  • Y no es viernes o fin de semana.

Proceso calcularDescuento
    Escribir "¿En que mes estamos?"
    Leer mes
	
    Escribir "¿En que día estamos?"
    Leer diaSemana
	
    Escribir "¿Cuanto vale el producto?"
    Leer precio	
	
	descuento <- 25*precio/100
	precioConDescuento <- precio - descuento
	
	
	Si mes = "Diciembre" | mes = "Enero" | mes = "Febrero"  Entonces
		Si diaSemana = "Viernes" | diaSemana = "Sabado" | diaSemana  = "Domingo"  Entonces
			Escribir "No se aplica descuento aunque sea invierno.. ven durante la semana mejor!. Debes pagar ", precio
		Sino
			Escribir "BINGO! Has acertado de mes y días. Debes pagar solamente ", precioConDescuento
		Fin Si
	Sino 
		Escribir "No se aplica descuento.. ven en invierno mejor!. Debes pagar ", precio		
	FinSi

FinProceso

8 - Diseña un algoritmo para identificar a los clientes autorizados a entrar a nuestro sistema.

• Características:
  • La palabra clave es "Fictizia mola mucho"
  • Solo existen tres intentos
  • Si se pasan los tres intentos. Se despliega un mensaje informativo.

Proceso eureka
	clave <- "Fictizia mola mucho"
	acierto <- FALSO
	contador <- 0
	
	Mientras contador < 3 & acierto = FALSO Hacer
		Escribir "Dime el secreto:"
		Leer secreto
		
		Si secreto = clave Entonces
			acierto <- VERDADERO
			Escribir secreto, " es la clave que esperaba!"
		Sino
			Escribir secreto, " no es correcto."
		Fin Si
		
		contador<- contador+1
		
	Fin Mientras
	
	Si contador >= 3 Entonces
		Escribir "Lo siento... pero has agotado los 3 intentos."
	Fin Si

FinProceso

9 - Diseña un algoritmo introducido un numero y pasarlo a número romanos.

• Esperamos que el número sea menor de 50

Proceso conversionRomana
	Escribir "Dame un número:"
	Leer numero
	
	numeroOriginal <- numero
	numeroRomano <- ""
	
	Si numero <= 50 & numero > 0 Entonces
		
			Mientras numero > 0 Hacer
				// Escribir "Numero: ", numero
				
				Si numero = 50 Entonces
					numeroRomano = "L"
					numero = 0
				Fin Si
				
				Si numero >= 40 & numero < 50 Entonces
					numeroRomano = numeroRomano + "XL"
					numero = numero - 40
				Fin Si
				
				Si numero >= 10 & numero < 40 Entonces
					numeroRomano = numeroRomano + "X"
					numero = numero - 10
				Fin Si	
				
				Si numero = 9 Entonces
					numeroRomano = numeroRomano + "IX"
					numero = numero - 9
				Fin Si		
				
				Si numero = 8 Entonces
					numeroRomano = numeroRomano + "VIII"
					numero = numero - 8
				Fin Si	
				
				Si numero = 7 Entonces
					numeroRomano = numeroRomano + "VII"
					numero = numero - 7
				Fin Si	
				
				Si numero = 6 Entonces
					numeroRomano = numeroRomano + "VI"
					numero = numero - 6
				Fin Si	
				
				Si numero = 5 Entonces
					numeroRomano = numeroRomano + "V"
					numero = numero - 5
				Fin Si	
				
				Si numero = 4 Entonces
					numeroRomano = numeroRomano + "IV"
					numero = numero -4
				Fin Si
				
				Si numero <= 3 & numero > 0 Entonces
					numeroRomano = numeroRomano + "I"
					numero = numero - 1
				Fin Si		
				
			Fin Mientras
			
			Escribir numeroOriginal " en números romanos es " numeroRomano
	Sino
		Escribir numeroOriginal " NO es un número valido (0-50)"
	Fin Si
	
FinProceso

¡Nuestro primer proyecto!

Funcionamiento:

• Usaremos los issues de nuestro repositorio para coordinar todas las dudas que tengais.
• Crearemos un nuevo repositorio en Github para desarrollar el proyecto.

Objetivos Primarios

• Uso de selectores css3
• Al menos una llamada AJAX
• Al menos un evento

Objetivos Secundarios

• Documentación con JSDocs
• Varias llamadas AJAX
• Encapsulamiento del código con funciones anonimas autoejecutadas
• Multiples eventos
• "sensación" de navegación por varias vistas

Extras

• Test independientes con console.assert()
• Router en el front

Fecha de entrega:

• Clase 23 (finales de noviembre)

Recursos para el proyecto

APIs: Listados

• Public APIs
• programmableweb - List
• Open APIs Wikipedia
• apilist.fun

APIs: Interesantes

• Shodan
• pokeapi
• Open Weather Map
• Fitbit
• Marvel
• SWAPI - The Star Wars API
• reddit
• Deck of Cards - API
• TheTVDB API v2
• Twitter Streaming
• Guild Wars 2
• Nutritionix API

Datos Abiertos

• Portal de datos abiertos del Ayuntamiento de Madrid
• Iniciativa de datos abiertos del Gobierno de España
• EMT Datos Abiertos
• European Data Portal
• Open NASA
• Datos Abiertos de Mexico
• The home of the U.S. Government’s open data