Show sourcecode
The following files exists in this folder. Click to view.
Komplettering.txt
Läs mig.txt
Processanalys.docx
fonts/
images/
includes/
kontakt.html
minatjanster.html
ommig.html
showcase/
showcase.html
startsida.html
stylesheets/
ommig.html
1 lines UTF-8 Unix (LF)
<!DOCTYPE html>
<html lang='sv'>
<head>
<title>Nicolas Dubray</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1"> <!-- Sätter "vyn" av sidan till enhetens bredd, och full skala från början. -->
<link rel="stylesheet" href="stylesheets/main.css" type="text/css">
<link rel="stylesheet" href="stylesheets/responsive.css" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Eftersom jag tänkte att överdelen och underdelen av startsidan kanske lämpligen kunde finnas med på alla sidor
(särskilt eftersom överdelen har en navigationsmeny) så har jag lagt dessa delar i varsin php-fil, vilket då ger mig två
filer jag smidigt kan inkludera på varje sida som skall ha någon eller båda av dessa delar. -->
<!-- Jag har valt att skriva HTML-koden (och CSS-koden) på så vis att den upplösning för mobilskärmar som jag valt som
den minsta upplösning med vilken sidan skall visas korrekt är utgångsläget för koden, eftersom det för mig känns bäst
att för responsiv design ha ett utgångsläge från vilket man kodmässigt antingen *enbart* förstorar eller förminskar.
Ex. så innebär detta att HTML- (och CSS-koden) har som utgångsläge att visa kolumnen som i mallen för desktop-sajten är
mittenkolumnen som den översta kolumnen (tekniskt sett, den "vänstra" kolumnen, eftersom det, med min lösning, är den
vänstra kolumnen som hamnar överst), vilket enligt uppgiftsbeskrivningen skulle vara fallet för mobil-sajten. -->
<header>
<!-- Jag har valt att för loggan inte direkt i HTML-koden skapa en img-tag som innehar logo-bilden utifall att
jag skulle vilja påverka val av logga i CSS-filer, ex. om jag skulle vilja ange en annan logga för utskrift.
Jag har givit divisionen nedan "logo" som ett id eftersom jag har tänkt att det på varje sida skall finnas
maximalt en sådan här logga.
Loggan har jag dessutom gjort till en länk som tar en till startsidan, för att göra den användarbar samt för att
följa den logo-"standarden". -->
<a href="startsida.html"><div id="logo"></div></a>
<!-- Jag har omslutit de länkar genom vilka man kan navigera runt sig till sajtens olika sidor med nav-taggar,
eftersom sådana taggar ämnade för att innehålla navigerings-element, ex. just text-länkar, liksom mina. -->
<nav>
<a href="ommig.html"> OM MIG </a>
<a href="minatjanster.html"> MINA TJÄNSTER </a>
<a href="showcase.html"> SHOWCASE </a>
<a href="kontakt.html"> KONTAKT </a>
</nav>
<!-- Jag har omslutit mina nyckelord med div-taggar vilka jag givit den semantiska betydelsen "keywords" eftersom
jag inte känner till någon HTML-tag som redan har den semantiska betydelsen. Jag har satt betydelsen som ett id
eftersom jag har tänkt att det på varje sida maximalt skulle finnas en sådan här division för nyckelord. -->
<div id="keywords">
<!-- Jag har valt att lista olika mjukvaruteknologier jag behärskar, i varierande utsträckning, som del av
en punktlista eftersom det i mall-bilderna för både desktop- och mobil-sidan uppgiftsbeskrivningen står
att man skulle ha en "Kort text / punkter om dig själv för att fånga intresse från en potentiell klient".
Jag har omslutit list-föremålen med strong-taggar för att bestyrka deras vikt. -->
<ul>
<li><strong>C++, C#, C, Java, Python, Assembler</strong></li>
<li><strong>HTML, PHP, CSS</strong></li>
<li><strong>DirectX</strong></li>
</ul>
</div> <!-- END KEYWORDS -->
</header>
<!-- Jag har valt att omsluta innehållet på startsidan med en division som jag jag givit den semantiska betydelsen
"columns_mains" eftersom jag vill att den skall inneha och arrangera kolumner, eftersom mallarna för både desktop-
och mobil-sajten visar startsidans innehåll inuti kolumner som är sida vid sida eller över/under varann. -->
<div id="columns_main">
<article><h1>Processanalys</h1>
<p>Jag valde att följa de två mall-bildar som givits för sajten så gott som exakt, med vissa skillnader vad det gäller typsnitt och mått. Jag begrundade mall-bilderna för mobil- och desktop-versionen av sajten för att identifiera de eventuella gemensamma element och layout och konstaterade då att sajten, åtminstone för start-sidan, lämpligen skulle ha en ”header”-del, en ”footer”-del, samt en ”innehålls”-del emellan de ”header”- och ”footer”-delen.</p>
<p>Eftersom det var tänkt att det i mall-bilderna som jag ser som sajtens ”header” skulle innehålla nagivations-länkar för sidan så tänkte jag att det vore lämpligt att använda dess kod även för sajtens undersidor. Sådan återanvändning av ”header”- och ”footer”-element är ju en del av lyckade designer för många sajter och jag såg ingen riktigt bra anledning till att inte göra samma sak här (bortsett från att man skulle kunna ha kortare header för undersidorna), så jag valde att göra så för sajten.</p>
<p>Den undersida till sajten som jag valde att skapa är ”showcase”-sidan. Eftersom det inte gavs några särskilda krav på den undersida eller de undersidor man skulle skapa, bortsett från att den/de skall vara ihoplänkad/ihoplänkade med startsidan, så valde jag att göra en ganska enkel ”showcase”-sida som har samma mönster som startsidan, fast med skillnaden att jag på undersidan har placerat ut fler ”kolumner” och placeholder-nedladdningslänkar med tillhörande placeholder-beskrivningar för deras innehåll.</p>
<p>Jag valde tidigt att skriva HTML-koden och CSS-koden på så vis att den upplösning för mobilskärmar som jag valt som den minsta upplösning med vilken sidan skall visas korrekt är utgångsläget för koden. Inspirationen för detta val var primärt Googles webb-kurs om responsiv design [1][2]. Ifrån den webb-kursen tog jag först och främst följande punkter:</p>
<p>• För responsiv design verkar det smidigast att ha ett utgångsläge från vilket man kodmässigt överlag antingen enbart förstorar eller enbart förminskar, eftersom man då kan passa in kod för nya upplösningar som är större/mindre än utgångslägets upplösning i en tydlig ordning efter storlek (ex. från kod för minsta upplösningarna till kod för största upplösningarna),</p>
<p>• För responsiv design verkar det klokt att utgå ifrån minsta möjliga (mobil-)upplösning eftersom man då snabbt får fokus på just vad på sidan som är viktigast att visa och vad som är viktigast att visa först och främst och då löper mindre risk att designa en layout för desktop-versionen som inte smidigt kan anpassas för mindre skärmstorlekar.</p>
<p>Exempelvis så innebar mitt val att HTML- och CSS-koden för sajten fick, som del av dess utgångsläge, visa kolumnen som i mallen för desktop-versionen av sajten är den mittersta kolumnen som den vänstra kolumnen, eftersom kolumnen på så vis, med min lösning, hamnar ovanför de övriga kolumnerna, vilket enligt uppgiftsbeskrivningen skulle vara fallet för mobil-versionen av sajten.</p>
<p>I uppgiftsbeskrivningen avvisades man från att bruka tabeller för sajtens layout, vilket jag tror annars hade kunnat brukas för att hantera de delar av sajten som enligt mallen och uppgiftsbeskrivningen skall vara liksom kolumner. Jag ordnade därför egna div-taggar vilka jag med CSS stylade till att vara liksom kolumner.</p>
<p>Den enkla implementationen av mobil-sajten hade kunnat åstadkommas genom att man med media-queries helt enkelt sätter vänster-kolumnen och höger-kolumnen till att inte visas för mobil-upplösningarna, genom CSS-egenskapen ”display”, som man för att dölja HTML-element skulle sätta till ”none”, vilket medför att elementet varken visas eller tar upp plats [3]. Jag valde dock att implementera en lösning för att visa alla kolumner även på mobilsidan, med desktop-sajtens mittenkolumn överst, enligt nedan. För att få till valde jag att bruka CSS flex-egenskaper, vilka kan användas för att arrangera element inom andra element och ställa in hur element inom samma behållare relaterar till varann[4]. På så vis kan man enkelt, via CSS, ställa in, och genom media queries ändra, ordningen på föremål inom flex-behållare, genom att bruka CSS order-egenskapen, som är till just för föremål i sådana behållare[5]. Ett alternativ hade varit att skriva PHP-kod som genererar fram olika uppsättningar HTML-kod beroende på webbläsarfönstrets storlek och/eller vad för enhet webbläsaren körs genom. För en ständigt pågående uppdatering av vilken HTML-kod som ska gälla skulle man kanske kunna bruka ett JavaScript som genererar sådan kod och sätter den i bruk utan att ladda om hela sidan. Båda dessa alternativ skulle ta betydligt längre tid att implementera.</p>
<p>Vad det gäller responsiv design i övrigt så lade jag ”grunden” för en sådan genom mitt bruk av en ”wrapper”-division, som jag låtit omsluta allt inom sajtens ”body”-element. Denna divisions bredd satte jag till ett maximalt värde angivet i pixlar och ett aktuellt värde angivet i procent (”100%”), vilket leder till att bredden på denna ”wrapper”-division ändras i takt med webbläsarfönstrets bredd, men inte blir bredare än den angivna maximala bredden även om webbläsarfönstret blir bredare än så. För att nyttja detta för att få en något ”fluid” design så lät jag de HTML-element som ”wrapper”-divisionen innehar få ha en aktuell bredd som med värdet ”100%”, vilket innebär att deras bredd är samma som deras omslutande element, vilket i detta fall är ”wrapper”-divisionen, vars bredd ju ändras i takt med webbläsarens bredd. Denna ”fluid”-egenskapen gör så att sajten kan passa bra även på skärmstorlekar som ligger emellan de som man eventuellt specifierar något med genom bruk av media queries. Enligt min mening behövdes det för denna sajt inte vara mer ”fluid” än vad det ovan beskrivna gör den till, eftersom alla element på sidan har gott om plats och det inte är så många av de som kan råka stöta på varandra. För en mer detaljrik sida kan det blir mer lämpligt att skala fler mått såsom ”padding”-värden.</p>
<p>För att få mer precis responsiv design för särskilda enhetstypers skärmar, och för att helt enkelt få ytterliggare precision på enkelt vis, brukade jag två media queries med två stycken s.k. ”breakpoints”. Ett av dessa nyttjade jag bara för att flytta saker från höger sida av ”header”-delen av sidan till vänster sida av den innan ”header”-delen blir för smal för att rymma dessa text/länk-innehåll utan att radbryten förekommer och det andra brukade jag för att ändra storlekar på ”header”- elementen samt arrangeringen av kolumner inuti an division avsedd för dessa (vilka jag på så vis bytte ordning på, brukandes ”order”-egenskapen för föremål inom element med ”flex”-egenskapen). Överlag hade jag tänkt att undvika att binda mig till specifika enheter, eftersom dessa ju kan komma ur bruk eller det ändå kan uppkomma nya som jag då skulle få skriva om koden för. Jag märkte dock att jag var tvungen att göra ett undantag för iPads för att se till att den inte visar upp fler än tre kolumner på en rad när sajten visas i landskapsvy i Safari, och jag ställde då in en minimi-bredd för kolumnerna för att motverka iPad-Safari-webbläsarens krympande av kolumnerna, vilket ledde till att fler än tre kolumner knökas in på den rad, för iPads specifika landskaps-inställningar[6].</p>
<p>För mina media queries för utskrift fokuserade jag på att få utskrift porträtt-orientationen att fungera bra, eftersom jag ansåg att en användare förmodligen helst skulle vilja skriva ut sajtens information med den orientationen. Min grundtanke för utskrift överlag var att ta bort så gott som allt förutom kontaktinformationen vid botten av sajten och texten i kolumnerna, samt eventuella bilder inuti kolumnerna eftersom bilder däri skulle kunna vara viktiga för kolumnernas text.</p>
<p>Jag har prövat sajten i Mozilla Firefox, Google Chrome, Opera, den senaste versionen av Safari som Apple-produkter kan ha (iPhone och iPad) och den senaste versionen av Safari som Windows kan ha, och jag har prövat sajten på en PC, en Android-telefon (Samsung Galaxy S3), en iPhone och en iPad. Med undantaget av senaste versionen av Safari som man kan ha på Windows så verkar sajten visas helt och praktiskt på alla dessa enheter och i alla dessa webbläsare.</p>
<p>För Safari behövdes vendor-specifik CSS för ”flex”-attribut, eftersom Safaris utvecklare ännu inte implementerat flex-attribut enligt CSS3-standarden utan har sin egna implementation. På den senaste versionen av Safari-läsaren som Windows kan ha i nuläget så fungerar tyvärr ej flex-inställningar fullt ut. Dessutom verkar endast Google Chrome klara av att korrekt skriva ut element med ”display: flex”, så jag fick ändra till ”display: block” i en print media query för min ”wrapper”-division.</p>
<p>Något som ej heller fungerar med Windows Safari, fast däremot på de senaste versionerna av Safari för iPhone och iPad, är att genom CSS sätta en cirkulär ”border” på element, något man skulle kunna åtgärda exempelvis genom att via bruk av z-index-egenskapen sätta en bakgrundsfärgad division bakom elementet man vill ge en border och sedan göra denna div cirkulär, så att man på så vis till synes har givit elementet en border-egenskap, med en färg som är den bakomliggande divisionens bakgrundsfärg.</p>
<p>Jag har i allmänhet valt att avstå från att få till saker via ”hacks”. Detta har då tyvärr lett till att sajten, främst på desktop-versionen, ser felaktig ut i senaste versionen av Safari-webbläsaren för Windows. Safari-webbläsaren verkar dock för mig mest användas på Apples hårdvaror, och dessa kan köra de versioner av den webbläsaren som sidan ser korrekt ut i.</p>
<p><strong>Referenser:</strong></p>
<p>1. “Responsive Web Design”, Pete LePage, Google Developers: <a href="https://developers.google.com/web/shows/udacity/courses/responsive-web-design">https://developers.google.com/web/shows/udacity/courses/responsive-web-design</a></p>
<p>2. “Responsive Web Design Basics”, Pete LePage, Google Developers: <a href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/">https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/</a></p>
<p>3. CSS Display and Visibility, w3schools.com: <a href="http://www.w3schools.com/css/css_display_visibility.asp">http://www.w3schools.com/css/css_display_visibility.asp</a></p>
<p>4. CSS flex Property, w3schools.com: <a href="http://www.w3schools.com/cssref/css3_pr_flex.asp">http://www.w3schools.com/cssref/css3_pr_flex.asp</a></p>
<p>5. CSS order Property, w3schools.com: <a href="http://www.w3schools.com/cssref/css3_pr_order.asp">http://www.w3schools.com/cssref/css3_pr_order.asp</a></p>
<p>6. “Media Queries for Standard Devices”: <a href="https://css-tricks.com/snippets/css/media-queries-for-standard-devices/">https://css-tricks.com/snippets/css/media-queries-for-standard-devices/</a></p>
</article>
</div> <!-- END COLUMNS_MAIN -->
<!-- Eftersom jag tänkte att överdelen och underdelen av startsidan kanske lämpligen kunde finnas med på alla sidor
(särskilt eftersom överdelen har en navigationsmeny) så har jag lagt dessa delar i varsin php-fil, vilket då ger mig två
filer jag smidigt kan inkludera på varje sida som skall ha någon eller båda av dessa delar. -->
<!-- Jag har valt att omsluta kontakt-informationen inuti address-taggar, eftersom sådana taggar är avsedda just för
sådan information. Upplägget skulle vara mer semantiskt korrekt om jag istället skulle omsluta telefonnumrena i en
div jag klassar/identifierar som "phonenumber", men jag tyckte att det blev lite väl pedantiskt. För övrigt är
formateringen av de angivna telefonnumrena är sådan att numrena faktiskt kan uppfattas som telefonnunmmer
av vissa mjukvaror, ex. Skype. -->
<footer>
<!-- Jag har valt att skilja address-elementen åt genom att omsluta de med div-taggar som jag behandlar som
kolumner. Alternativt hade jag kunnat skilja de åt genom att omsluta de i celler tillhörandes en tabell,
men man avvisades i uppgiftsbeskrivningen från att bruka tabeller för sidornas struktur. -->
<div class="column_footer">
<address>
<strong>Adress</strong>
<p>Storgatan 1<br>123 45 Lillestad</p>
</address>
</div>
<div class="column_footer">
<address>
<strong>Telefon</strong>
<p>0123 - 456 789<br>070 - 123 45 678</p>
</address>
</div>
<div class="column_footer">
<address>
<strong>E-post</strong>
<p>info@stortego.se<br>sales@stortego.se</p>
</address>
</div>
</footer>
</div> <!-- END WRAPPER -->
</body>
</html>