1 S W E N 1005 – M o b ile W e b P r o g r a mmi n g ( 20 22 / 23 ) T h e Un i versity o f the West I n d i es Ca v e Hill Ca m p u s Facul t y o f S c ience a n d Te c hn o l ogy Departm e nt of Computer Sci e n c e, M a the m atics a n d P h ysics S W E N 1 0 05 : M ob il e W e b Pro g r a m ming L a bora t o r y E x erc i se Two M y Consu lt a t i on W e bs i t e I N S TR U C T I O N S 1. T h is week we w i l l u se HTML a n d C SS to c r e ate a m obile respo n si v e w e b site a d vertisi n g oursel v e s as “ m obile respo n si v e website ex p ert s ”. Ou r t arget m ark e t is sm a ll b u sinesses o f f e ring p r o duc ts or serv i c es to th eir l o c al c om mun ity, f o r e xam p le la w yers, f a rm e rs ( arable or p astoral ) , tailo r , e tc 2. We are o f fe r ing t h e c onvers i on of t h eir ex i sting website to a sl e ek m obile respo n si v e websit e , whi c h w i ll t a ke full a d va n tage of n ew HTML5 tags a n d C SS t echn iq u es. 3. T h is lab w i ll i nc o r p o r ate t h e p r evious la b s we c om p le t e d Y ou are re qu ired to c reate a f our p age website to i nc lu d e : a. “My R es um e” b. “My I sland H o m e” c. “My Mobile Ap p s ” d. “ M y Home p ag e ” 4. S in c e we h ave alrea d y c reat e d t h e c ont en t f o r th e oth e r p ag e s t h e only m ajor tas k s f or t h is lab w i ll b e to: a. C reate a H o m e p ag e b. P r o vide full n avigat io n t h r o u ghout the site c. Use “Gr i d Vi e w ” a n d “ @ m e d i a ” to en sure t h at all p ag e s are n ot only m obile respo n si v e ( as op p o s ed to a d a p tive) bu t are p rese n t e d d i f fere n tly b ased on d evi c e or b r o w s e r w i d t h d. C reate an ext e rnal stylesh e et to c ontrol a n d styles on all yo u r p ag e s a n d p r o vide a level of c ons i ste nc y a c r o ss your s it e 3 S W E N 1005 – M o b ile W e b P r o g r a mmi n g ( 20 22 / 23 ) We h ave alr e a d y c r e a t e d “ M y Re s u me h tm l” W h i c h me an s t h e c ont e n t is th e r e. T h e aim n ow is p r e p are i t f or i n c l u sion t o y o u r w e b si t e. Rem e m b er t h e g u i d el i n es f r o m “Sessi o n F ou r ” a n d e n s u re th a t you al l ow t h em t o g u i d e y o u as y o u p r e p a re t h is p age. Y o u c a n f e el f r e e t o m o d i f y t h e d es i gn of t h e p age t o d i f f er f r o m th e sam p le given b u t k e e p i n mi n d t h at y o u are a d v e rt isi n g y o u rself as a m o b ile r e s p o n sive w e b s i t e ex p e rt Y o u r r e s u me, al t h o u g h n ot f i c t i t i o us , s h o u l d give t h e v i ewer c o n f i d e n c e t h a t y o u c an get t h e j o b d o n e. Part T wo - “ M y Is la n d h o m e ” “ My I s l a nd Home. h tm l ” p r o vi d es i n f o r m a t ion t o yo u r vie w er a b o u t yo u r c o u n t ry o r isl a n d b u t th is p a ge is r e ally a c h a n c e f or yo u r vie w er t o g e t a s e n se of h ow you w ill h a nd le a gra p h ic i nt e n sive p ag e Y o u are r equ i r ed t o u se C SS Fl e xb o x , n ot f or yo u r p age layo u t t h is t i m e si n c e y o u a re u si n g Gr i d V iew bu t c e r t ai n ly f or t h e c o n t e n t Y ou d o n o t n e e d t o m o d i f y yo u r c ont e n t b u t b e s u re t o f oll o w t h e g u i d el i n es d is c u ssed i n “ S essi o n F ou r ”. Part T h r e e - “ M y Mo bile A p p s ” “ MyM o bil e Ap p s h tm l ” i s a w e b p age t o i nt r oduce yo u r vie w er t o y o u r m o b ile a p p lica t i o n d evel op me n t s k ills. On t h is w e b p age y o u w il l : D escri b e t h e d i f f e r e n t c a t eg o ries of m o b ile a pp li c a t io n s availa b l e , b rie f ly o ut l i n i n g t h e a d v a nt a g es of e a c h P r o vi d e a b ri e f d e s c ri pt io n o f t h e m ob i l e a pp s y o u c r e a t e d as w ell as a li n k f or th e vie w er t o d ownl o ad th e .a p k f i l e ( yo u r li n k c a n d i r ect t h e vie w er t h e f i le in yo u r d r o p b o x f o r e x am p l e ) On t h is w e b p age y o u w ill also li s t t h e services you c an p r o vi d e a n d a c os t o C o n vert an existi n g 3 p a g e w e b si t e t o a m ob i l e re s p o n sive si t e - $ 9 9 USD o C o n vert an existi n g 5 p a g e w e b si t e t o a m ob i l e re s p o n sive si t e - $1 4 9 USD o C r e a t e a m o b ile a pp lic a t i o n : ▪ N a t iv e : $ 9 99 - $1 9 99 U S D b ased on th e p l a t f o r m ▪ We b - b ase d : $49 9 - $ 9 9 9 USD ▪ H yb r i d : $ 9 99 - $ 1 9 99 U S D b ased on th e p l a t f o r m Remem b er yo u r p age u s es Grid View a n d b e s u re t o f ol l ow the g u i d el i n es d is c u ssed i n “ Session F o ur ”. Part Fo u r - “ M y H o m ep a ge” “ My Hom e p a g e h tm l ” is th e i n d ex p a g e , i t is th e f i rst p a g e yo u r vie w er s e e s w h en t h ey vi s it y o u r s i t e , as s u c h th is p age m u st b e a e s th e t i c ally p le a s i n g a n d at t h e same t ime f ol l ow all t h e g u i d elines o ut l i n ed in “ Session F our ”. Feel f r e e t o get i d e as f ro m eith e r of t h e se t w o w e b si t es: ht t p s: / / www .t h em u se. c o m/ a d vi c e / 3 5 - m o r e - o f - t he - b es t - p e r s o n a l - w e b si t e s - w ev e - eve r - se e n ht t p s: / /b l og. h u b s p o t c o m/ ma r k e t i n g/ b es t - p e r s o n a l - w e b s i t es # sm.0 0 0 1 h 5 o rq b 1 7 8 e e b fu r i q q 3k q c 2 9c Requirements Y o u a re r e q u ired t o u s e t h e f oll o w i n g t ags a n d t ec hn i q u es ( bu t d o n ot b e l i mi t ed b y t h em f e e l f r e e t o u se w h a t ever other t ags o r t ec hn i q u es y o u n e e d t o u s e ): < meta n a m e = " vie w por t " c ontent = " width=d e vi c e - width, i ni t ial - s ca le = 1. 0 " > U s e an ex t e r n al s t y l e s h e et Foll o w all th e g u i d elines of “ S essi o n F ou r ” f or e ach p a g e U s e sem a n t ic el e m e n t s Avoid th e u se of t a b les U s e a 12 c ol u m n gr i d vi e w f or e ach p age as d is cu ssed i n c lass. U s e t h e M e d ia Qu e ry t o p r e se n t y o u r p ag e s d i f f e r e nt ly on o a m ob i l e ph o n e – 5 1 i n c h o t a b l e t – 7 1 i n c h o t a b l e t – 10 1 i n c h 3 S W E N 1005 – M o b ile W e b P r o g r a mmi n g ( 20 22 / 23 ) o la pt o p / d es k t o p – 1 9 i n c h a n d ov e r H e r e a r e s o m e s a m p l e s c r e e nsho t s of a created pa g e: