Mobiele site voor bedrijf – Module 3

Web


Intro

Bij WEB maak je een WebApp voor het duurzame bedrijf dat jij deze module gekozen hebt. Jouw huisstijl en logo worden in jouw site gebruikt. Ook verwerk je de content in je site die je schrijft bij Taalvaardigheid.

web
1 – homepagina
2 – stylesheet
3 – contact- en actiepagina
4 – call to action button

Waarom moet een website geschikt worden gemaakt voor mobiele apparaten?

Desktop vs. Mobile
desktop vs mobile

De desktopversie van een site kan soms moeilijk worden bekeken en gebruikt op een mobieltje. Bij de versie die niet geschikt is voor mobiele apparaten, moeten gebruikers hun vingers samenknijpen of inzoomen om de content te kunnen lezen. Gebruikers vinden dit doorgaans frustrerend en er is een grote kans dat ze de site verlaten. De versie die geschikt is voor mobiele apparaten, is daarentegen goed leesbaar en kan meteen worden gebruikt.

In de VS zoekt 94% van de mensen met een smartphone lokale informatie op hun telefoon. Interessant is dat 77% van alle mobiele zoekopdrachten thuis of op het werk wordt uitgevoerd, dus op plaatsen waar waarschijnlijk ook desktopcomputers aanwezig zijn.

Mobiel is essentieel voor jouw bedrijf. Zorg ervoor dat bezoekers een goede ervaring op jouw site hebben wanneer ze deze bezoeken via een mobieltje.

1. Homepagina maken

Stap 1: homepagina maken

Volg nauwkeurig de volgende stappen.

Starten

Structuur van de HTML pagina
  1. Download hier de HTML pagina om mee te starten
  2. Stop deze pagina in een map op jouw OneDrive.
  3. Geef de map de naam van jouw bedrijf.
    Dus site-opgewekt, site-sharity, site-urban-vedge, site-ik-ook-van-jouw, site-mighty-tiny of site-boomcamp.
    Let op: geen spaties en bij voorkeur alleen kleine letters!

Title en meta-tags in de head

Pas de <head></head> tag aan.

  1. In de title-tag zet je de naam van je bedrijf
  2. Plaats in de description-metatag de slogan van jouw bedrijf (Taalvaardigheid)
  3. Plaats in de author-metatag jouw eigen naam

body tag

Zet het volgende in de body tag

<!-- BOVENKANT PAGINA MET TITEL -->
<header>
   <a href="index.html"><img src="images/logo-bedrijf.svg" alt="logo bedrijf" class="logo"></a>
   <h1>Naam van jouw bedrijf</h1>
   <h2>Slogan van jouw bedrijf</h2>
</header>

<!--  BELANGRIJKSTE INHOUD VAN DE PAGINA -->
<article>

</article>

<!-- IN DE FOOTER STAAT VAAK JOUW NAAM MAAR OOK SOCIAL MEDIA BUTTONS EN ZO -->
<footer>

</footer>
  • Download het Hamburgermenu-pure-CSS op GitHub en klik op de groene code knop > download ZIP. Of zoek een ander hamburgermenu online.
  • Zet de hamburgermenu.css in jouw css map
  • Kopieer de menu code uit de HTML pagina (van <nav> tot en met </nav> in jouw eigen pagina.)
  • Kopieer ook de CSS-link in jouw html pagina.

Binnen jouw nav staat straks:

  1. Een hamburgermenu button
  2. Een menu, met 3 links naar 3 pagina’s:
    • de homepage (index.html),
    • de contact pagina (contact.html)
    • en een actie pagina (actie.html)

Content in de <article> tag (teksten schrijf je bij taalvaardigheid)

Plaats de teksten die je schrijft bij taalvaardigheid in het <article> deel. Is je tekst nog niet af, plaats dan een tijdelijke dummy tekst (lorem ipsum bijvoorbeeld).
Deze tekst bestaat uit…

  1. De titel van de pagina (<h2>-tag)
  2. De subtitel van de tekst (<h3>-tag)
  3. Twee a drie alinea’s tekst (<p>-tags)
  4. Tussen de alinea’s ook een streamer. Maak een p-tag met een class. Je mag zelf de naam van de class verzinnen. In jouw CSS gebruik je die class-naam om je streamer een mooie stijl te geven. BIjvoorbeeld <p class="streamer">
  5. Minimaal 1 afbeelding (<img>-tag) die iets te maken heeft met jouw bedrijf. Meer mag ook natuurlijk.

<Footer> vullen

social-media-icons
Download social-media-icons (EPS)
Bewerk met Illustrator en sla op als SVG

Onderin je index.html zie je de footer-tag. De footer is het onderste deel van een web-pagina. Daar zie je vaak door wie de site gemaakt is (dus jouw naam) en social media icons. Ook zie je vaak links naar disclaimer en contact.

  • Vul de footer met in ieder geval jouw naam en het copyright teken.
    Zet er een het volgende symbool voor: &copy; Dan krijg je bijvoorbeeld dit: © Bethuel Heldt.
    De code is dan:
    <p>&copy; Bethuel Heldt</p>
  • Zet ook links naar social media van jouw bedrijf. Bijvoorbeeld Instagram en TikTok. De links hoeven niet te werken, maar het moet wel lijken alsof het werkt. Download de social media icons hier naaast, knip uit in Illustrator en sla op als SVG bestand. Gebruik vervolgens een paar social media icons in jouw footer. Je kunt onderstaande code gebruiken binnen jouw footer-tag.

Zet in je index.html:

<p>
   <span>© Bethuel Heldt</span>
   <span><a href="#"><img src="images/insta.svg" alt="Instagram"></a></span>
   <span><a href="#"><img src="images/tiktok.svg" alt="TikTok"></a></span>
</p>

Zet in je style.css:

footer{
    position: fixed;
    bottom: 0;
    background-color: black;
    width: 100%;
 }
 footer p{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center
 }
 footer p span{
    flex: 0 1 auto;
    color: white;
    padding: 20px;
 }
 footer p span img{
    height: 25px;
    width: auto;
 }

Instructievideo’s

Zet je site online en lever je link in in de Teams opdracht.

2. Stylesheet maken en mediaqueries gebruiken

Mediaqueries is de methode in CSS om voor verschillende beeldscherm formaten verschillende lay-outs te coderen. Je maakt de website voor jouw bedrijf voor een mobieltje. Mobieltjes hebben veel verschillende formaten en je kan een site liggend (landscape) of staand (portrait) bekijken. Voor al die verschillende formaten kun je dus de lay-out coderen. Maar dat is bijna niet te doen. Dus we kiezen twee formaten: portait voor een scherm van maximaal 450px breed en landscape voor een scherm van maximaal 940px breed.

Op css-tricks.com vind je alles over het gebruik van mediaqueries.

Stap 2: Stylesheet

Als het goed is heb je al een stylesheet voor je hamburgermenu. Maak nu een nieuwe stylesheet aan en koppel die in jouw index.html. Voor deze stylesheet mag je een voorbeeld CSS gebruiken.
In deze stylesheet staan alleen de meest noodzakelijke style beschrijvingen voor jouw mobiele site.

Doe het volgende:

  • Download deze stylesheet template en plaats die in de CSS map van je site. Code kopiëren en plakken in je eigen CSS kan natuurlijk ook.
  • Zodra je site online staat kun je je site op je mobiel bekijken. Ook kun je met de element-inspector kijken hoe jouw site eruit ziet op mobiel. Wat gebeurt er als je je scherm draait? Dit doe je dus met mediaqueries. De mediaquery code staat onderin je gedownloade stylesheet vanaf regel 77.
Mediaquery
  • Zorg ervoor dat deze styles aangepast worden. Dus andere kleuren en/of achtergrond plaatjes als je je site draait op je mobiel.
  • Maak de tekst op met de style declaraties die je hebt geleerd in de vorige opdracht typografie met css.
    Zorg voor
    • twee lettertypes van Adobe Fonts of Google Fonts, een voor je titel en een voor je broodtekst. Meer lettertypes mag ook. Als je met Adobe Fonts werkt, maak dan wel een nieuw project in Adobe Fonts aan. Noem je project bijvoorbeeld “Module 3 WebApp”
    • gebruik in ieder geval line-heigth, font-weight, font-size, text-align, color, background-color om je tekst op te maken. Kijk ook of je de andere typo css declaraties uit de typo-met-css opdracht kunt gebruiken.

Zet je update online.

Instructievideo’s

3. Pagina’s maken

Een website heeft uiteraard meerdere pagina’s. In jouw menu staan als het goed is al 3 links naar jouw drie pagina’s. Je mag uiteraard ook meer pagina’s maken.

Contact pagina

Video instructies contactpagina maken

  1. contactpagina kopiëren
  2. NAW-tekst van BO pdf document kopieren en plakken in contact.html
    De NAW teksten van jouw bedrijf staan in de pdf’s die je kan vinden op de BO module 3 pagina
  3. Tekst opmaken met HTML
  4. Linkjes maken van website, e-mail en telefoonnummer
  5. FontAwesome icons gebruiken voor website, e-mail en telefoonnummer
  6. Google Maps kaartje insluiten

Pagina kopiëren en tekst kopiëren

  • Kopieer je index.html en noem deze contact.html
  • Hier kopieer en plak je de contactgegevens en het adres (N.A.W) de van jouw bedrijf. Deze kun je vinden in de PDF van jouw bedrijf op de BO pagina van module 3 (Uitgebreidere info over de bedrijven met meer uitleg, adresgegevens etc:)
  • Maak de tekst op met kopjes <h3> en paragrafen <p>

Maak links van e-mail, website en telefoonnummer.

  • Een web-link maak je als volgt:
    <a href="https://mijn-bedrijf.nl" target="_blank">mijn-bedrijf.nl</a>
  • Een e-mail link maak je als volgt:
    <a href="mailto:someone@example.com">Dit is een mail link</a> .
  • Een telefoon-link maak je als volgt:
    <a href="tel:+31612345678">06 - 123 45 678</a>

Font Awesome icons maken bij je links

  • Kopieer onderstaande link (het is het javascript van Font-Awesome), en plak dit ergens binnen de <head>
<script src="https://kit.fontawesome.com/0b5c15e404.js" crossorigin="anonymous"></script>
  • Ga vervolgens naar Font Awesome en zoek icons uit voor je links. Volg de video instructie.

Google maps kaartje

  • Zoek het adres op van jouw bedrijf in Google Maps (het adres staat in de PDF van jouw bedrijf bij BO)
  • Klik op het deel icoon
  • Klik op ‘een kaart insluiten’
  • Kopieer de HTML-code van Google Maps
  • Plak deze code in jouw HTML pagina bij het adres

Zet je update online.

Actie pagina

Bij TAVA en BO ga je een actie, campagne of promotie bedenken voor jouw bedrijf. Daar schrijf je teksten voor en zoek en/of maak je afbeeldingen bij. Ook maak je bij VRMG een bewegende post. Je gaat de bewegende post van VRMG of de actiepagina van BO toevoegen aan je site.

Technisch doe je het volgende:

  1. Kopieer een html pagina (index of contact) en noem deze actie.html. 
  2. Op deze pagina zet je een actie, promotie of event neer die jouw bedrijf organiseert.
  3. In de article tag komt je promotie of actie. Dus die tag maak je leeg.
  4. Kies uit een van de twee onderstaande mogelijkheden.

Kies nu uit 2 mogelijkheden

VRMG promotie post in je site
  1. Vervang de article-tag met onderstaande code in je actie.html
<article>
   <h2>Titel promotie of actie</h2>
   <h3>Ondertitel promotie of actie</h3>
   <p>Kort tekstje over de promotie of actie.</p>
   <video src="images/vrmg-post.mp4" controls></video>
   <p>Eventueel nog een tekstje over de promotie of actie.</p>
</article>
  1. Voeg onderstaande code toe aan je CSS. Het maakt niet zoveel uit waar, als het maar niet binnen de accolades is van een andere style-beschrijving.
video{
   width: 100%;
   max-width: 100%;
}
  1. Zet de mp4 van je VRMG post in je images map
  2. Link de src van je video-tag naar je video
  3. Voeg zinvolle titels en teksten toe.
  4. Pas eventueel nog kleuren aan.
BO actiepagina in je site
  1. Vervang de article-tag met onderstaande code in je actie.html
<article>
    <img src="images/bo-actiepagina.svg" alt="afbeelding promotie of actie">
</article>
  1. Maak van je BO actiepagina een SVG.
  2. Stop de SVG in je images map
  3. Link de img-code naar je SVG
  4. Zorg dat je SVG-afbeelding goed past in de breedte van je scherm.

Zet je update online.

4. ‘Call to action’ button toevoegen op je homepage

Een ‘call to action’ button moet de bezoeker van jouw website verleiden tot actie. Bijvoorbeeld een aankoop doen in een webshop, een reactie plaatsen op een forum, of iets bekijken op jouw site. Dat laatste is wat je in deze opdracht gaat doen. Maak een knop die de bezoeker moet linken naar jouw actie pagina. Zet een wervende tekst op jouw knop.

Doe een van onderstaande opties om een call-to-action button toe te voegen.

call to action button
1. Call-to-action button als afbeelding, zoals gemaakt bij BO actiepagina – makkelijk

Call to action knop als afbeelding, zoals bij BO actiepagina

Bij BO heb je een call-to-action knop gemaakt.

  1. Deze knop exporteer je als SVG en stop je in je images map
  2. Voeg onderstaande code toe op je homepage (index.html) ergens in je article.
    Het moet opvallen (call to action) dus zorg dat je de knop ziet zonder dat je hoeft te scrollen.
<p class="cta-container">
    <a href="actie.html" class="cta-btn"><img src="images/call-to-action-button.svg" alt="Klik hier om onze promotie te bekijen."></a>
</p>
  1. Voeg onderstaande code toe aan je stylesheet.
.cta-btn{
   display: block;
   max-width: 100%;
   padding-top: .5em;
   padding-bottom: .5em;
   padding-left: 10px;
   padding-right: 10px;
}
.cta-btn img{
   max-width: 100%;
}
2. Call-to-action button met code (van Bethuel, wel zelf kleuren en zo aanpassen) – makkelijk

Call-to-action button met code (van Bethuel, wel kleuren aanpassen en zo)

Maak een link naar je actiepagina (<a href>). In de stylesheet kun je de link er uit laten zien als een knop met randen en achtergrond en eventueel een dropshadow.

HTML
In de index.html zet je deze code:

<a href="actie.html" class="call-to-action-button">Link die er uit ziet als een knop</a>

CSS
In de stylesheet zet je deze code.

.call-to-action-button{
   border: 2px solid red;
   background-color: white;
   color: red;
   line-height: 2;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 5px;
   text-decoration: none;
   text-align: center;
   transition: all 0.3s ease-in-out;
   display: inline-block;
}
/*Als je met je muis over de link gaat*/
.call-to-action-button:hover{
   color: white;
   background-color: red;
   border-color: white;
   box-shadow: 0px 0px 5px 5px rgba(255,0,0,0.5); 
   transform: scale(1.2);
}
Zo ziet dat er uit:

Link die er uit ziet als een knop

3. Call-to-action button met code van internet – moeilijk

Call-to-action knop met code van internet

Voeg een in het oog springende button toe aan je homepagina (index.html). Zorg ervoor dat de button goed te te zien is, liefst ‘boven de vouw’. De button linkt naar jouw actie pagina. (actie.html)

Voor die button zoek je naar een tutorial over buttons. Zoek bijvoorbeeld op de zoekterm ‘cool CSS button‘ of ‘button animation css‘.
Je kunt ook op deze pagina’s kijken:

  • 167 buttons freefrontend
  • of deze 20 geanimeerde buttons op webdeasy
  • Of een site die je zelf hebt gevonden
  • Je kunt ook code genereren met AI.

Let op: probeer geen SCSS of Sass tutorial te volgen. SCSS of Sass is een andere manier van CSS programmeren die niet zomaar werkt in jouw site. Je kan het wel gebruiken maar dan moet de code worden omgezet naar gewone CSS.
Een knop met Javascript is wel mogelijk maar veel ingewikkelder dan een knop met alleen HTML en CSS.

Zet je update online.

Zet je update online met FileZilla