ArenaZnanja: iCanToo

Prikaz razvoja spletne strani s pomočjo sodobnih tehnologij.

Predava: Vigredni Robert Sedovšek, http://galjot.si/ (@sedovsek)

HTML5 from Scratch

Zažljena programska oprema (for syntax highlighting):

jEdit, http://www.jedit.org/
Edit +, http://www.editplus.com/
BBEdit, http://www.barebones.com/products/bbedit/
Vim, http://www.vim.org/
Emacs, http://www.gnu.org/software/emacs/

HTML5 Okostje:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ArenaZnanja - iCanToo</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">

</div>
</body>
</html>

Glava in navigacija:


<header class="sidebar">
	<h1><a href="#">Ime Priimek <strong>dijak/študent/zanesenjak</strong></a></h1>
	
	<nav>
		<ul class="nav">
			<li><a href="#home">Personal info</a></li>
			<li><a href="#edu">Education</a></li>
			<li><a href="#skill">Skills/Projects</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</nav>
	
	<img class="personal_photo" src="http://placekitten.com/160/250" alt="Robert Sedovsek" width="160" />
	<br/>
	<span class="photo_ref">
		<i>Photo taken at the <a target="_blank" href="http://newadventuresconf.com/" title="New Adventures in Web Design">New Adventures in Web Design</a>
		(Nottingham, UK) by <a target="_blank" href="http://kickawesome.tv/" title="Nate Croft">Nate Croft</a></i>
	</span>
	
</header>

Vsebina:



<div id="content">
	<div class="info">
	
		<div id="data_home">
			<h2 id="my_home"><a name="home">General info</a></h2>
			<p>Hello! I am Robert Sedovšek, a PhD student at the University of Ljubljana and a full-time continuously learning passionately curious enthusiast.
			I was born on 10th of october 1984 in Slovenj Gradcec, Slovenia. I live in my own appartment in Mežica
			<small>[see <a target="_blank" href="http://www.flickr.com/photos/seddy/5132092891/" title="Work place">coderoom</a>]</small>.</p>
		</div>
		
		<div id="data_edu">
			<h2 id="my_edu"><a name="edu">Formal education</a></h2>
			<p>I attended elementary school in Mežica where I was rewarded for eight years of <strong>excellence</strong>.
			In 2003, after I successfully completed Gymnasium Ravne na Koroškem, I enrolled in the <strong>Faculty of Natural Sciences and Engeneering</strong>,
			where I gratuated <strong>with honors</strong> on »Software development for game based mobile learning supported by eMapps«
			in the year <strong>2008</strong> under the supervision of doc. dr. Bojan Petek.</p>
			
			<p>
			I am currently a <strong>third-year student</strong> of postgraduate study and I am being awarded with the <strong>Zois scholarship</strong> for gifted and talented.
			My area of interest are <strong>language technologies</strong> and <strong>natural language processing (NLP)</strong>.
			</p>
		</div>
		
		<div id="data_skill">
			<h2 id="my_skill"><a name="skill">Software and technologies</a></h2>
			<ul class="lists">
				<li>Storing amounts of data in: <strong>MySQL</strong>, <strong>Oracle</strong>, <strong>MsSQL</strong>;</li>
				<li>Prefer to code in <strong>PHP</strong> (CodeIgniter framework and Smarty template engine), familiar with others, too;</li>
				<li>Exchanging data in/with: <strong>XML</strong>, <strong>Ajax</strong>, <strong>jSON</strong>, <strong>CSV</strong>, <strong>Excel</strong>, etc;</li>
				<li>I operate systems: Windows (60%), MacOS (25%), Linux (15%);</li>
				<li>Established <strong>Apache</strong> web server & Samba file server for personal use;</li>
				<li>Wrote valid markup of documents in <strong>(X)HTML(5)</strong> and their style in <strong>CSS(3)</strong>;</li>
				<li>Amazed at <strong>JavaScript</strong> ability & daily <strong>jQuery</strong> user;</li>
				<li>Pushing <strong>pixels</strong>, drawing vectors, done <strong>animations</strong>: Photoshop, Illustrator, Flash;</li>
			</ul>
		</div>
		
		<div id="data_contact">
			<h2 id="my_contact"><a name="contact">Contact</a></h2>
			<p>
			Robert Sedovšek.<br/>
			Gosposvetska 19<br/>
			2392 Mežica<br/>
			<br/>
			twitter: @sedovsek<br/>
			e-mail: robert.sedovsek@gmail.com
			</p>
		</div>
	</div>
</div>

Noga:


<footer>
	<p class="small">This website is powered by 
	<a target="_blank" href="http://jquery.com/" title="jQuery">jQuery</a> 
	and uses these gorgeous fonts I found in 
	<a href="http://code.google.com/webfonts" title="Google font directory">Google font directory</a>.
	Thank you all for sharing!</p>
</footer>

So far, so good?

na začetek oziroma naprej na Chapter: Adding CSS3

Adding CSS3

CSS reset:
- Yahoo! UI Library: Reset CSS, http://developer.yahoo.com/yui/reset/
- CSS Reset Reloaded, http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
- HTML5 ★ BOILERPLATE: A ROCK-SOLID DEFAULT FOR HTML5 AWESOME. http://html5boilerplate.com/
- * { margin: 0; padding: 0; } | bad practice (vsak tag (load time), default submit buttons)

V glavo (<head></head>) dodamo:

	
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/sedovsek.css">

CSS styling, yaay!

	
body { border-top: 10px solid #72c0d4; background-color: #ffffff; }
div#container { margin: 5px auto; width: 80%; padding: 20px; }

/*common*/
.clear { clear: both; }

.left  { float: left; }
.right { float: right; }

.blue { color: #006699; }

b, strong { font-weight: bold; }
i { font-style: italic; }

.shadow { -moz-box-shadow: 0 6px 8px #aaa; -webkit-box-shadow: 0 6px 8px #aaa; box-shadow: 0px 6px 8px #aaa; }
.border { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

/*sidebar*/
.sidebar {
	float: left;
	width: 31.875%;
}

.sidebar h1 {
	font-weight: bold;
	font-size: 18px;
	font-family: "Palatino Linotype", Georgia, serif;
	margin: 20px 0 0 0;
}

.sidebar strong { display: block; font-size: 13px; font-weight: normal; }

ul.nav {
	list-style: none;
	float: left;
	border-top: 1px solid #888583;
	margin: 5px auto 0;
	width: 64.379%;
}

ul.nav a {
	font-weight: bold;
	font-size: 12px;
	font-family: "Palatino Linotype", Georgia, serif;
	display: block;
	text-align: left;
	letter-spacing: 0.1em;
	padding: 1.3em 0.5em 0.5em;
	text-transform: uppercase;
}

img.personal_photo { margin: 25px 0 5px 25px; border: 8px solid #ebebeb; 
	-webkit-transform: rotate(1.3deg);
	-moz-transform: rotate(1.3deg);
	-o-transform: rotate(1.3deg);
}

span.photo_ref { text-align: center; font-size: 0.7em; padding-left: 20px; display: block; margin-bottom: 20px; }

#content {
	float: right;
	width: 65.9375%;
	background-color: #f7f7f7;
	-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	font-size: 120%;
	line-height: 180%;
	font-family: Cambria, Georgia, serif;
	margin-bottom: 100px;
}

.info { padding: 20px; }
.info h2:first-child { margin-top: 20px; }
.info h2 { font: bold 20px/1.2 "Book Antiqua", "Palatino Linotype", Georgia, serif;
	margin: 120px 0 5px 0;
	border-bottom: 1px solid grey;
}
.info h2.yql { margin-top: 20px; }

ul.lists li { font-size: 1em; line-height: 1.6em; }
dl.lists { font-size: 1em; line-height: 1.6em; }
dl.lists dt { margin: 20px 0 0 0; font-weight: bold; }
dl.lists dt.first { margin-top: 10px; }
dl.lists dd { margin-left: 20px; }

/*footer*/
footer { border-top: 1px solid #72c0d4; font-weight: normal; color: #006699; margin: 10px 0 20px 0; padding-top: 10px; clear: both; line-height: 150%; text-align: justify; }
div.footer a { font-weight: bold; color: #72c0d4; }
div.footer a:hover { color: #fc4085; }
p.small { font-weight: normal; color: #666666; font-size: 0.82em; }


/*chapter08 - YQL*/
ul.flickr_pics { list-style: none; margin-left: 0; }
ul.flickr_pics li { float: left; }
ul.flickr_pics li img { margin: 5px; }

div.tweet { margin: 5px 0 5px 0; width: 100%; height: 50px; border-bottom: 1px solid #888583; clear: both; }
div#twitter_yql img { float: left; margin-right: 10px; }
div#twitter_yql p   { display: inline; vertical-align: top; }

Robi malenkost pokomentira 100 zgornjih vrstic!

So far, so good?

na začetek oziroma naprej na Chapter: Timeout - Coffee break http://html5boilerplate.com/

Coffee break

na začetek oziroma naprej na Chapter: Playing JavaScript the jQuery way - add smoothness/exploring (other) features

Playing JavaScript with jQuery

jQuery: write less, do more. http://jquery.com/

Dokumentacija je najboljše čtivo, http://docs.jquery.com/Main_Page

Dodamo onclick event.

	
<li><a href="#home" onclick="scroll_to('home');">Personal info</li>
<li><a href="#edu" onclick="scroll_to('edu');">Education</li>
<li><a href="#skills" onclick="scroll_to('skills');">Skills/Projects</li>
<li><a href="#contact" onclick="scroll_to('contact');">Contact</li>

Napišemo jQuery funkcijo, ki smo jo navedli zgoraj

	
<script type="text/javascript">
	function scroll_to(id) {
		$('html,body').animate({scrollTop: $("#"+id).offset().top}, 'slow');
	}
</script>

FadeIn, FadeOut, selectors, spreminjanje stila, dodajanje.

	
<script type="text/javascript">
	function display(id) {
		if (($("div#data_"+id).is(":visible")) == false) {
			$("div[id^='data_']").hide();
			$("div#data_"+id).fadeIn("slow");
			
			$("a#"+id).append("weee");
			$("a#"+id).css("color", "red");
		}
	}
</script>

So far, so good? or better?

na začetek oziroma naprej na Chapter: Rich typography with Google Fonts

Rich typography with Google Fonts

http://www.typotheque.com/fonts
http://www.webfontsgallery.com/
http://fontsinuse.com/

Google web Fonts, http://www.google.com/webfonts

V glavo (<head></head>) pot do izbranega fonta:

	
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

Prav tako dodamo v glavo, ali ločeno CSS datoteko stil za :

	
<style>
	#sidebar h1, .info h2 { font-family: 'Ubuntu', Arial, serif; font-size: 22px; }
</style>

So far, so good?

na začetek oziroma naprej na Chapter: Being social - Facebook like & Twitter tweet

We be social

Na smiselno mesto umestimo Facebook Like, Twitter tweet gumb, ali oboje.

facebook developers, http://developers.facebook.com/docs/reference/plugins/like/
tweet button, http://twitter.com/about/resources/tweetbutton

	
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://galjot.si/ArenaZnanja/" show_faces="true" width="450" font=""></fb:like>
<hr/>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="sedovsek">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Za lepši prikaz naše strani v Facebook feedu, dodamo v glavo (<head></head>) open graph metadata:

	
<meta property="og:image" content="http://galjot.si/ArenaZnanja/images/robert.jpg"/>

So far, so good?

na začetek oziroma naprej na Chapter: Advance mode simplified - YQL

Advance mode simplified - YQL

API, Application programming interface

http://www.programmableweb.com/
Flickr API, Twitter API, Facebook Developers, Foursquare API, LastFM API, etc.
Yahoo! Query Language, http://developer.yahoo.com/yql/

Pripravimo prazne div tag-e:

	
<h2 class="yql">My flick photos</h2>
<div id="flickr_personal" style="display: table;"></div>

<h2 class="yql">I love photography</h2>
<div id="flickr_interesting" style="display: table;"></div>

<h2 class="yql">My Tweets</h2>
<div id="twitter_yql" style="display: table;"></div>

Opcija A:

	
<!--yql flickr interesting-->
<!-- select * from flickr.photos.interestingness(20) -->
<script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.interestingness(20)&format=json&diagnostics=true&callback=fetch_flickr_interesting"></script>

<!--yql flickr personal-->
<!-- select * from flickr.people.publicphotos WHERE user_id = '68467705@N00' LIMIT 20 -->
<script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.people.publicphotos%20WHERE%20user_id%20%3D%20'68467705%40N00'%20LIMIT%2020&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=fetch_flickr"></script>

<script type="text/javascript">
function fetch_flickr(data) {
	if (data.query.results) {
		var out = "<ul class='flickr_pics'>";
		
		var photos = data.query.results.photo;
		for (var i=0, j = photos.length; i < j; i++) {
			out += '<li><a href="http://www.flickr.com/photos/seddy/'+ photos[i].id +'/" title="' + photos[i].title +'" target="_blank"><img src="http://farm' + photos[i].farm + '.static.flickr.com/' + photos[i].server + '/' + photos[i].id + '_' + photos[i].secret + '_s.jpg" alt="' + photos[i].title +'" width="62" height="62" /></a></li>';
		}
		
		out += "</ul>";
	}
	$("div#flickr_personal").html(out);
}

function fetch_flickr_interesting(data) {
	if (data.query.results) {
		var out = "<ul class='flickr_pics'>";
		
		var photos = data.query.results.photo;
		for (var i=0, j = photos.length; i < j; i++) {
			out += '<li><a href="http://www.flickr.com/photos/' + photos[i].owner + '/' + photos[i].id + '/" target="_blank"><img src="http://farm' + photos[i].farm + '.static.flickr.com/' + photos[i].server + '/' + photos[i].id + '_' + photos[i].secret + '_s.jpg" alt="' + photos[i].title +'" width="62" height="62" /></a></li>';
		}
		
		out += "</ul>";
	}
	$("div#flickr_interesting").html(out);
}
</script>

Opcija B:

	
<script type="text/javascript">
	$(window).ready(function() {
		twitter_yql();
	});
	
	function twitter_yql() {
		$.getJSON(
			"http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20twitter.search%20where%20q%3D'Ljubljana'%20LIMIT%205%3B&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
			function(data) {
				$.each(data.query.results.results, function(j, item) {
					$("#twitter_yql").append("<div class='tweet'>");
					$("<img/>").attr("src", item.profile_image_url).appendTo("#twitter_yql");
					$("div#twitter_yql").append("<p>"+item.text+"</p>");
					$("#twitter_yql").append("</div>");
				});
		});
	}
</script>

So far, so good?

na začetek oziroma naprej na Chapter: Q&A & Finish

Q&A, Beer & GoHome2Code

na začetek oziroma naprej na