Desenvolupament Responsive amb HTML5, CSS3 i JavaScript

Format: Classroom, Online, Onsite | Durada: 5 dies

Descripció general

Descripció general

Amb les modernes propostes dels estàndards d’internet i la multiplicació de l’ús de mòbils, han aparegut tal varietat de dispositius, que resulta pràcticament impossible conèixer a priori l’aspecte o la mida que un lloc o aplicació web tindrà a la pantalla de destinació.

La solució va venir proposada per l’estàndard HTML5 (i les seves tècniques associades) que van assumir des del principi aquesta necessitat, sent una de les primeres característiques en implementar-se, ja en 2010. No obstant això, això suposa el coneixement bàsic de les noves tècniques que proposen els estàndards HTML5, CSS3 i JavaScript maig.

A més, per facilitar la tasca als desenvolupadors, han aparegut diverses llibreries que simplifiquen la tasca adoptant des de l’inici un plantejament “mobile first”: jQuery Mobile, Bootstrap són exemples populars d’aquestes solucions. S’imposa, per tant, conèixer les tecnologies de base, així com els principis bàsics d’aquells “frameworks” de treball que faciliten la tasca, en forma de llibreries i components ben construïts, que disposin del suficient suport empresarial i la necessària
cobertura com per garantir la seva continuïtat i manteniment en el temps.

D’aquí que l’objectiu del curs sigui aportar als alumnes aquests fonaments, les seves regles, principis,
documentació i exemples suficients, com perquè puguin incorporar aquesta tecnologia en els seus
desenvolupaments.

Objetivos del curso

Objetivos del curso

Al finalitzar el curs els alumnes podran:

  • Revisar i comprendre l’abast de la nova oferta promoguda pels estàndards vinculats a HTML5 (+ CSS3 i JavaScript)
  • Comprendre els canvis estructurals en les pàgines i el seu significat semàntic
  • Fer servir les API associades amb les noves etiquetes
  • Comprendre i manejar el significat de CSS 3 en pàgines estàndard així com en el desenvolupament per mòbils
  • Identificar i manejar les noves propostes d’API ‘s associades a JavaScript maig
  • Entendre els conceptes bàsics en què es fonamenta el disseny “responsive”
  • Conèixer les eines de desenvolupament idònies per a aquest tipus de projectes i gestionar els seus recursos des de l’inici
  • Modificar els llocs existents perquè s’adaptin a les necessitats actuals
  • Definir arquitectures de desenvolupament que siguin actuals, potents i extensibles, alhora que de fàcil manteniment
  • Comprendre com aplicar els coneixements previs de versions anteriors dels estàndards web, al nou marc de treball
  • Aprendre integrar els “frameworks” de tipus responsive en aplicacions noves i existents

Dirigit a

Dirigit a

Directors d’informàtica, Directors de departaments tecnològics, Responsables de desenvolupament de software o projectes tecnològics, Caps de projecte, Analistes amb responsabilitat sobre projectes i, en general, qualsevol persona que, per les seves necessitats professionals, hagi de conèixer el funcionament d’aquesta eina.

Prerequisits

Prerequisits

Els alumnes han de tenir alguna experiència en projectes de desenvolupament de software, i coneixements bàsics dels llenguatges d’Internet: HTML, CSS i JavaScript.

Contingut del curs

Contingut del curs

Etiquetes estructurals en HTML5

  • Estructura de documents Web
  • Aspectes semàntics
  • Elements amb API’s vinculades

Fonaments de CSS3

  • Nous selectors
  • Ús de Capes
  • Media Queries
  • Mecanismes dinàmics: Transformacions, Transicions i animacions
  • Optimització de recursos en CSS3

API’s de JavaScript

  • Geolocalització
  • LocalStorage i SessionStorage
  • Ús d’arxius
  • Drag & Drop
  • Web Sockets
  • Web Workers

Eines de desenvolupamnet responsive”

  • Visual Studio 2013/2015
    • Suport de HTML
    • Suport de CSS
    • Suport específic de tècniques “responsive”
    • Suport i depuració de codi JavaScript
  • Eines dels navegadors
  • Web Essentials
  • Sublime Text
  • Aptana Studio

Disseny Responsive

  • Conceptes bàsics
  • Elements que influeixen en el disseny “responsive”
  • HTML5 Semàntic
  • Els nous mecanismes d’entrada

Validacions de contingut

  • CSS3: Canvis importants
  • Creació de “layouts responsive”
  • Ubicació d’elements
  • Media Queries i el seu paper en el disseny responsive
  • Tipografia i Glifos
  • Fallbacks

Els marcs de desenvolupament responsive”

  • Situació actual dels marcs “responsive”
  • Fonaments de jQuery Mobile
    • Treball bàsic amb jQuery Mobile
    • Adaptació de la interfície d’usuari
    • Exemples
  • Fonaments de BootStrap
    • Disseny amb BootStrap
    • Tècniques fonamentals
    • Adaptació al dispositiu
    • Ús de la nova interfície d’usuari

Interessant?

Vols més informació sobre aquest curs? Contacta amb nosaltres i t’assessorarem