awt.feb.2020

Curso web ADM

Clase 1

• POO 1

  • Fundamentos
    • OOP / POO
    • OOP / POO
    • ECMAScript 6
    • JS
    • Material Design
    • MarkDown

• Línea de comandos

• Todos los comandos se escriben con minúscula

• Tabulador: Completa el nombre de archivo/carpeta Si existe en el - directorio actual

• Flecha arriba/abajo: Historial de comandos

• Comandos básicos

  • . -> Mi nivel
  • .. -> Un nivel arriba
  • ls -> List
    • l -> tipo lista
    • a -> Archivos invisibles
  • cd -> Cambiar de directorio
  • mkdir -> Crea un directorio
    • mkdir [Nombre de directorio]

• GIT

  • ¿Qué es Git?
  • Instalación
    • Linux / MacOS Git
    • Windows Git for windows
    • Comandos básicos
      • configure
      • status
      • add
      • commit
      • pull
      • push
  • Para salir del editor de texto VIM en Mac/Windows(gitbash)
    • tecla 'esc'
    • comando -> :q!

Clase 2

POO 2

• Sintaxis

• Variables (No Tipado)

  • Espacio en memoria que contiene cualquier valor, Se antepone el nombre de la variable:
    • var
    • let
    • const
    • final

• Strings

  • Textos, siempre se escriben entre comillas
    • "Soy un string"

• Funciones

  • Son intrucciones que se escriben entre {}
    • Función anonima(Arrow function): () -> {"Instruccion"}
    • Función: function nombreFuncion() {"Instruccion"}

• Array (Listas o arreglos)

  • Son grupos o listas de objetos, valores, o funciones: Arrays literales se escriben entre '[]', Los arrays asociativos JSON se escriben entre llaves {'descripcion':'valor'}

• Clases

  • Son Objetos que tienen la capacidad de pasar parametros y cambiar sus propiedades: Se escriben siempre con mayusculas
  • Ej. Programacion reactiva con React o Flutter

• Metodos

  • Son Funciones que viven dentro de una clase y van a afectar sus propiedades: Todos los metodos van despues de un punto "." y se escriben "camelCase"
  • Ej. document.getElementById()

• Operadores lógicos

  • Simbolos que nos permiten generar operaciones matemáticas
    • Multiplicación: 2*2
    • Suma: 2+2
    • resta: 2-2
    • Potencia: 2**2
    • División: 2/2
  • Operadores W3C

• Estructuras de control

  • Estructuras que nos permiten condicionar nuestro código
    • If
    • Switch
    • For
    • While

Clase 3

• JS
  • Funciones
    • Parámetros o argumentos

Clase 4

• JS
  • (Arrays)[https://love2dev.com/blog/javascript-remove-from-array/]
    • Indice, push
  • setTimeout()
  • setInterval()
  • TODO:
    • Crear Un js archivo nuevo
    • Declararlo en el HTML
    • Crean una nueva seccion id=ejercicio

      • Titulo

        • Funcionalidad:
          • Cambiar cada 3 segundos
          • Por lo menos tres titulos distintos

      • Parrafo

        • Funcionalidad:
          • Su estado por defecto
            • estilo -> display:none

      • Boton

        • Funcionalidad:
          • Aparecer el parrafo al hacer click

Clase 5

• (SASS)[https://sass-lang.com/guide]
  • Terminal o GUI(General user interface)
  • Sintaxis básica
    • Jerarquía
    • Concatenación

Clase 5

• (SASS)[https://sass-lang.com/guide]

  • Listas
  • Creacion de clases con @each

• Código creativo

  • P5.js
    • Ejercicios

Tarea

Usar sass usar variables interaccion JS

• Menu al dar click en un elemento, se scrollea suavemente hacia la sección deseada.(CSS)

• Header se pega arriba de la ventana al scrollear fuera de la portada(JS)

• Al dar click en el botón del contacto, debe aparecer una leyenda por debajo de el 'form'

• Imprime en un 'div' el valor mientras ingresas texto en el input #1 de contacto usar theming

• Header

• sección: Portada

  • Slider
    • Slide
      • Texto
      • Imagen fondo
      • Call to action (link) a contacto

• Sección: ¿Quién somos?

  • Título
    • Título
    • Texto
    • Imagen

• Sección: Tarjetas

  • Título
  • Grid
    • Tarjetas
      • Foto
      • Título
      • Texto descriptivo

• Sección: Contácto

  • Título
  • Input type="texto"
  • Input type="email"
  • Select type="Asunto"
  • Textarea
  • boton enviar

-Footer - Copyright