Fundamentos

Repositorio de la clase Web Technologies ADM

Clase 1

• POO 1

  • Fundamentos
    • OOP / POO
    • OOP / POO
    • ECMASrypt 6
    • JS
• GIT
  • ¿Qué es Git?
  • Instalación
    • Linux / MacOS Git
    • Windows Git for windows
    • Comandos básicos
      • configure
      • status
      • add
      • commit
      • pull
      • push

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

• Estructuras de control

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

Creación de un 'landing page' p1

• Crear Wireframe Lofi
• Crar una maqueta HTML CSS JS
  • Maquetación
    • Organización proyecto
    • HTML
      • Index
      • Header responsivo
      • Modulo(section) Hero Screen
    • CSS
      • Variables
      • Estilos generales
      • Preparación dependencias
        • Bootstrap
          • Grid
          • Navbar
          • Centrado vertical

Clase 3

Creación de un 'landing page' p2

• Continúa Maquetación
  • HTML
    • Grid
    • slider
    • footer
  • CSS personalizado + estilos con bootstrap
    • Resets
  • JS (preparación dependencias)
    • jQuery
    • Slick Slider
    • imgLiquid

Clase 4

Creación de un 'landing page' p3

• Modularización con PHP
  • Instalar Stack: [https://www.apachefriends.org](Apache, MYSQL y PHP)
  • MacOS - localhost
    • XAMPP Console / Network / Habilitar localhost:8080
    • XAMPP Console / volumes / Mount -> explore
  • Cambio de extención en archivos .html -> .php
• Nuevas dependencias

  • FontAwesome CDN ->https://www.bootstrapcdn.com/fontawesome/ CSS '@import'

    < <=

    = = != == ===

    xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)

    https://api.jquery.com