- Front-End
- Back-End
- Full-Stack
- Dev Ops
- etc...
Navegación
Hosting
CMS (Back-End)
CDN (Content Delivery Network)
Tracking
W3C - World Wide Web Consortium
HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.1
El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.HTML Wikiwand
- Versiones:
- HTML 1.0 (1991)
- HTML 2.0 (1995)
- HTML 3.2 (1997)
- HTML 4 (1997)
- HTML 4.01 (1999)
- HTML 5 (2014)
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.CSS Wikiwand
- Versiones:
- Versión 1 (CSS1) en 1996
- Versión 2 (CSS2) en 1998
- Versión 2.1 (CSS2) en 2004
- Versión 3 (CSS3) en 2011
- Ejemplos:
JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript Wikiwand
Características
- Multiparadigma
- Imperativo y estructurado
- Dinámico
- Tipado dinámico
- Objetual
- Evaluación en tiempo de ejecución
- Funcional
- Funciones de primera clase
- Prototípico
- Prototipos
- Funciones constructoras
- Entorno de ejecución
- Funciones varídicas
- Funciones como métodos
- Arrays y la definición literal de objetos
- Expresiones regulares
-
Versiones:
- Versión 1 (Junio de 1997)
- Versión 2 (Junio de 1998)
- Versión 3 (Diciembre de 1999)
- Versión 3 (Abandonado)
- Versión 5 (Diciembre de 2009)
- Versión 5.1 (Diciembre de 2011)
- Versión 6 (Junio de 2015)
- Versión 7 (Junio de 2016)
- Versión 8 (Junio de 2017)
- Versión 9 (Junio de 2018)
-
Compatibilidad:
-
Compiladores
-
Librerías
-
Frameworks (MV)*
-
JavaScript en el servidor
-
NODE - JavaScript en el servidor
-
Python
-
Ruby
-
Java
- Spring
- etc...
- LAMP:
- Linux
- Apache
- MySQL
- PHP
- MEAN:
- MongoDB
- Express
- Angular
- Node
- JSON
- AJAX
- APIs Rest
- WEBSOCKET
- Platform as a service (PaaS)
- Programación funcional
- Test-driven development (TDD)
- Manifiesto por el Desarrollo Ágil de Software
- El estado del desarrollo Front-End en 2016 por Ashley Nolan
- Chrome Dev Tools
- Can I use
- EsLint
- JSHint
- Editores
- Máquina expendedora
- Buenos Días, Madrid
- NYTimes - Hardcover Fiction
- NYTimes - Best Sellers
- IMBD & AJAX
- Spotify - Encuentra artistas similares
-
- Alto nivel de abstracción para el usuario final
- Soporte como aplicación de terminal con Vorpal
- Generación dinámica de scripts en varios lenguajes (JS, Python, etc...)
- Gestión de procesos hijos de forma nativa
- Instalación global como módulo de NPM
-
- Aislamiento del core para mejorar la portabilidad usando patrones
- XMPP Protocolo
- Soporte de operaciones en terminal
- Soporte para la instalación como dependencia de NPM
- Extensión de por API interna
- Incorporación de servicios externos como Alchemy (Inteligencia Artificial como servicio)
- Gestión de la asincronía
- Array de objetos
- Gestión de notificación y ayuda al usuario
- Detección de eventos de Error y cierre del sistema
-
- Orientado a nuevos programadores
- Pseudocódigo funcional
- Alto nivel de abstracción
- Isomórfico
-
- Base de datos reactiva
- Almacenamiento Asíncrono
- Patrones de diseño (Namespace, Façade, etc...)
- Ambush Functions, funciones Lambda a demanda
- Soporte a Eventos
-
- Orientado a IOT
- Comunciación I2C
- Movimiento controlado por WebSockets
- Renderización en cliente de VR usando three.js
- Stream de vídeo bajo demanda frame a frame
- Uso del sintetizador de voz nativo de Chrome
- Gestión de redes sociales
-
- Orientado a la gestión de redes sociales
- Escucha activamente conversaciones en Google Hangouts
- Envía mensajes en Google Hangouts
- Envía mensajes en Slack
- Envía mensajes al azar clasificados por prioridad en Slack
- Envía mensajes de Error y estado al administrador en Goolgle Hangouts
- Puede ser desplegado en multiples entornos (Raspbian, Linux, OSX, Windows, C9...)
- Permite desplegar multiples avatares y personalidades desde la configuración para comunicarse en Slack
-
- Proyecto BioTecnológico
- Analiza ADN
- Permite buscar dentro del ADN ciertos patrones
- No almacena datos
- Futura migración a aplicación de escritorio
- Formulario para realizar nuevas queries (desarrollo) sin tener que programar
-
- Librería de utilidades para JavaScript
- Utiliza los mejores métodos de librerias extendidas como Lodash o Underscore
- Añade estos métodos a nuestro JavaScript mediante prototype
-
- Permite crear nuevas playlist
- Fusiona canciones de diversas playlist
- Permite juntar tus mejores canciones con las mejores canciones de otro amigo
- Social Login integrado
-
- Orientado a IOT
- Comunicación Serial
- Gestión de dispositivos externos
- No necesita HTTP
-
Raspi - System Info to Firebase
- Partiendo de otro repositorio/proyecto.
- Monitorización del sistema
- Uso de comandos de terminal
- Gestión de procesos inestables
- Integración con soluciones No-backend
- Tiempo Real
- No necesita HTTP
-
- Partiendo de otro repositorio/proyecto.
- APIs de terceros
- Stream directo de datos
- Servidor Http
- Tiempo Real y sincronía con WebSockets
- Eventos
- Evaluación semántica de la información
- Sin Bases de datos
-
- Integración con soluciones No-Backend
- FrontEnd con Jade
- BackEnd Flexible y dinámico
- APIRest Cliente -> Servidor
- BackEnd con Express
- CORS y Ajax
-
- Arquitectura alternativa en versiones anteriores
- Conversión y parseo a Json
- Procesamiento de datos en bruto
- APIRest
- Operaciones cíclicas gestionadas por Pillarsjs
- FrontEnd con Jade
- BackEnd con Express
- Documentación con JSDocs
-
- APIs de terceros
- Stream directo de datos
- Servidor Http
- Tiempo Real y sincronía con WebSockets
- Automatización con Slack y Hangouts
-
- Manejo de comunicación serial
- Eventos y asincronía
- IoT
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
PSeInt:
...una invitación a entrar en el maravilloso mundo de la programación...
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)
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
Demostración:
-
Problema:
-
Objetivo: Calcular el área de un triángulo
-
Fórmula: (base*altura)/2
-
Solución:
-
Pseudocódigo:
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);1 - Diseña un programa que lea dos números y realice los siguientes cálculos:
- Valor de su suma
- Valor de su resta
- Valor de su division
- Valor de su producto
Proceso calculosVarios
Escribir "El primer numero:"
Leer valor1
Escribir "El segundo segundo numero:"
Leer valor2
// Suma
calculo <- valor1+valor2
Escribir "El valor de la suma es: ", calculo
// Resta
calculo <- valor1-valor2
Escribir "El valor de la resta es: ", calculo
// División
calculo <- valor1/valor2
Escribir "El valor de la división es: ", calculo
// Multiplicación
calculo <- valor1*valor2
Escribir "El valor de la multiplicación es: ", calculo
FinProceso
2 - 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
3 - Diseña un programa que lea dos números y los compare. Como resultado esperamos que nos diga cual es mayor... o si son iguales.
Proceso compararNumeros
Escribir "El primer número:"
Leer valor1
Escribir "El segundo valor:"
Leer valor2
Si valor1 > valor2 Entonces
Escribir valor1, " es mayor"
Fin Si
Si valor1 < valor2 Entonces
Escribir valor2, " es mayor"
Fin Si
Si valor1 = valor2 Entonces
Escribir "son iguales"
Fin Si
FinProceso
4 - Diseña un programa que lea tres números distintos y nos diga cual de ellos es el mayor.
Proceso compararVariosNumeros
Escribir "El primer número:"
Leer valor1
Escribir "El segundo valor:"
Leer valor2
Escribir "El tercer valor:"
Leer valor3
Si (valor1 > valor2) & (valor1 > valor3) Entonces
Escribir valor1, " es mayor"
Sino
Si valor2 > valor3 Entonces
Escribir valor2, " es mayor"
Sino
Escribir valor3, " es mayor"
Fin Si
Fin Si
FinProceso
5 - Diseña un programa que siga el siguiente proceso:
- Pedir por teclado tres números.
- Si el primero es negativo, debe sumar los otros dos
- Si no multiplicará los tres numeros
- Mostrar el resultado final incluyendo una referencia a la operación realizada.
Proceso jugandoConNumeros
Escribir "El primer número:"
Leer valor1
Escribir "El segundo valor:"
Leer valor2
Escribir "El tercer valor:"
Leer valor3
Si valor1 < 0 Entonces
calculo <- valor2 + valor3
Escribir "El resutlado de la suma es ", calculo
Sino
calculo <- valor1 * valor2 * valor3
Escribir "El resutlado de la multiplicacion es ", calculo
FinSi
FinProceso
6 - 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
7 - Diseña un algoritmo que al introducir un numero por teclado. Que nos diga si es positivo o negativo.
Proceso esPositivo
Escribir "Dame un número:"
Leer numero
Si numero < 0 Entonces
Escribir numero, " es negativo"
Sino
Escribir numero, " es positivo"
FinSi
FinProceso
8 - Diseña un algoritmo que al introducir un numero por teclado. Que nos diga si es par o impar.
Proceso esPar
Escribir "Dame un número:"
Leer numero
Si numero %2 = 0 Entonces
Escribir numero, " es par"
Sino
Escribir numero, " es impar"
FinSi
FinProceso
9 - 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
10 - Diseña un algoritmo que confirme si una fecha es valida y además devuelva la fecha en dos formatos diferentes.
- Características:
- El usuario introduce tres números (día, mes, año)
- Validar la fecha. En caso de error incluir un mensaje informativo.
- Después de validar, devolvemos la fecha en formato DD/MM/AAAA
- Convertimos el número del mes, en el nombre del mes real y devolvemos la fecha en el siguiente formato ( DD de MES de AAAA)
Proceso verificadorDeFechas
Escribir "Dime el Año:"
Leer year
Escribir "Dime el Mes:"
Leer month
Escribir "Dime el Dia:"
Leer day
fecha <- ConvertirATexto(day) + "/" + ConvertirATexto(month) + "/" + ConvertirATexto(year)
Si day <= 31 & day > 0 & month <= 12 & month > 0 & year > 0 Entonces
Escribir "La fecha es correcta ", fecha
Segun month Hacer
1:
fechaDetalle <- ConvertirATexto(day) + "de Enero de " + ConvertirATexto(year)
2:
fechaDetalle <- ConvertirATexto(day) + "de Febrero de " + ConvertirATexto(year)
3:
fechaDetalle <- ConvertirATexto(day) + "de Marzo de " + ConvertirATexto(year)
4:
fechaDetalle <- ConvertirATexto(day) + "de Abril de " + ConvertirATexto(year)
5:
fechaDetalle <- ConvertirATexto(day) + "de Mayo de " + ConvertirATexto(year)
6:
fechaDetalle <- ConvertirATexto(day) + "de Junio de " + ConvertirATexto(year)
7:
fechaDetalle <- ConvertirATexto(day) + "de Julio de " + ConvertirATexto(year)
8:
fechaDetalle <- ConvertirATexto(day) + "de Agosto de " + ConvertirATexto(year)
9:
fechaDetalle <- ConvertirATexto(day) + "de Septiembre de " + ConvertirATexto(year)
10:
fechaDetalle <- ConvertirATexto(day) + "de Octubre de " + ConvertirATexto(year)
11:
fechaDetalle <- ConvertirATexto(day) + "de Noviembre de " + ConvertirATexto(year)
12:
fechaDetalle <- ConvertirATexto(day) + "de Diciembre de " + ConvertirATexto(year)
Fin Segun
Escribir "La fecha en otro formato: ", fechaDetalle
Sino
Escribir "Error! los datos no son correctos!"
Fin Si
FinProceso
11 - 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