Portfelli tegemine

Portfell

Selles loengus näidatakse, kuidas teha lihtne vaid ühest html-dokumendist koosnev portfell

Portfell

HTNL5 dokumendi elemendid

Portfell (ingl. - porfolio) on dokument, mis demonstreerib autori praktilisi oskusi töönäidete abil; töö otsimisel on see CV järel tähtsaim dokument tööandjale esitamiseks - CV kirjeldab senist õpingute- ja töökäiku, portfell esitab konkreetsed näidised tehtud projektidest.

Portfelli html5-dokumendi elemendid

Portfell koosneb kahest failist: .html -dokument ja CSS-stiilileht (skripti ei ole). Loome projekti jaoks uue kataloogi ja salvestame sinna elementaarse html5-dokumendi:

<!DOCTYPE html>
<html lang="ee">
  <head>
    <meta charset="utf-8">
    <title>Minu Portfell</title>
    <link href="style_portfell.css" rel="stylesheet"/>
    
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Portfelli struktuur Html5 ja CSS3 tõid sisse rea uusi html-dokumendi elemente, mis paremini kui täiesti anonüümne DIV aitavad selgitada dokumendi sisulist, semantilist struktuuri. Kuna kaasajal html-dokument koostatakse sageli liites sinna elemente erinevatest andmebaasidest, teeb dokumenti elementide semantiline nimi selle koostamise märksa lihtsamaks.

Käesolevas dokumendis kasutame neist vaid elemente header (päis), nav (navigeerimismenüü), section (sektsioon) ja footer (dokumendi jalus).

Kogu portfelli struktuurskeem on kõrvaloleval skeemil.

Font

Isikupäse väljanägemise saamisks on soovitav kasutada mingit 'oma' fonti; sellise võib leida näites FontSquerrel-ist; demos on kasutatud sealt alla laetud fonti Titillium. allalaadimisel avanevas -.zip-arhiivis on palju fondi versioone, kuid siin on kasutatud vaid kaht: light ja bold; vastavad .otf-failid tuleb salvestada html ja css-dokumendiga samasse kataloogi.

Stiilileht

Loome Notepad++-s uue tyhja dokumendi ja salvestame selle nimega style_portfell.css html-dokumendiga samasse kataloogi (kogu projekti kataloogi).

FontSquerrel-ist saadud fondi kasutamiseks loome selles CSS3 fonditüübi:

@font-face {
     font-family: Titillium;  	src: url(Titillium-Light.otf) format("opentype")
 	} 
@font-face {
     font-family: TitilliumBold;  	src: url(Titillium-Bold.otf) format("opentype")
   }

Brauserid tahavad targad olla ja loovad pajude dokumendi elementide stiilile oletusväärtusi, näiteks Firefox jätab body ümber 5 pikslit vabaks. Tavaliselt see sobib, kuid kui tahetakse navigatsioonipalk paigutada täpselt dokumendi ülaäärde, siis selline oletusväärtus segab. Keelame ära kõik oletusväärtused, lisades CSS-stiiölihe algusse rea (oletusväärtustga tegelemisest vt näit siin):

* { margin: 0; padding: 0; outline: 0; }

- see ei luba mitte ühelegi elemendile ääre (border) ümber välimist (margin) ega sisemist (padding) tühaj ala.

Kirjeldame kogu dokumendi keha tausta ja teksti stiili; taustapildi/mustri võib igaüks valida oma maitse järgi, kuid see peab olema väga õhuline (Photoshop-is: lightness tuleb panna vähemalt 70%), et ei segaks teksti lugemist; kui kasutaja brauser ei saa meie personaalse fondiga hakkama, on lisatud ka üldtuntud san-serf fondi kasutamisvõimalus:

body {  	
	font-family: Titillium, Arial;  	
	color: #4b4b4b;  	
	background: url(images/pattern.gif);  	
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);  	
}

Päis

Järgmiseks lisame html-lehele musta ülapalgi (header), mille sisse tuleb logo ja navigeerimismenüü.

   <header>
    	<div id="headercontainer">
      </div>
    </header>

Nende kujundamiseks lisame stiililehele

header {  	
	padding: 5px 0;  	
	width: 100%; /*üle kogu akna */
	background-color: #000; /*must*/
	margin-bottom: 25px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	position: fixed; /*scrollimisel ei liigu */
	z-index: 10;  	
} 
#headercontainer, #contentcontainer {
 width: 960px;  	
	margin: 0 auto;
	position: relative;  	
} 
#contentcontainer {
	float: none;
	padding-top: 0px;  	
}

Siin eesliide # näitab, et see on id-ga kirjeldatud elemendi stiil (html-dokumendis: <div id="headercontainer">) ; päise (header) must palk katab kogu akna (width: 100%), kuid selle sees olev <div id="headercontainer"> on vaid 960px lai ja asub horisontaalselt päise palgi keskel - selle paigutuse määrab margin: 0 auto;.

Testimisel ilmub kitsas must riba - päisepalgi kõrgus sõltub sellesse lisatud elementide (näit teksti) kõrgusest - div-i alaäär 'venib' allapoole, kui sisu tuleb rohkem.

Päisepalgi algul on tavaliselt logo. Logoks võib olla väike pilt, kuid kasutame siin vaid suurt (element h1) teksti, mis on kumerate nurkadega nelinurgas; selleks lisame <div id="headercontainer"> -isse elemendi

<h1><a href="#intro">Minu Portfell</a></h1>

Stiililehele lisame selle vormingu:

h1 {  	
	color: #fff;  	
	font-size: 40px;
	position: relative;
	top: 15px; 			/* nihutab teksti päisest 15 pikslit allapoole */  	
} 	 
h1 a {
	color: #fff;  	
	background-color: #ff5400; /*punane */
	padding: 5px 25px 10px 25px;
	width: 300px;
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	border-top: 1px solid rgba(255, 255, 255, 0.6);
 }
h1 a:hover {
	color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	padding-bottom: 10px; 
}

Nüüd peab testimisel musta palgi peale ilmuma punane kumerate rurkadega logo, mis hiire peale viimisel (hoover) muutub roheliseks.

Lisame <div id="headercontainer"> -isse logo (h1 teksti) järele navigeerimismenüü:

    		<nav> <!-- HTML5 navigation tag -->
    			<ul>
    				<li><a href="#intro">Intro</a></li>
    				<li><a href="#portfolio">Portfell</a></li>
    				<li><a href="#about">Minust</a></li>
    				<li><a href="#contact">Kontakt</a></li>
    			</ul>				
    		</nav>

Selle vormistamiseks lisame stiililehele

nav {  	
	width: auto;
	float: left;  	
} 
nav ul {
	position: absolute;
	right: 0;
	display: block;
	margin-top: -37px;
} 
nav ul li {
	display: inline;
	margin-left: 50px;
	}
nav ul li a {
	font-size: 24px;
	border-bottom: none;
}
a {
	color: #7ac000;
 text-decoration: none;
	border-bottom: 1px solid #7ac000;
	padding-bottom: 2px;  
} 
a:hover {
	color: #ff5400;
	text-decoration: none;
	border-bottom: 1px solid #ff5400;
	padding-bottom: 2px;
	}
a:active {
	color: #ff5400;
	text-decoration: none;
	border-bottom: 1px solid #ff5400;
	padding-bottom: 2px;
	position: relative; top: 1px;
	}

Nüüd ilmub ülapalgile ka menüü.

Navigatsioon

Menüü linkide klikkamisel ilmub nähtavale dokumendi vastav sektsioon (näit href="#intro" viitab sekstioonile <section id="intro">); kuna päise header stiilis on asend määratud aknas liikumatuna

	position: fixed; /* lehe scrollimisel ei liigu */

aga kõigi sekstioonide asend klassis #contentcontainer akna (mitte dokumendi!) suhtes suhtelisena

	position: relative;

siis vastava sektsiooni lingile klikkamine paiskab selle sektsiooni üles (akna suhtes fikseeritud positisioonile)

	position: relative;

Kuna päise (header) positsioon ei muutu (fikseeritud), tekibki mulje, et lehe alaosa sisu vaheldub. Et lühikese sekstiooni üles liikumisel ei ilmuks kogemata ka järgmist, on sektsioonide stiilis lisatud sekstiooni alla tükk tühja maad (stiilileehel):

section { 
margin-bottom: 1000px; 
padding-top: 150px; 
float: left; 
}

Sektsioonid

Kõik sektsioonid asuvad sektsiooni <section id="contentcontainer"> sees, seega lisame html-dokumendile (päise järele, s.t. pärast päise lõpurida </header> )

<section id="contentcontainer"> <!-- HTML5 section tag for the content 'section' -->
</section>

Stiililehel on selle elemendi stiil #contentcontainer juba olemas.

Järgmiseks lisame elemendi #contentcontainer sisse alamelemendid

	<section id="contentcontainer"> 
  <section id="intro">
  </section>
  <section id="portfolio">
  </section>
  <section id="about">
  </section>
  <section id="contact">
  </section>
	</section>

Testimisel ilmub menüü elementide klikkamisel nüüd aadressireal vastava sektsiooni nimi, näit portfell_ee.htm#contact.

Kõigi sekstioonide pealkirjad on html pealkirjaklassiga h2; lisame stiililehele selle stiili täpsustuse; et sektsioonis intro ilmuks pealkira ette ka väike pilt, täpsustame ka intro pealkirja:

h2 {
  	padding-left: 125px;
 	font-family: TitilliumBold;
	 	font-size: 48px;
  	color: #ff5400;
	} 
h2.intro {
  	background: url(images/intro.png) no-repeat -10px -10px;
  	}

Sekstioon Intro

Sektsiooni intro pealkirija järel loetletakse portfelli autori oskused; et loetelu oleks pealkirja teksti algusega kohakuti, on seda vasakult pildikese laiuse (128px) võrra nihutatud:

<h2 class="intro">Olen multimeedia kursusel omandanud järgmised oskused:</h2>
	<div class="oskused">
	<ul>
		<li>3D mudelleerimine Sketchup-iga</li>
		<li>Sketchup-iga loodud 3D-mudeli eksport HTML5 dokumenti</li>
		<li>Flash</li>
		<li>HTML5 dokumendi loomist Notepad++ abil</li>
		<li>graafikute loomist Javascriptiga HTML5 kanvaal</li>
		<li>SVG-graafikute loomist HTML5 kanvaal pakettiga D3 (Data-Driven-Documents)</li>
		<li>HTML5 dokumendi kujundamist CSS, CSS3 abil</li>
	</ul>
		<p class="sub"> 
			<strong> Ei ole midagi mida ma digitaalses kommunikatsioonis ei oska !</strong></p>
</div>

Klass sub nihutab teksti veidi allapoole ja muudab selle värvi:

.sub {
  	padding-top: 24px;
  	color: #ff5400;
 }

Sektsioon About

Sektsioon about on väga lihtne (igaüks kasutab oma fantaasiat!):

<section id="about"> <!-- HTML5 section tag for the about 'section' -->
	<h2 class="about">Minust:</h2>
	<p>Now this is a story all about how my life got twisted upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel-Air. 
In West Philadelphia born and raised on the playground my momma said most of my days chilling out, maxing and relaxing all cool and all shooting some b-ball outside of school when a couple of guys they were up to no good started making trouble in our neighbourhood I got in one little fight and my mom got scared, she said your moving in with your auntie and uncle in Bel-Air</p>
 	</section>

Et tekst parem välja näeks, võib stiililehele lisada vormingu

p {
 font-size: 24px;
	margin-bottom: 15px;
 line-height: 36px;
 }

Sektsioon Contact

Ka selle struktuur on üsna lihtne:

<section id="contact"> 
<!-- HTML5 section tag for the contact 'section' -->
<h2 class="contact">Võta ühendus:</h2>
<p>I whistled for a cab and when it came near the license plate said fresh and had dice in the mirror, if anything I could say that this cab was rare but I thought nah, <a href="">forget it</a>, yo home to Bel-Air! I pulled up to the house about seven or eight I yelled to the cabbie yo home, smell you later, looked at my kingdom I was finally there to sit on my throne as the prince of Bel-Air</p>
<form id="contactform">
	<p><label for="name">Name</label></p>
	<input type="text" id=name name=name placeholder="First and last name" required tabindex="1" />
	<p><label for="email">Email</label></p>
	<input type="text" id=email name=email placeholder="example@domain.com" required tabindex="2" />
	<p><label for="comment">Your Message</label></p>
	<textarea name="comment" id="comment" tabindex="4">
</textarea>      			      			
<input name="submit" type="submit" id="submit" tabindex="5" value="Send Message" />
</form>      	     	
</section>

Sektsioon porfolio

See on kogu portfelli kõige olulisem osa - siin on autori tööde näidised.

Kõige lihtsam töö esitlemise viis on näidata portfellis selle kujutist (pilti), millel siis on link konkreetsele tööle. Selliste piltide (ekraanitõmmiste, screen capture) saamiseks on Windows-is väga mugav vahend - Snipping Tool - kirjutada otsinguaknasse Snip... ja see peaks kohe ilmuma. Kui dokument, millest tahetakse saada ekraanitõmmist, on enne käivitatud, võib kohe vedada aknas dokumendi olulise ala ümber ristküliku ja salvestada saadud pildi .png formaadis portfelli kataloogi alamkataloogis images. Pildi täpne suurus pole oluline, umbes 400x400px, kuid võib olla ka suurem (väiksema korral tekivad suurendamisel moonutused). Sektsioon koosneb piltide loetelust, kus iga loetelu element vormistatakse CSS-iga neljakandiliseks; pildi stiil sunnib pildi täitma kogu selle ruudu. Kuna see on üsna psuur sektsioon, on sekstiooni alumist äärt veel kaugemale allapoole nihutatud.

HTML (igaüks kasutab oma pilte!):

<section id="portfolio" style = "margin-bottom:2000px;" > 
<!-- HTML5 section tag for the portfolio 'section' -->
<h2 class="work">Minu tööd:</h2>
<ul class="work">
<li>	<a href=""><img src="images/teemant.png" alt="teemant" /></a>
	</li>
<li><a href=""><img src="images/bunny.png" alt="Flash Bunny" /></a>
	</li>
<li><a href=""><img src="images/raamatud.png" alt="kanvaa joongraafik" /></a>
</li>
<li><a href=""><img src="images/SVG_kaart.png" alt="SVG graafik kaardil" /></a>
 </li>
<li><a href=""><img src="images/mulligraafik.png" alt="mulligraafik" /></a>
	</li>
<li>	<a href=""><img src="images/portfell.png" alt="Minu portfell" /></a>
 </li>
</ul>
</section>

Css:

#portfolio ul.work a {
 border-bottom: none; 
} 
#portfolio ul.work a img {
	width:100%;	height: 100%; /*pilt peab katma kogu ruudu */
	border: 5px solid rgba(122, 192, 0, 0.15);
	border-radius: 5px; 	
} 
#portfolio ul.work {
 float: left;
 margin-left: -15px;
 width: 975px; 
 }
#portfolio ul.work li {
	list-style: none; /* loetelu ikoone pole tarvis */
	display:block; /*neljakandiline */
	float: left;
	margin: 15px;
	width: 430px;
	height: 400px;
	}