Webbutveckling02 [weuweb02]

Moment02 - HTML5, CSS3 & forms

Introduktion

I detta moment så kommer vi både repetera det som gjordes i kursen webbutveckling01 samtidigt som vi kikar på nya saker som kan vara bra senare i denna kursen eller i andra pågående kurser.

De flesta programmeringsspråk har någon form av pågående utveckling, de unga programmeringsspråken utvecklas mer medan i äldre traditionella språk så görs mindre kompletteringar. Även om HTML/CSS knappast kan benämnas som rena programmeringsspråk så sker det hela tiden en utveckling som drivs av nya tekniska krav. Det är inte många år sedan vi bara använde datorns webbläsare för att besöka webbsidor, idag använder 62% av den svenska befolkningen internet i mobilen dagligen. http://www.soi2015.se/sammanfattning/

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Märkspråk och stilmallar.
  • Applikationer som fungerar oberoende av val av användaragent, operativsystem eller hårdvaruplattform samt hur tillgänglighet uppnås utifrån att applikationerna ska vara användarvänliga och robusta även för användare med funktionsnedsättning.

HTML5

HTML5 är den standard som gäller för närvarande på webben och då är det den vi behöver följa. Ett stort och viktigt steg som tagits i HTML5 är att fler taggar skall ha ett namn som talar om vad taggen faktiskt innehåller. Många har utvecklat hemsidor med oändligt många <div>-taggar och för att särskilja dem givit dem olika klassnamn eller id:n. I HTML5 har det bestämts att de flesta <div>-taggar skall ersättas med bättre taggar som gör samma sak men skapar en tydligare struktur på hemsidan. Vi använder oss därför av nya taggar som;

  • <header>
  • <nav>
  • <article>
  • <section>
  • <footer>

Om vi skall göra en grov struktur för kursolle.se sett ur ögon med HTML5 och en korrekt struktur så ser den ut så här.

Mockup av den planerade kursolle.se

Fast det är en sanning med lite modifikation, <nav>-taggen finns inte ännu på plats, den finns bara i min hjärna ännu. Några rester av en andra <aside> på höger sida kommer du säkert kunna hitta också. Hur som helst, det är en bra schematisk bild.

Bilden är gjord i applikationen draw.io som vi kommer använda mer senare, testa den redan i detta momentet när du skall fundera på uppbyggnaden av olika webbsidor.

Trots att det nu skall vara uppstyrt på ett tydligt sätt så att vi vet hur vi skall använda de olika taggarna så kommer ni hitta olika varianter, framförallt när det gäller <article> och <section>, googla på html5 semantic layout så kommer du se olika intressanta strukturer. Bedömningen i denna kursen kommer vara på att dina sidor vailderas korrekt och att allt du gör är tydligt. Om du sedan väljer att lägga <article> i <section> eller tvärt om spelar ingen roll.

Att arbeta med

Det jag vill att du gör är att du tittar på de nya strukturtaggarna som finns i HTML5 och funderar på hur du kan implementera dem i din samlingssida. Är den idag uppbyggd med mängder av <div>-taggar så är det dags att pensionera dem och plocka in de nya fräscha taggarna.
Våga också rita hur du vill att din sida skall se ut, den planlösa kodningens tid är förbi, nu gäller struktur och planerade applikationer.

Bra länkar

CSS3

I samband med att HTML5 blev antagen som standard så behövs det ju nya sätt att formattera dessa nya taggar. Då är det lägligt att CSS3 anländer med lite nya möjligheter. Trots att CSS3 är rådande standard så gör ändå vissa webbläsare lite som de vill, allt fungerar inte i alla webbläsare vilket du som utvecklare behöver vara uppmärksam på. Därför är det alltid bra att titta på sidan du byyger, även under tiden du bygger den, genom olika webbläsare.

Flexbox är nytt och intressant, kanske blir det den standard som gör det är enklare att få ordning på hur boxar skall ritas ut. Annat nytt i CSS3 är hur man kan påverka en box med bakgrund och ramar. Det finns lite nya texeffekter och transformations som kan vara intressant att jobba med. Enklast är om du klickar på länkarna nedan och kikar vad som finns, något kan du säkert redan ha behov av, andra saker är bra att känna till att de finns.

Att arbeta med

Precis som tidigare så innebär det att ju mer verktyg du har i din verktygslåda desto bättre kod kan du skriva och framförallt så kan du snabbare skapa rätt lösning och i utvecklingsbranschen så är tid samma som pengar.

Titta på din samlingssida, finns det någon ny CSS3-teknik som du kan använda här? Finns det nya saker du vill testa men inte implementera, lägg dem isf i ett eget dokument så att du samlar på dig bra lösningar du kan ha användning av senare.

Bra länkar

Formulär i HTML5

I HTML5 så finns det flera nya formulärtaggar som ger oss bättre möjlighet att kommunicera med användaren. Om du har jobbat med formulär i tidigare kurs så handlar denna delen bara om att lära in de nya, har du inte jobbat med formulär alls så finns det lite mer att göra.

Här kommer ett exempel på flera bra formulärelement som kan vara bra att kunna. Gör gärna ett jättefomulär med alla element du kan tänkas behöva använda senare i denna eller andra kurser.

Formuläret

Kön

Vad behöver vi kunna när det gäller formulär?

Det enkla svaret är allt som har med HTML5-formulär att göra. Det mer rättvisande svaret är att ni behöver kunna skapa det formulär som situationen kräver. Vill kunden ha många dropdownlistor och radioknappar måste du kunna detta.
Kan du grunderna för formulär, kan du några av de viktigaste egenskaperna som är nya för html5 och du vet var du kan hitta resten av det som kan bli aktuellt så har du kommit en bra bit på rätt väg. Du behöver kunna formatera formuläret med css så att det ser ut som du eller kunden vill.

Saker du absolut behöver kunna är;

  • Vanliga komponenter
    • Textbox
    • Checkbox
    • Password
    • Radiobuttons
    • Textarea
    • Select
    • Buttons
  • label
  • email
  • required
  • autofocus
  • placeholder
  • formatera det snyggt

Att arbeta med

Precis som tidigare så innebär det att ju mer verktyg du har i din verktygslåda desto bättre kod kan du skriva och framförallt så kan du snabbare skapa rätt lösning och i utvecklingsbranschen så är tid samma som pengar.

Känner du dig osäker kommer här två bra förslag på hur du kan angripa detta avsnitt.

1. En väldigt bra och pedagogisk genomgång om hur de vanligaste elementen kodas och fungerar samt hur du kan formatera ett formulär.

2. Läs på om de nya formulärelementen som finns i HTML5. Här finns några bra länkar;

Tips

Kopiera min fil, output.php, se nedan, och lägg den på binero (eller din lokala webbserver om du har en sådan) så att du kan se att det som du förväntar dig skall hända när du skickar formuläret gör det. Filen skall heta något med filändelsen ".php" och denna skall du anropa ifrån ditt formulär med filnamnet som "action" och "POST" som metod.

output.php

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Title of the document</title>
   </head>
   <body>
      <h1>Resultat</h1>
      <p>Följande har skickats från formuläret!</p>
      <pre>
				<?php
         // var_dump är en bra funktion som skriver
         // ut allt innehåll i en variabel, i detta
         // fallet en array var_dump($_POST);
         // print_r skriver ut samma sak, fast med
         // lite mindre information. Använd den du vill.
         print_r($_POST);
         ?>
				</pre>
      <a href="javascript:history.back()">Back</a>
   </body>
</html>

Validering

Vi kommer redan nu börja kika på att den koden vi skriver är validerad, att validera kod bör inte bara göras inför leverans, det är ett viktigt verktyg att använda under hela utvecklingsprocessen.

Jag har skapat en egen kunskapssida för validering som du bör använda under kursens gång.

Uppgiften

Inlämningsuppgiften för detta moment är tvådelad.

Uppgift 1: html5 och css

Du skall använda HTML5 och CSS3 för att utveckla din samlingssida, se till att ta bort alla onödiga <div>-taggar, om de finns sådana kvar så skall motiveringen vara bra för varför de finns där. Validera sedan din sida med följande tjänster;

Klipp ut resultatet för varje test, ändra det som du behöver ändra och kommentera vilka ändringar du har gjort när du utvärderar arbetet. Efter ändring så validerar du om och klipper ut det resultatet som också publiceras i ditt wordpressinlägg.

Uppgift2: forms

Du har fått ett uppdrag av Facebook att visa ett snyggt anmälningsformulär med följande önskemål.

  • Förnamn och efternamn skall anges i var sin textruta.
  • Födelsedatum skall anges med lämpligt formulärelement.
  • Lösenord skall anges två gånger, här kommer vi senare kunna lägga till ett javascript för att validera dessa lösenord.
  • Kön skall anges med radiobuttons.
  • Land skall anges från en lista med följande format, ISO-3366-1: Numeric Codes
  • En kyssruta skall kryssas i att du har godkänt användarvillkoren (inget sådant dokument behöver skrivas). Kryssrutan skall vi sedan kunna lägga ett script på, det behöver du inte göra i denna inlämning.
  • En knapp för att slutföra registreringen skall finnas.

När du är klar, validera html5 och css samt utvärdera uppgiften i ett inlägg på wordpress.