Skip to content

Latest commit

 

History

History
786 lines (646 loc) · 39.8 KB

clase1.md

File metadata and controls

786 lines (646 loc) · 39.8 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

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 1

Normas y demás

  • Puntualidad
  • Liquidos y comida
  • Ubicación
  • Cafeteria, cajeros, farmacias, etc...

Importante

  • Descansos
  • Gestión del curso en GitHub
  • Comunicación fuera de clase
  • Repositorio común
  • Toda la teoría, prácticas y recursos

metodología

  • 3 Proyectos personales
  • Participación en proyectos de grupo
  • Participación en Guild 24 de Open Source Weekends (OSW)
  • Prácticas y "deberes"
  • Repasos, para afianzar lógica

Temario

Un master de 300h con mucho contenido

Simbología y niveles

Este master puede ser útil para diversos niveles (Básico, Medio y Avanzado).

Por definición todo es nivel básico, pero en partes del contenido se incluyen teoria y ejercicios para niveles superiores, para indicarlo usaremos:

  • Básico 🍀 o nada, primeros pasos en el mundo del desarollo web
  • Medio ♠️ buen nivel de programación y una expriencia media que domina los conceptos básicos y medios
  • Avanzado ♦️ gran nivel y experiencia que domina que domina los conceptos avanzados

Sobre los profesores

panda_developer

Bio: "#Maker, #IoT, #OpenSource | #JavaScript, #Node, #Python | Co-organizador de @os_weekends | Profe en @fictiziaescuela | Mentor en @TetuanValley | Autor de #JavaScriptInspirate | Freelance | xIBMer"

Redes Sociales:

awesome_carlos

Bio: "A veces sueño que tengo que tomar decisiones con if else, o masticar con while. Entreprenú. Lio a gente en @os_weekends. Cuando me dejan, prestidigito un poco. Cuando no, hago música. Papá de @gamify_es."

Redes Sociales:

Hablemos de la web

El largo camino del desarrollador web

  • Front-End
  • Back-End
  • Full-Stack
  • Dev Ops
  • etc...

Arquitectura de Internet

Navegación

img

Hosting

img

CMS (Back-End)

img

Ajax

img

CDN (Content Delivery Network)

img

Tracking

img

W3C - World Wide Web Consortium

img

Front-end

HTML

img

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)

CSS

img_logo

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

JavaScript

js_logo

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

ECMA-262

Back-end

Node.js

Node_logo

Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web. Fue creado por Ryan Dahl en 2009 y su evolución está apadrinada por la empresa Joyent, que además tiene contratado a Dahl en plantilla - Wikipedia

Otra manera es posible

bloqueo

Puntos Fuertes

  • Asincronía (no bloqueo)
  • Backend completo
  • NPM (comunidad)
  • Single thread (paralelismo)
  • Librerías propias
  • Utilidades
  • Código abierto
  • Basado en el V8 (escrito en C++) de Google
  • Multiplataforma
  • Orientado a Eventos
  • No se limita solo a servidores HTTP

Librerías interesantes

Más Back-end

NoBackend

Stack

  • LAMP:
    • Linux
    • Apache
    • MySQL
    • PHP
  • MEAN:
    • MongoDB
    • Express
    • Angular
    • Node

Bases de datos

Entorno de desarollo moderno

Diversos Entornos

Desarrolladores de hoy

JSDramas

Cambios, cambios... y más cambios

humor

The Magpie Developer

The Sad State of Web Development

Fatiga y tendencias

Herramientas

Documentación

C9.io

c9_logo

Características estrella

  • Code together in real time
  • Share your IDE, your workspace, a preview, or your running app
  • Replay all edits and see your code at any point in time

Otras características

  • Preview in any browser
  • Built-In Terminal
  • Language Tools
  • Debugger
  • Split View
  • Themes
  • Run Panel
  • Key Bindings Editor
  • VIM/Emacs/Sublime Mode
  • Built-In Image Editor

Más

Comunidad

Libros

Charlas recomendadas

Otros/Inspiracionales

CSS

JS

Listados

Developers Importantes a los que seguir...

Listados

Blogs, posts, etc...

Medium

Youtubers, charlas, etc...

Meetups y eventos

JavaScript en Acción

  • The scraping machine

    • 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

  • Simple hangouts bot

    • 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

  • GingerCode

    • Orientado a nuevos programadores
    • Pseudocódigo funcional
    • Alto nivel de abstracción
    • Isomórfico

  • GoblinDB

    • Base de datos reactiva
    • Almacenamiento Asíncrono
    • Patrones de diseño (Namespace, Façade, etc...)
    • Ambush Functions, funciones Lambda a demanda
    • Soporte a Eventos

  • OSWaldito

    • 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

  • Slack Canal Directo

    • 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

  • Know Your SNPs

    • 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

  • protoUnicorn

    • 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

  • Spotymix

    • Permite crear nuevas playlist
    • Fusiona canciones de diversas playlist
    • Permite juntar tus mejores canciones con las mejores canciones de otro amigo
    • Social Login integrado

  • JSDayES golosinas IOT

    • 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

  • IT Pulse

    • 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

  • MovieFire

    • Integración con soluciones No-Backend
    • FrontEnd con Jade
    • BackEnd Flexible y dinámico
    • APIRest Cliente -> Servidor
    • BackEnd con Express
    • CORS y Ajax

  • AireMadrid

    • 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

  • AireMAD

    • Evolución de Aire Madrid
    • Scraping
    • Fuentes de datos Alternativas
    • Backend con Pillarsjs
    • Frontend con Angularjs
    • Permanencia de datos con GoblinDB

  • Calidad del Aire con Firebase

    • Manejo de comunicación serial
    • Eventos y asincronía
    • IoT

  • Curratelo

    • APIs de terceros
    • Stream directo de datos
    • Servidor Http
    • Tiempo Real y sincronía con WebSockets
    • Automatización con Slack y Hangouts