PRÀCTICA
CSS // HTML 5 // JAVASCRIPT
PRÀCTICA 1
CSS // HTML 5 // JAVASCRIPT
www.kriter.net
OBJECTIUS
Adquisició dels coneixements bàsics de maquetació HTML - CSS (pixel-perfect) a partir
d’un disseny completament tancat.
Familiriarització amb tècniques de posicionament CSS,
Aprendre l’us de llenguatges que extenen el
fulls d’estils CSS. (Sass)
Aprende l’ús bàsic de la llibreria javascript
jquery per tal de manipular l’arbre DOM
d’una pàgina HTML.
Aprendre les bases del desenvolupament de
plantilles resposives a partir d’un framework
CSS responsiu. En aquest cas BOOSTRAP
4.0.
PROGRAMARI NECESSARI RECOMANAT
Compilador SASS
http://koala-app.com
Entorn de desenvolupament
https://atom.io
Material de la practica
http://www.kriter.net/recursos/material_akemi.zip
TUTORIALS PREVIS A REALITZAR
SASS
https://www.tutorialspoint.com/sass/index.htm
JQUERY
https://www.tutorialspoint.com/jquery/
BOOTSTRAP 4.0
https://www.w3schools.com/bootstrap4/default.asp
BOOTSTRAP 4.0 GRID SYSTEM
https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
TUTORIAL ADICIONALS:
CSS + HTML
https://www.codecademy.com/es/tracks/html-css-traduccion-al-espanol-america-latina-clone
PRÀCTICA 1
CSS // HTML 5 // JAVASCRIPT
www.kriter.net
ENUNCIAT
Desenvolupar el plantillatge de la pàgina
web AKEMI (Veure imatge 1) utilitzant SASS
+ HTML5. Aquest plantillatge haurà de ser
completament responsiu (Adaptable a tablet/mòbil/ordinador sobretaula / portàtil).
Un cop es tingui la plantilla realitzada s’haurà
de realitzar en jquery un sistema per tal
d’afegir a la cistella de la compra els elements que és vagin afegint des del botó
comprar de la llista de productes.
(Veure imatge 1)
Imatge 1
MATERIAL NECESSARI PER REALITZAR LA PRÀCTICA
PLANTILLES GRÀFIQUES EN JPG
http://koala-app.com
MATERIAL GRÀFIC
https://atom.io
PRÀCTICA 1
CSS // HTML 5 // JAVASCRIPT
www.kriter.net
PAS 1 - PLANTILLATGE
Passar la plantilla en format jpg a format html + CSS utilitzant Sass. Important: la plantilla ha
d’estar engridada utilitzant Bootstrap 4.0 (veure imatge 2), el que permetrà el pas a responsiu
de forma quasi bé automàtica.
PAS 1.1 - DISTRIBUCIÓ DE CAIXES ENGRIDADES
Cada element de la pàgina ocupa exactament N columnes de les 12 columnes que configuren
una plantilla de bootstrap 4.0. Per tal de simplificar començarem incorporant només caixes
buides que representin els elements de la pàgina. El logo per exemple és pot veure que ocupa
5 columnes .
PRÀCTICA 1
CSS // HTML 5 // JAVASCRIPT
www.kriter.net
PAS 1.2 - Incorporació de material gràfic i formats
Un cop tenim el disseny en caixes ja podem passar a incorporar els elements gràfics (Imatges,
logos, etc), els elements textuals i a formatar amb CSS cada un dels elements.
PAS 1.3 - Ajustaments responsius
Ajustar els elements de la pàgina per a la seva correcta visualització per a desktopi, tablet i dispositius mòbils. Utilitzar les característiques pròpies de BOOSTRAP 4.0.
PRÀCTICA 1
CSS // HTML 5 // JAVASCRIPT
www.kriter.net
PAS 2 - JAVASCRIPT // LÒGICA CISTELLA
Permetre la possibilitat de veure el detall d’un producte i afegir-lo a la cistella de la compra utilitzant la llibreria javascript JQUERY.
PAS 2.1 - DETALL D’UN PRODUCTE
Quan es premi sobre un producte hauria d’obrir una pàgina modal (Veure imatge) amb la informació detallada del mateix. Aquesta pàgina de detall a d’incloure un botó de compra i un input
text per tal d’incloure la quantitat. S’ha de validar que les dades que s’introdueixin a l’Input
sempre siguin sencers o cercar la forma per tal d’evitar que s’introduixin valors no permesos.
PAS 2.2 - Afegir a la cistella
Quan es premi comprar ha d’afegir la quantitat comprada a la cistella actualitzant les dades de
la casella negra (part superior dreta de la pàgina).
PRÀCTICA 1
CSS // HTML 5 // JAVASCRIPT
www.kriter.net
KRITER SOFTWARE
KRITER, fundada al 1989, amb seus a Barcelona i Madrid és una consultora que fabrica sistemes
de gestió (ERP) per a l’empresa.
Amb una plantilla formada per enginyers, economistes, programadors i persona tècnic, KRITER
proporciona soluciones tecnològiques integrals per a la gestió, la comunicació empresarial i per
millorar l’eficiència i la productivitat de les empreses.
La nostra experiència en tecnologia i gestió de més de 25 anys, ha permès a KRITER acumular
un know how tecnològic i funcional, d’alt valor afegit, en un amplíssim ventall de sectors empresarials.
E-COMMERCE
MOVILIDAD
GCK
REPCAMP
SAT
CRM
ERP
RETAIL
CLOUD
SCM
PORTAL B2B
FACTURA-E
FINANZAS
BI
El nostre ecosistema d’aplicacions evoluciona constantment proveint de les millors solucions
tecnològiques que cobreixin les necessitats de les diferents àrees d’una empresa. Les tecnologies emprades per KRITER van des de JAVA, aplicatius nadius per a Android i Ios, PHP, NodeJs,
JavaScript, Angular, Mongo Db.
PER A MÉS INFORMACIÓ
http://www.kriter.net
http://ww.repcamp.com