clase7.md

Curso de JavaScript Avanzado para desarrolladores Front-end

POO con JS, ECMA6, Patrones de diseño, AJAX avanzado, HTML5 avanzado, APIs externas.

Clase 7

Repaso a HTML y CSS

• Más información:
  • ¿Que es el shadow DOM?

BOM

• Más información:
  • Objeto Window

History

• Más información:

  • History en MDN

• Propiedades:

  • History.lenght

• Métodos:

  • History.back()
  • History.forward()
  • History.go()

Navigator

• Más información:

  • Navigator en MDN

• Propiedades:

  • NavigatorID.appCodeName
  • NavigatorID.appName
  • NavigatorID.appVersion
  • Navigator.battery
  • Navigator.connection
  • NavigatorPlugins.javaEnabled
  • NavigatorLanguage.language
  • NavigatorPlugins.mimeTypes
  • NavigatorOnLine.onLine
  • Navigator.oscpu
  • Navigator.permissions
  • NavigatorID.platform
  • NavigatorPlugins.plugins
  • NavigatorID.product
  • NavigatorID.userAgent
  • Navigator.serviceWorker

window.screen

• Más información:

  • Screen en MDN

• Propiedades:

  • .availTop
  • .availLeft
  • .availHeight
  • .availWidth
  • .colorDepth
  • .height
  • .left
  • .orientation
  • .pixelDepth
  • .top
  • .width

Window.location & Document.location

• Más información:

  • location en MDN

• Propiedades:

  • .href
  • .protocol
  • .host
  • .hostname
  • .port
  • .pathname
  • .search
  • .hash
  • .username
  • .password
  • .origin

• Métodos:

  • .assign()
  • .reload()
  • .replace()
  • .toString()

Render del browser

• An Introduction to Browser Rendering
• Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015
• Kruno: How browsers work | JSUnconf 2017

DOM

• DOM - Document Object Model
• Element
• Node
• NodeList
• Tipos de nodos en el dom

DOM: Recursos

• Todos los selectores CSS3
• Introduction to the DOM
• Understanding the DOM Tree and Nodes
• How To Access Elements in the DOM

Manipulación del DOM

• How To Traverse the DOM
• How To Make Changes to the DOM
• How To Modify Attributes, Classes, and Styles in the DOM

Trabajar sin JQuery

• You Might Not Need Jquery
• You Might Not Need Jquery(en GitHub)

Frameworks: Bootstrap

Recursos

• twbs/bootstrap
• Bootstrap Expo
• Lista gigante de recursos

Core

• Migración de Bootstrap 3.3 a 4.0
• Bootstrap v4
  • Introduction
  • Layout
  • Contenido
  • Componentes
  • Utilidades
  • Extensiones
  • Documentación
  • Ejemplos
• Bootstrap v3.3
  • Getting started
  • CSS
  • Componentes
  • JavaScript
  • Customize & download

Temas

• Themes built by or reviewed by Bootstrap's creators
• Flat UI
• bootswatch
• 75+ Free Bootstrap HTML5 Website Templates
• 45 Free Bootstrap Themes For Creating A Professional Website

Componentes de UI

• Bootsnipp
• CodesUI

Frameworks: Otros...

• Foundation
• Bulma
• Ulkit
• Semantic UI
• material.io
• Material Design for Bootstrap
• Material Design Lite