Se hjemmesiden på:

Transkript

1 Se hjemmesiden på:

2 Dokumentation Opgavebeskrivelse Det lokale erhvervsnetværk, Share & Connect skulle have designet og programmeret sin nye hjemmeside, hvor de ville kunne have mulighed for at præsentere deres medlemmernes virksomheder og gøre det nemt for nye potentiele medlemmer at blive en del af netværket. Mine koder og design blev solgt videre til den virksomhed kunden havde henvendt sig til i første omgang, som nu står for vedligeholdelse af siden og content. Layout Jeg har brugt bootstrap skabelon full slider til de grundlæggende funktioner; Hjemmesiden tilpasser sig mobilenheder ved brug af regel under 1280px, 980px, 800px, 768px, 360px og 320px bredde; Slideshow med stemningsbilleder med blå filter Jeg koder i HTML5 og CSS, og benytter mig af færdige JavaScript og PHP til de mere komplicerede funktioner Menuen følger med når man scoller længere ned på sitet, og den udvides frem som et harmonika Nederst i footeren har man mulighed for at skrive en besked til netværkslederen, samt samle kontaktoplysninger Hurtigadgang knapper på forsiden Browserkompatibilitet Sitet er testet i Chrome, Firefox, Safari og Internet Explorer, og her fungerer det som det skal, og jeg har tjekket på validator.w3.org for at finde og rette fejl i min HTML5 kode. Det eneste fejl som bliver fundet kommer fra det, at validatoren tror, at den læser ældre versioner af HTML. Jeg har brugt præfiks i min CSS3 for at sikre, at fx animationerne virker i alle browsere. Arbejdsproces Opgavebeskrivelse fra reklamebureauet, som jeg hjælper med opgaven Inspirationssøgning på nettet Layout i Photoshop, som præsenteres for kunden og godkendes Udarbejdelse af skelet og storyboard Programmering af sitet med brug af HTML5, CSS3 og jquery Tilpasning til tablet og mobil (mål i %, media queries, viewport meta tag) Søgeoptimering ved brug af meta tags (title, keywords, discription) Tilretninger af indhold og tekster, vedligeholdelse og upload på domæne er bureauets opgave.

3 Procesbeskrivelse responsive, media queries søgeoptimering, mega tags opgavebeskrivelse programmering i HTML5, CSS indhold og tekst tilføjes inspirationssøgning skelet og storyboard godkendelse af siden, upload på domæne mash-up i PS godkendelse af design

4 Skelet, storyboard Bootstrap Jeg bruger en skabelon til at starte min hjemmeside på. Den gratis template hedder Full slider. Bootstrap giver mig flere muligheder og har indbyggede funktioner, som jeg kan benytte mig af uden at selv skulle kode alt fra bunden. Indhold Container er det hvide baggrund på indholdssiden, row er en del af indholdet på teksten og giver den orange linje under hver afsnit, col-lg-12 er responsivt. Ind i det sætter man artikler ind.

5 logo og menu slider stemningsbilleder, velkommen tekst beskrivelse af netværket hurtigadgang knapper sikrer nemmere hjemmesidesøgning tekst 2 detaljer kontakt skriv besked, se adresse, ring (tel.nr. er et link, hvis man er på mobil og trykker, vælger den nummeret automatisk)

6 Typografi Lora bold/regular brugt i header A B C D E F G H I J K L M N O P R S T U V W X Q Z Å Æ Ø % & ( ),. :!? Lora giver en varm og hjertelig velkommen på headeren (se: slider). Fonte med serifer præsenterer sig godt på skærmen i store størrelser. Lato regular/light brugt i brødtekst A B C D E F G H I J K L M N O P R S T U V W X Q Z Å Æ Ø % & ( ),. :!? Lato er en moderne og populær webfont. Den er klar og læsbar på skærmen og dens spændende, venlige design inviterer til at læse videre.

7 Farver Orange #f15a25 C 0 M 60 Y 80 K 0 Mørkeblå #0d004c C 100 M 100 Y 30 K 45 Baggrundsfarve #ced3dd C 20 M 10 Y 5 K 0 Actions 1. Logo - linker til index.html 2. Menu - ruller op/ned for menuen 3. Menu - med mulighed for undermenuer. Undermenu rulles op når musen kører over menupunktet, ved brug af transition 4. Slider navigation - sammen med piller til venstre og højere på billedet

8 5. Kontakform - sender beskeden til den angivet mail via. PHP kode 6. Telefon nr. - ringer autimatisk til nummeret, hvis brugerer er på mobil 7. Menuen følger med 8. Tabs - Medlemmerne tilhører kategorier (byer), indholdet på siden ændrer sig 9. Billede af medlem 10. Beskrivelse - detaljer og kontakt ruller op når musen kører over billedet

9 Responsive Desktop Mobile Tablet