IFCD0210_MF0491_Programació web a l’entorn client
Objectius generals
Aquesta acció es correspon amb el mòdul formatiu IFCD0210_MF0491_Programació web a l'entorn client del certificat de professionalitat IFCD0210 Desenvolupament d'aplicacions amb tecnologies web.
Pretenem que en acabar l’alumne sigui capaç de desenvolupar les realitzacions professionals associades a la UC0491_3 Desenvolupar elements de programari en l'entorn client.
Pretenem que en acabar l’alumne sigui capaç de desenvolupar les realitzacions professionals associades a la UC0491_3 Desenvolupar elements de programari en l'entorn client.
Objectius específics
Elaborar documents utilitzant llenguatges de marques i estàndards de desenvolupament de programari.
Crear components de programari mitjançant eines i llenguatges script fent servir tècniques de desenvolupament estructurat.
Crear i manipular components multimèdia usant llenguatges script i eines específiques.
Seleccionar components de programari ja desenvolupats segons la seva funcionalitat per integrar-los en documents.
Aplicar tècniques d'usabilitat i accessibilitat en el desenvolupament d'interfícies d'usuari.
Crear components de programari mitjançant eines i llenguatges script fent servir tècniques de desenvolupament estructurat.
Crear i manipular components multimèdia usant llenguatges script i eines específiques.
Seleccionar components de programari ja desenvolupats segons la seva funcionalitat per integrar-los en documents.
Aplicar tècniques d'usabilitat i accessibilitat en el desenvolupament d'interfícies d'usuari.
Contingut
UF1841: Elaboració de documents web mitjançant llenguatges de marques.
1. Disseny web.
– Principis de disseny web.
• Disseny orientat a l'usuari.
• Disseny orientat als objectius.
• Disseny orientat a la implementació.
– El procés de disseny web.
• Estructura d'un lloc web i navegabilitat.
• Estructura i composició de pàgines.
• Compatibilitat amb navegadors.
• Diferències entre disseny orientat a presentació i impressió.
2. Llenguatges de marques generals.
– Origen dels llenguatges de marques generals: SGML i XML.
– Característiques generals dels llenguatges de marques.
– Estructura general d'un document amb llenguatge de marques.
• Metadades i instruccions de procés.
• Codificació de caràcters. Caràcters especials (escapament).
• Etiquetes o marques.
• Elements.
• Atributs.
• Comentaris.
– Documents vàlids i ben formats. Esquemes.
3. Llenguatges de marques per a la presentació de pàgines web.
– Història d'HTML i XHTML. Diferències entre versions.
– Estructura d'un document.
• Versions.
• Elements de la capçalera.
• Elements del cos del document.
– Color.
• Codificació de colors.
• Colors tipus.
• Colors segurs.
– Text.
• Encapçalaments. Jerarquia i estructura del contingut d'un document.
• Paràgrafs.
• Alineació, espaiat i sagnat de text.
• Característiques de lletra: tipus, mides i colors.
• Separadors de text.
• Etiquetes específiques per al marcatge de text. Estils lògics.
– Enllaços d'hipertext.
• Estructura d'un enllaç: l'adreça d'Internet o URL.
• Estils d'enllaços.
• Diferències entre enllaços absoluts i relatius.
• Enllaços interns.
• Enllaços especials: correu electrònic. Enllaços de descàrrega.
• Atributs específics: títol, destinació, dreceres de teclat, etc.
– Imatges.
• Formats d'imatges.
• Característiques d'imatges: mida, títol, textos alternatius.
• Enllaços en imatges.
• Imatges de fons.
– Llistes.
• Característiques.
• Ordenació de llistes.
• Imbricació en llistes.
• Altres tipus de llistes: llistes de definició.
– Taules.
• Estructura bàsica.
• Format de taules: vores, alineació, mida, etc.
• Format de contingut de cel·les.
• Agrupament de files i columnes.
• Taules imbricades.
• Bones pràctiques en l'ús de taules.
– Marcs (frames).
• Creació de marcs.
• Avantatges i inconvenients de l'ús de marcs.
• Suport de navegadors.
• Formatació de marcs.
• Enllaços entre continguts de marcs.
• Marcs imbricats.
• Marcs incrustats (iFrames).
– Formularis.
• Descripció general i ús dels formularis.
• Elements d'un formulari: text, botons, etc.
• Processament de formularis.
• Formatació de formularis: dreceres de teclat, ordre d'edició, grups, etiquetes, etc.
– Elements específics per a tecnologies mòbils.
• Selecció del llenguatge de marques per a tecnologies mòbils.
• Fulls d'estil en dispositius mòbils.
– Elements en desús (deprecated).
• Text parpellejant.
• Franges lliscants.
• Alineacions.
– Altres elements en desús.
4. Fulls d'estil web.
– Tipus de fulls d'estil: estàtics i dinàmics.
– Elements i estructura d'un full d'estil.
• Creació de fulls d'estil.
• Aplicació d'estils.
• Herència d'estils i aplicació en cascada.
• Formatació de pàgines mitjançant estils.
• Estructura de pàgines mitjançant estils.
– Disseny d'estils per a diferents dispositius.
– Bones pràctiques en l'ús de fulls d'estil.
UF1842: Desenvolupament i reutilització de components de programari i multimèdia mitjançant llenguatges de guió.
1. Arquitectures d'aplicacions web.
– Esquema general.
– Arquitectura en capes.
– Interacció entre les capes client i servidor.
– Arquitectura de la capa client.
2. Navegadors web.
– Arquitectura d'un navegador.
• Interfície d'usuari.
• Motor d'exploració.
• Motor de presentació.
• Mòduls auxiliars: persistència, interfície de xarxa, intèrpret de scripts, infraestructura de presentació.
– Navegadors d'ús comú. Comparativa.
– Seguretat en navegadors.
– Integració d'aplicacions en navegadors. Adaptadors (plugins).
• Adaptadors comuns en diferents navegadors.
• Configuració de tipus de fitxers i adaptadors.
– Conformitat amb estàndards.
3. Creació de contingut web dinàmic.
– Fonaments de programació.
• Constants, variables. Tipus de dades simples i estructurades.
• Expressions i sentències. Operadors bàsics.
• Control de flux: seqüencial, bucles i condicionals.
• Subprogrames: procediments i funcions. Llibreries.
• Tipus de paràmetres.
• Trucades a funcions. Recursivitat.
• Nocions d'orientació a objectes: classes i objectes. Herència.
• Principals metodologies de programació.
– Llenguatges per al desenvolupament de contingut dinàmic.
• Llenguatges script. Característiques generals.
• Comparativa de llenguatges script. Criteris per a la selecció d'un llenguatge script.
• Màquines virtuals en navegadors. Miniaplicacions (applets).
• Altres llenguatges per al desenvolupament d'aplicacions web enriquides (RIA).
4. Llenguatges script d'ús general.
– Integració de llenguatges script en navegadors web.
• Comparativa i compatibilitat amb navegadors.
• Diferències entre versions.
– Estructura general d'un programa en un llenguatge script.
• Variables i tipus de dades.
• Operadors.
• Objectes.
• Sentències. Imbricació.
• Estructures de control i condicionals.
• Bucles.
• Comentaris.
– Funcions.
– Paràmetres.
– Variables locals i globals.
– Biblioteques de funcions.
– Manipulació de text.
– Funcions bàsiques per a la manipulació de text.
– Introducció i validació de text.
– Llistes (arrays).
– Creació de llistes bàsiques.
– Llistes multidimensionals.
– Tractament de llistes mitjançant bucles.
– Formats estàndard d'emmagatzematge de dades en llenguatges script.
– Comparativa.
– Tractament de formats estàndard.
– Diccionaris de dades.
– Objectes.
– Creació d'objectes: mètodes i estructures de dades.
– Biblioteques d'objectes.
– El model de document web.
– Estructura de document.
– Navegació per les propietats d'un document.
– Canvi de propietats mitjançant llenguatges script.
– Gestió d'esdeveniments.
– Tipus d'esdeveniments.
– Tècniques per al control d'esdeveniments mitjançant llenguatges script.
– Controladors d'esdeveniments.
– Esdeveniments de càrrega inicial.
– Delegació i propagació d'esdeveniments.
– Gestió d'errors.
– Tractament de l'error "No hi ha cap llenguatge script habilitat" (no script).
– Revisió d'errors en funcions.
– Captura d'errors.
– Ús de punts de ruptura.
– Usos específics de llenguatges script.
– Integració multimèdia mitjançant llenguatges script.
– Animacions.
– Efectes especials en elements gràfics i text.
– Quadrícules de dades.
– Gestió dels canals de subscripció (RSS).
– Descripció de les tècniques d'accés asíncron (AJAX).
– Ús de llenguatges script en dispositius mòbils.
– Entorns integrats (frameworks) per al desenvolupament amb llenguatges script.
– Característiques dels entorns d'ús comú. Comparativa.
– Editors avançats.
– Funcionalitats de validació i depuració de codi.
– Tècniques per a la documentació del codi.
– Utilitats addicionals per a la creació de continguts dinàmics. Extensions útils de navegadors.
– Entorns de desenvolupament específics: desenvolupament sobre dispositius mòbils.
5. Continguts multimèdia.
– Definició de multimèdia. Tipus de recursos multimèdia.
– Inclusió de contingut multimèdia en pàgines web.
• Adaptadors per a recursos multimèdia.
• Enllaç a diferents recursos des de pàgines web.
• Incrustació de contingut multimèdia.
• Formats de fitxer web. L'estàndard MIME.
• Tipus de reproducció. Streaming i càrrega progressiva.
• Comparativa del tractament de contingut multimèdia en diferents versions de llenguatges de marques de pàgines.
– Gràfics multimèdia.
• Formats gràfics. Comparativa.
• Repositoris d'imatges.
• Tipus de gràfics: fotografies, imatges vectoritzades i icones.
• Eines per al tractament gràfic. Filtres i tractament d'imatges.
• Conversió de formats gràfics.
– Àudio.
• Formats d'àudio. Comparativa.
• Reproductors d'àudio. Inserció en navegadors web.
• Enllaç o inserció de canals d'àudio.
• Conversió de formats d'àudio.
• Eines per al tractament de so. Edició de fragments d'àudio.
– Vídeo.
• Formats de vídeo. Qualitat de vídeo i comparativa.
• Repositoris de vídeo.
• Reproductors de vídeo. Inserció en navegadors web.
• Enllaç o inserció de canals de vídeo.
• Conversió de formats de vídeo. Optimització.
• Eines d'edició de vídeo. Creació d'efectes i composició.
– Animacions multimèdia.
• Principis de l'animació.
• Eines per a la creació d'animacions.
• Formats d'animacions.
• Inclusió en pàgines web.
• Bones pràctiques en l'ús d'animacions.
– Elements interactius.
• Creació d'elements interactius.
• Mapes interactius.
• Àmbits d'ús.
UF1843: Aplicació de tècniques d'usabilitat i accessibilitat en l'entorn client.
1. Accessibilitat web.
– Definició d'accessibilitat web.
– Avantatges i dificultats de la implantació de l'accessibilitat web.
– Normativa i estàndards sobre accessibilitat web.
• Organismes reguladors de l'accessibilitat web.
• Comparativa de normes i estàndards.
– Guies per al compliment de normatives i estàndards.
• Descripció de les pautes principals (imatges, enllaços, vídeo, etc.)
• Pautes per a una navegació accessible.
– Descripció del procés de la conformitat en accessibilitat web.
– Tecnologies en què l'accessibilitat és aplicable.
• (X)HTML.
• CSS.
• JavaScript.
• Flash.
• PDF.
• XML/XSL.
• Reproducció multimèdia.
• Altres tecnologies.
– Eines per a la validació de l'accessibilitat.
• Basades en navegador.
• Mitjançant aplicacions d'escriptori.
• Mitjançant serveis web externs.
– Evolució de l'accessibilitat. Noves tendències.
2. Usabilitat web.
– Definició d'usabilitat.
– Importància del disseny web centrat en l'usuari.
– Diferències entre accessibilitat i usabilitat.
– Avantatges i problemes de la combinació d'accessibilitat i usabilitat.
– Avantatges i dificultats en la implantació de llocs web usables.
– Mètodes d'usabilitat.
– Anàlisi dels requeriments d'usuari.
– Principis del disseny conceptual. Creació de prototips orientats a l'usuari.
– Pautes per a la creació de llocs web usables.
– Avaluació de l'usabilitat.
1. Disseny web.
– Principis de disseny web.
• Disseny orientat a l'usuari.
• Disseny orientat als objectius.
• Disseny orientat a la implementació.
– El procés de disseny web.
• Estructura d'un lloc web i navegabilitat.
• Estructura i composició de pàgines.
• Compatibilitat amb navegadors.
• Diferències entre disseny orientat a presentació i impressió.
2. Llenguatges de marques generals.
– Origen dels llenguatges de marques generals: SGML i XML.
– Característiques generals dels llenguatges de marques.
– Estructura general d'un document amb llenguatge de marques.
• Metadades i instruccions de procés.
• Codificació de caràcters. Caràcters especials (escapament).
• Etiquetes o marques.
• Elements.
• Atributs.
• Comentaris.
– Documents vàlids i ben formats. Esquemes.
3. Llenguatges de marques per a la presentació de pàgines web.
– Història d'HTML i XHTML. Diferències entre versions.
– Estructura d'un document.
• Versions.
• Elements de la capçalera.
• Elements del cos del document.
– Color.
• Codificació de colors.
• Colors tipus.
• Colors segurs.
– Text.
• Encapçalaments. Jerarquia i estructura del contingut d'un document.
• Paràgrafs.
• Alineació, espaiat i sagnat de text.
• Característiques de lletra: tipus, mides i colors.
• Separadors de text.
• Etiquetes específiques per al marcatge de text. Estils lògics.
– Enllaços d'hipertext.
• Estructura d'un enllaç: l'adreça d'Internet o URL.
• Estils d'enllaços.
• Diferències entre enllaços absoluts i relatius.
• Enllaços interns.
• Enllaços especials: correu electrònic. Enllaços de descàrrega.
• Atributs específics: títol, destinació, dreceres de teclat, etc.
– Imatges.
• Formats d'imatges.
• Característiques d'imatges: mida, títol, textos alternatius.
• Enllaços en imatges.
• Imatges de fons.
– Llistes.
• Característiques.
• Ordenació de llistes.
• Imbricació en llistes.
• Altres tipus de llistes: llistes de definició.
– Taules.
• Estructura bàsica.
• Format de taules: vores, alineació, mida, etc.
• Format de contingut de cel·les.
• Agrupament de files i columnes.
• Taules imbricades.
• Bones pràctiques en l'ús de taules.
– Marcs (frames).
• Creació de marcs.
• Avantatges i inconvenients de l'ús de marcs.
• Suport de navegadors.
• Formatació de marcs.
• Enllaços entre continguts de marcs.
• Marcs imbricats.
• Marcs incrustats (iFrames).
– Formularis.
• Descripció general i ús dels formularis.
• Elements d'un formulari: text, botons, etc.
• Processament de formularis.
• Formatació de formularis: dreceres de teclat, ordre d'edició, grups, etiquetes, etc.
– Elements específics per a tecnologies mòbils.
• Selecció del llenguatge de marques per a tecnologies mòbils.
• Fulls d'estil en dispositius mòbils.
– Elements en desús (deprecated).
• Text parpellejant.
• Franges lliscants.
• Alineacions.
– Altres elements en desús.
4. Fulls d'estil web.
– Tipus de fulls d'estil: estàtics i dinàmics.
– Elements i estructura d'un full d'estil.
• Creació de fulls d'estil.
• Aplicació d'estils.
• Herència d'estils i aplicació en cascada.
• Formatació de pàgines mitjançant estils.
• Estructura de pàgines mitjançant estils.
– Disseny d'estils per a diferents dispositius.
– Bones pràctiques en l'ús de fulls d'estil.
UF1842: Desenvolupament i reutilització de components de programari i multimèdia mitjançant llenguatges de guió.
1. Arquitectures d'aplicacions web.
– Esquema general.
– Arquitectura en capes.
– Interacció entre les capes client i servidor.
– Arquitectura de la capa client.
2. Navegadors web.
– Arquitectura d'un navegador.
• Interfície d'usuari.
• Motor d'exploració.
• Motor de presentació.
• Mòduls auxiliars: persistència, interfície de xarxa, intèrpret de scripts, infraestructura de presentació.
– Navegadors d'ús comú. Comparativa.
– Seguretat en navegadors.
– Integració d'aplicacions en navegadors. Adaptadors (plugins).
• Adaptadors comuns en diferents navegadors.
• Configuració de tipus de fitxers i adaptadors.
– Conformitat amb estàndards.
3. Creació de contingut web dinàmic.
– Fonaments de programació.
• Constants, variables. Tipus de dades simples i estructurades.
• Expressions i sentències. Operadors bàsics.
• Control de flux: seqüencial, bucles i condicionals.
• Subprogrames: procediments i funcions. Llibreries.
• Tipus de paràmetres.
• Trucades a funcions. Recursivitat.
• Nocions d'orientació a objectes: classes i objectes. Herència.
• Principals metodologies de programació.
– Llenguatges per al desenvolupament de contingut dinàmic.
• Llenguatges script. Característiques generals.
• Comparativa de llenguatges script. Criteris per a la selecció d'un llenguatge script.
• Màquines virtuals en navegadors. Miniaplicacions (applets).
• Altres llenguatges per al desenvolupament d'aplicacions web enriquides (RIA).
4. Llenguatges script d'ús general.
– Integració de llenguatges script en navegadors web.
• Comparativa i compatibilitat amb navegadors.
• Diferències entre versions.
– Estructura general d'un programa en un llenguatge script.
• Variables i tipus de dades.
• Operadors.
• Objectes.
• Sentències. Imbricació.
• Estructures de control i condicionals.
• Bucles.
• Comentaris.
– Funcions.
– Paràmetres.
– Variables locals i globals.
– Biblioteques de funcions.
– Manipulació de text.
– Funcions bàsiques per a la manipulació de text.
– Introducció i validació de text.
– Llistes (arrays).
– Creació de llistes bàsiques.
– Llistes multidimensionals.
– Tractament de llistes mitjançant bucles.
– Formats estàndard d'emmagatzematge de dades en llenguatges script.
– Comparativa.
– Tractament de formats estàndard.
– Diccionaris de dades.
– Objectes.
– Creació d'objectes: mètodes i estructures de dades.
– Biblioteques d'objectes.
– El model de document web.
– Estructura de document.
– Navegació per les propietats d'un document.
– Canvi de propietats mitjançant llenguatges script.
– Gestió d'esdeveniments.
– Tipus d'esdeveniments.
– Tècniques per al control d'esdeveniments mitjançant llenguatges script.
– Controladors d'esdeveniments.
– Esdeveniments de càrrega inicial.
– Delegació i propagació d'esdeveniments.
– Gestió d'errors.
– Tractament de l'error "No hi ha cap llenguatge script habilitat" (no script).
– Revisió d'errors en funcions.
– Captura d'errors.
– Ús de punts de ruptura.
– Usos específics de llenguatges script.
– Integració multimèdia mitjançant llenguatges script.
– Animacions.
– Efectes especials en elements gràfics i text.
– Quadrícules de dades.
– Gestió dels canals de subscripció (RSS).
– Descripció de les tècniques d'accés asíncron (AJAX).
– Ús de llenguatges script en dispositius mòbils.
– Entorns integrats (frameworks) per al desenvolupament amb llenguatges script.
– Característiques dels entorns d'ús comú. Comparativa.
– Editors avançats.
– Funcionalitats de validació i depuració de codi.
– Tècniques per a la documentació del codi.
– Utilitats addicionals per a la creació de continguts dinàmics. Extensions útils de navegadors.
– Entorns de desenvolupament específics: desenvolupament sobre dispositius mòbils.
5. Continguts multimèdia.
– Definició de multimèdia. Tipus de recursos multimèdia.
– Inclusió de contingut multimèdia en pàgines web.
• Adaptadors per a recursos multimèdia.
• Enllaç a diferents recursos des de pàgines web.
• Incrustació de contingut multimèdia.
• Formats de fitxer web. L'estàndard MIME.
• Tipus de reproducció. Streaming i càrrega progressiva.
• Comparativa del tractament de contingut multimèdia en diferents versions de llenguatges de marques de pàgines.
– Gràfics multimèdia.
• Formats gràfics. Comparativa.
• Repositoris d'imatges.
• Tipus de gràfics: fotografies, imatges vectoritzades i icones.
• Eines per al tractament gràfic. Filtres i tractament d'imatges.
• Conversió de formats gràfics.
– Àudio.
• Formats d'àudio. Comparativa.
• Reproductors d'àudio. Inserció en navegadors web.
• Enllaç o inserció de canals d'àudio.
• Conversió de formats d'àudio.
• Eines per al tractament de so. Edició de fragments d'àudio.
– Vídeo.
• Formats de vídeo. Qualitat de vídeo i comparativa.
• Repositoris de vídeo.
• Reproductors de vídeo. Inserció en navegadors web.
• Enllaç o inserció de canals de vídeo.
• Conversió de formats de vídeo. Optimització.
• Eines d'edició de vídeo. Creació d'efectes i composició.
– Animacions multimèdia.
• Principis de l'animació.
• Eines per a la creació d'animacions.
• Formats d'animacions.
• Inclusió en pàgines web.
• Bones pràctiques en l'ús d'animacions.
– Elements interactius.
• Creació d'elements interactius.
• Mapes interactius.
• Àmbits d'ús.
UF1843: Aplicació de tècniques d'usabilitat i accessibilitat en l'entorn client.
1. Accessibilitat web.
– Definició d'accessibilitat web.
– Avantatges i dificultats de la implantació de l'accessibilitat web.
– Normativa i estàndards sobre accessibilitat web.
• Organismes reguladors de l'accessibilitat web.
• Comparativa de normes i estàndards.
– Guies per al compliment de normatives i estàndards.
• Descripció de les pautes principals (imatges, enllaços, vídeo, etc.)
• Pautes per a una navegació accessible.
– Descripció del procés de la conformitat en accessibilitat web.
– Tecnologies en què l'accessibilitat és aplicable.
• (X)HTML.
• CSS.
• JavaScript.
• Flash.
• PDF.
• XML/XSL.
• Reproducció multimèdia.
• Altres tecnologies.
– Eines per a la validació de l'accessibilitat.
• Basades en navegador.
• Mitjançant aplicacions d'escriptori.
• Mitjançant serveis web externs.
– Evolució de l'accessibilitat. Noves tendències.
2. Usabilitat web.
– Definició d'usabilitat.
– Importància del disseny web centrat en l'usuari.
– Diferències entre accessibilitat i usabilitat.
– Avantatges i problemes de la combinació d'accessibilitat i usabilitat.
– Avantatges i dificultats en la implantació de llocs web usables.
– Mètodes d'usabilitat.
– Anàlisi dels requeriments d'usuari.
– Principis del disseny conceptual. Creació de prototips orientats a l'usuari.
– Pautes per a la creació de llocs web usables.
– Avaluació de l'usabilitat.
Valoració
Estudiants formats
14
