ArenaZnanja: iCanToo

Prikaz razvoja spletne strani s pomočjo sodobnih tehnologij.

Predava: Vigredni Robert Sedovšek, (@sedovsek)

HTML5 from Scratch

Zažljena programska oprema (for syntax highlighting):

  • jEdit,
  • Edit +,
  • BBEdit,
  • Vim,
  • Emacs,
  1. HTML5 Okostje:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <title>ArenaZnanja - iCanToo</title>
    <!--[if IE]>
    <script src=""></script>
    <div id="container">
  2. Glava in navigacija:
    <header class="sidebar">
    	<h1><a href="#">Ime Priimek <strong>dijak/študent/zanesenjak</strong></a></h1>
    		<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>
    	<img class="personal_photo" src="" alt="Robert Sedovsek" width="160" />
    	<span class="photo_ref">
    		<i>Photo taken at the <a target="_blank" href="" title="New Adventures in Web Design">New Adventures in Web Design</a>
    		(Nottingham, UK) by <a target="_blank" href="" title="Nate Croft">Nate Croft</a></i>
  3. 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="" title="Work place">coderoom</a>]</small>.</p>
    		<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>
    			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>.
    		<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>
    		<div id="data_contact">
    			<h2 id="my_contact"><a name="contact">Contact</a></h2>
    			Robert Sedovšek.<br/>
    			Gosposvetska 19<br/>
    			2392 Mežica<br/>
    			twitter: @sedovsek<br/>
  4. Noga:
    	<p class="small">This website is powered by 
    	<a target="_blank" href="" title="jQuery">jQuery</a> 
    	and uses these gorgeous fonts I found in 
    	<a href="" title="Google font directory">Google font directory</a>.
    	Thank you all for sharing!</p>

Ginger kitten

So far, so good?

na začetek oziroma naprej na Chapter: Adding CSS3

Adding CSS3

  1. CSS reset:
    • Yahoo! UI Library: Reset CSS,
    • CSS Reset Reloaded,
    • * { margin: 0; padding: 0; } | bad practice (vsak tag (load time), default submit buttons)
  2. V glavo (<head></head>) dodamo:
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/sedovsek.css">
  3. CSS styling, yaay!
    body { border-top: 10px solid #72c0d4; background-color: #ffffff; }
    div#container { margin: 5px auto; width: 80%; padding: 20px; }
    .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 {
    	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 { 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; }
  4. Robi malenkost pokomentira 100 zgornjih vrstic!
    Beaker Freak

So far, so good?

na začetek oziroma naprej na Chapter: Timeout - Coffee break

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.

Dokumentacija je najboljše čtivo,

  1. 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>
  2. 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');
  3. FadeIn, FadeOut, selectors, spreminjanje stila, dodajanje.
    <script type="text/javascript">
    	function display(id) {
    		if (($("div#data_"+id).is(":visible")) == false) {
    			$("a#"+id).css("color", "red");
moar kitten

So far, so good? or better?

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

Rich typography with Google Fonts

Google web Fonts,

  1. V glavo (<head></head>) pot do izbranega fonta:
    <link href='' rel='stylesheet' type='text/css'>
  2. Prav tako dodamo v glavo, ali ločeno CSS datoteko stil za :
    	#sidebar h1, .info h2 { font-family: 'Ubuntu', Arial, serif; font-size: 22px; }

bush bump

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.

<script src=""></script><fb:like href="" show_faces="true" width="450" font=""></fb:like>
<a href="" class="twitter-share-button" data-count="vertical" data-via="sedovsek">Tweet</a><script type="text/javascript" src=""></script>
Za lepši prikaz naše strani v Facebook feedu, dodamo v glavo (<head></head>) open graph metadata:
<meta property="og:image" content=""/>
pig yay

So far, so good?

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

Advance mode simplified - YQL

API, Application programming interface

  1. 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>
  2. Opcija A:
    <!--yql flickr interesting-->
    <!-- select * from -->
    <script src="*"></script>
    <!--yql flickr personal-->
    <!-- select * from flickr.people.publicphotos WHERE user_id = '68467705@N00' LIMIT 20 -->
    <script src="*%20from%20flickr.people.publicphotos%20WHERE%20user_id%20%3D%20'68467705%40N00'%20LIMIT%2020&format=json&diagnostics=true&"></script>
    <script type="text/javascript">
    function fetch_flickr(data) {
    	if (data.query.results) {
    		var out = "<ul class='flickr_pics'>";
    		var photos =;
    		for (var i=0, j = photos.length; i < j; i++) {
    			out += '<li><a href="'+ photos[i].id +'/" title="' + photos[i].title +'" target="_blank"><img src="http://farm' + photos[i].farm + '' + photos[i].server + '/' + photos[i].id + '_' + photos[i].secret + '_s.jpg" alt="' + photos[i].title +'" width="62" height="62" /></a></li>';
    		out += "</ul>";
    function fetch_flickr_interesting(data) {
    	if (data.query.results) {
    		var out = "<ul class='flickr_pics'>";
    		var photos =;
    		for (var i=0, j = photos.length; i < j; i++) {
    			out += '<li><a href="' + photos[i].owner + '/' + photos[i].id + '/" target="_blank"><img src="http://farm' + photos[i].farm + '' + photos[i].server + '/' + photos[i].id + '_' + photos[i].secret + '_s.jpg" alt="' + photos[i].title +'" width="62" height="62" /></a></li>';
    		out += "</ul>";
  3. Opcija B:
    <script type="text/javascript">
    	$(window).ready(function() {
    	function twitter_yql() {
    			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");

So far, so good?

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

Q&A, Beer & GoHome2Code

question and answer

na začetek oziroma naprej na