Skip to content

Latest commit

 

History

History
581 lines (449 loc) · 21.5 KB

dia1.md

File metadata and controls

581 lines (449 loc) · 21.5 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Curso de JavaScript para desarrolladores web

Programación JavaScript, Manejo del DOM, Aplicaciones interactivas con AJAX, Vanilla

Clase 1 - Intro & Git/Github

Normas y demás

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

Metodología

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

Sobre el profesor

mic

Bio: Papá de

#OpenSource, #Python, #JavaScript, #Node , #Crafter.

Co-fundador de @os_weekends. Aprendiendo día a día en @alea_soluciones

Profe en @fictiziaescuela

A veces escribo en Medium cuando la ocasión me lo permite.

Redes Sociales:

Enlaces de interés

El largo camino del desarrollador web

  • Front-End
  • Back-End
  • Full-Stack
  • Dev Ops
  • etc...
  • No hay que agobiarse

Arquitectura de Internet

Navegación

img

Hosting

img

CMS (Back-End)

img

CDN (Content Delivery Network)

img

Tracking

img

W3C - World Wide Web Consortium

img

Front-end

HTML

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

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

NoBackend

Stack

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

Bases de datos

Entorno de desarollo moderno

Diversos Entornos

Herramientas

Documentación

Prácticas principales

Proyectos Personales de otros cursos

Control de Versiones

Bienvenidos a la maquina del tiempo

  • Arquitectura de Árbol(working area, staging Area, Repository)
  • Auditoria de código (quien? cuando? y que?)
  • Git trabaja en binario (imagenes, docs, etc...)
  • Git no guarda una copia de cada version, solo los cambios.
  • Distribución (Repositorios y Clones)
  • Opensource y funciona offline
  • Consola vs. GUI

Trabajo efectivo

Los entornos con Git

Repositorios locales y remotos

Repositorios locales y remotos

Working Flow

Como trabajar con Git

Github

C9.io

Creamos una cuenta y un workespace con referencia a nuestro repositorio de GitHub

C9.io (Control de versiones)

GIT (comandos)

Trabajar con Git/Github

Quiero subir algo a Github

  1. Verificamos el estado en general.
git status
  1. Nos actualizamos.
git pull
  1. Preparamos nuestro commit (añadimos archivos y añadimos la información adicional)
git add "ARCHIVO"
git commit -m "MENSAJE..."
  1. Actualizamos y enviamos los cambios a Github
git pull && git push

No quiero subir nada a Github, pero quiero estar actualizado

  1. Verificamos el estado en general.
git status
  1. Nos actualizamos.
git pull

Trucos:

Si usais este comando:

git config --global credential.helper 'cache --timeout=9999999'

Git cacheará la sesión y no os preguntará el usuario o la password durante 9999999ms (2,7h).

Ejercicios

1 - Sube tu código a GitHub

  • Crea una carpeta en el repositorio con tu nombre.
  • Una subcarpeta pública y otra privada
  • Crea un archivo Hello Word usando Markdown
  • Comparte la tu carpeta pública con todos nosotros en GitHub

2 - Crea un Gist con el esqueleto de un documento html

3 - Presentate en este issue

4 - Navega por awesome-javascript para descubrir más cosas sobre nuestro ecosistema.

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

  • Curratelo

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

  • Calidad del Aire con Firebase

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