Basic prototype for PlovdivConf

This commit is contained in:
Petko Bordjukov 2014-05-13 07:27:47 +03:00
commit d549e10af3
8 changed files with 540 additions and 0 deletions

32
background.css Normal file
View File

@ -0,0 +1,32 @@
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body,
.reveal,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
font-family: "Roboto Condensed", tahoma, verdana, arial, sans-serif;
}
#background_video {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -10000;
opacity: 0.2;
}
.reveal section img {
border: none;
Background: none;
box-shadow: none;
}

BIN
background.mp4 Normal file

Binary file not shown.

BIN
cropped-background.mp4 Normal file

Binary file not shown.

98
index.html Normal file
View File

@ -0,0 +1,98 @@
<html>
<head>
<title>The IT Tour</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/css/reveal.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/css/theme/night.css">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,300,400italic,400,700italic,700&subset=latin,cyrillic">
<link rel="stylesheet" type="text/css" href="background.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/lib/js/head.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/js/reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/lang/bg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.7/ractive.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="schedule.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
</div>
</div>
<video id="background_video" src="cropped-background.mp4" loop autoplay />
<script id="agenda_template" type="text/ractive">
<section id="agenda">
<table class="reveal">
<thead>
<tr>
<th>
Час
</th>
<th>
Лекция
</th>
</tr>
</thead>
<tbody>
{{#agenda}}
<tr>
<td>{{startTime.format('HH:mm')}}</td>
<td>{{title}}</td>
</tr>
{{/agenda}}
</tbody>
</table>
</section>
</script>
<script id="next_lecture_template" type="text/reactive">
<section id="next-lecture">
<h3>Следва</h3>
<h1>{{event.title}}</h1>
<p>{{event.description}}</p>
<h4>({{event.startTime.fromNow()}})</h4>
</section>
</script>
<script id="next_lecturer_template" type="text/reactive">
<section id="next-lecturer">
<h3>Лектор</h3>
<h1>{{event.lecturer.name}}</h1>
<p>{{event.lecturer.description}}</p>
</section>
</script>
<script id="slides_template" type="text/ractive">
<section data-state="update-safe">
<img src="logo.svg">
</section>
{{#agenda.length}}
{{> agenda_template}}
{{/agenda.length}}
{{#event}}
{{> next_lecture_template}}
{{/event}}
{{#event.lecturer}}
{{> next_lecturer_template}}
{{/event.lecturer}}
<section>
<h1>#PlovdivConf</h1>
<a class="twitter-timeline" href="https://twitter.com/search?q=%23PlovdivConf" data-widget-id="466029214940925952">Tweets about "#PlovdivConf"</a>
<script src="https://platform.twitter.com/widgets.js" id="twitter-wjs"></script>
</section>
</script>
<script type="text/javascript" src="reactive-init.js"></script>
<script type="text/javascript" src="reveal-init.js"></script>
</body>
</html>

203
logo.svg Normal file
View File

@ -0,0 +1,203 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="679.98798"
height="679.98798"
id="svg5734"
inkscape:version="0.48.4 r9939"
sodipodi:docname="logo.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="718"
id="namedview36"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.22425739"
inkscape:cx="-165.28175"
inkscape:cy="153.80692"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg5734" />
<title
id="title6393">PlovdivConf Logo</title>
<defs
id="defs5736">
<color-profile
xlink:href="/usr/share/color/icc/colord/AdobeRGB1998.icc"
name="Compatible-with-Adobe-RGB--1998-"
id="color-profile5742" />
<clipPath
id="clipPath3298">
<path
d="m 0,858.897 612.288,0 L 612.288,0 0,0 0,858.897 z"
id="path3300"
inkscape:connector-curvature="0" />
</clipPath>
</defs>
<metadata
id="metadata5739">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>PlovdivConf Logo</dc:title>
<cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="translate(-32.053254,-186.18711)">
<path
d="m 780,586.64789 a 300,300 0 1 1 -600,0 300,300 0 1 1 600,0 z"
transform="matrix(1.1333133,0,0,1.1333133,-171.94314,-138.67476)"
id="path5744"
style="fill:#19834b;fill-opacity:1;stroke-width:0.08823685;stroke-miterlimit:4;stroke-dasharray:none"
inkscape:connector-curvature="0" />
<path
d="m -665.71426,323.79074 a 371.42857,371.42857 0 1 1 -742.85714,0 371.42857,371.42857 0 1 1 742.85714,0 z"
transform="matrix(0.88451868,0,0,0.88451868,1289.4194,239.78213)"
id="path6397"
style="fill:#eda138;fill-opacity:1;stroke-width:0.11305584;stroke-miterlimit:4;stroke-dasharray:none"
inkscape:connector-curvature="0" />
<path
d="m -705.71431,183.79076 a 185.71429,185.71429 0 1 1 -371.42859,0 185.71429,185.71429 0 1 1 371.42859,0 z"
transform="matrix(1.6896628,0,0,1.6896628,1878.261,215.63669)"
id="path6401"
style="fill:#19834b;fill-opacity:1;stroke-width:0.05918341;stroke-miterlimit:4;stroke-dasharray:none"
inkscape:connector-curvature="0" />
<path
d="m -380,315.21933 a 274.28571,274.28571 0 1 1 -548.57141,0 274.28571,274.28571 0 1 1 548.57141,0 z"
transform="matrix(0.8246219,0,0,0.8246219,911.58556,266.24433)"
id="path6403"
style="fill:#eda138;fill-opacity:1;stroke-width:0.1212677;stroke-miterlimit:4;stroke-dasharray:none"
inkscape:connector-curvature="0" />
<g
transform="translate(-787.95273,503.53317)"
id="hills"
style="fill:#19834b;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none">
<title
id="title6391">Hills</title>
<path
d="m 1054.4091,4.511685 c 23.4625,-26.13875 44.3688,-49.9375 65.84,-73.21375 18.6588,-20.22375 44.8113,-20.83875 64.4113,-1.94375 25.02,24.10875 49.8512,48.42 74.7612,72.64875 -0.565,0.8325 -1.1275,1.67125 -1.6925,2.50875 l -203.32,0 z"
id="hill2"
style="fill:#19834b;fill-opacity:1;fill-rule:evenodd;stroke:none"
inkscape:connector-curvature="0">
<title
id="title6363">Hill 2</title>
</path>
<path
d="m 1067.0103,37.178935 c -10.4887,13.03625 -19.9762,25.3175 -30.1012,37.05375 -2.2113,2.5675 -6.6301,4.44125 -10.0813,4.51875 -18.285,0.41375 -36.575,0.18375 -54.87125,0.05375 -1.38125,-0.01 -2.75375,-0.97875 -5.84,-2.15625 4.045,-4.3875 7.2825,-7.915 10.5275,-11.43 10.81,-11.76 21.27375,-23.865 32.51245,-35.20375 16.6525,-16.79875 29.7988,-17.10875 47.8925,-1.9875 2.9663,2.4825 5.7113,5.2325 9.9613,9.15125"
id="hill4"
style="fill:#19834b;fill-opacity:1;fill-rule:evenodd;stroke:none"
inkscape:connector-curvature="0">
<title
id="title6367">Hill 4</title>
</path>
<path
d="m 1295.1036,96.01681 -166.3363,0 c 13.9175,-19.77 26.7976,-38.5625 40.2663,-56.91625 4.7413,-6.46625 9.945,-13.56 16.6387,-17.425 16.7338,-9.6625 32.1288,-7.62 45.9051,6.385 21.2462,21.605 41.4524,44.2325 63.5262,67.95625"
id="hill6"
style="fill:#19834b;fill-opacity:1;fill-rule:evenodd;stroke:none"
inkscape:connector-curvature="0">
<title
id="title6371">Hill 6</title>
</path>
<path
d="m 1156.5172,46.88356 c -11.665,16.02625 -22.5287,31.23 -33.7863,46.145 -1.6762,2.22625 -5.1287,4.38125 -7.7849,4.4025 -28.3163,0.32125 -56.6438,0.2025 -84.9613,0.2025 -0.4287,-1.41 -0.8537,-2.825 -1.2837,-4.22875 18.5825,-22.42875 35.9962,-45.955 56.1262,-66.89 14.9363,-15.54625 33.8375,-13.75 51.6588,1.07125 6.58,5.47125 12.39,11.88375 20.0312,19.2975"
id="hill5"
style="fill:#19834b;fill-opacity:1;fill-rule:evenodd;stroke:none"
inkscape:connector-curvature="0">
<title
id="title6369">Hill 5</title>
</path>
<path
d="m 1111.6576,-67.85894 c -15.4375,16.95625 -30.3625,33.4825 -45.5125,49.8025 -1.665,1.785 -4.5825,3.3525 -6.9512,3.39125 -17.1513,0.2875 -34.305,0.1575 -54.1138,0.1575 5.0462,-5.4325 8.58,-9.1175 11.9863,-12.91125 12.2437,-13.66375 24.1212,-27.66875 36.7487,-40.9675 17.2988,-18.225 40.13,-18.33375 57.8425,0.5275"
id="hill1"
style="fill:#19834b;fill-opacity:1;fill-rule:evenodd;stroke:none"
inkscape:connector-curvature="0">
<title
id="title6361">Hill 1</title>
</path>
<path
d="m 1196.4891,-67.504815 c 15.5575,16.8475 36.1763,33.27 51.44,49.48 1.6775,1.775 4.6063,3.32125 6.975,3.3425 17.145,0.16375 28.725,-0.0875 48.535,-0.22875 -5.0862,-5.39375 -8.6462,-9.05125 -12.0762,-12.82375 -12.3413,-13.57625 -24.3163,-27.495 -37.0313,-40.70625 -17.43,-18.105 -40.26,-18.05 -57.8425,0.93625"
id="hill3"
style="fill:#19834b;fill-opacity:1;fill-rule:evenodd;stroke:none"
inkscape:connector-curvature="0">
<title
id="title6365">Hill 3</title>
</path>
<path
d="m 1253.1334,40.12331 c 10.4913,13.0425 19.8312,22.3725 29.9562,34.10875 2.2101,2.56875 6.6313,4.4425 10.08,4.51875 18.2863,0.41375 36.5763,0.185 54.8726,0.05375 1.3825,-0.01 2.7537,-0.97875 5.8412,-2.155 -4.0463,-4.3875 -7.285,-7.915 -10.53,-11.43125 -10.81,-11.75875 -21.2725,-23.865 -32.5125,-35.20375 -16.6525,-16.7975 -29.7987,-17.1075 -47.8912,-1.9875 -2.9675,2.48375 -8.0238,8.7875 -9.8163,12.09625"
id="hill7"
style="fill:#19834b;fill-opacity:1;fill-rule:evenodd;stroke:none"
inkscape:connector-curvature="0">
<title
id="title6373">Hill 7</title>
</path>
</g>
<path
d="m 246.30542,369.50504 a 105.59114,105.59114 0 1 1 -211.182282,0 105.59114,105.59114 0 1 1 211.182282,0 z"
transform="matrix(2.2820379,0,0,2.2820379,50.931923,-317.0434)"
id="path6530"
style="fill:none;stroke:none"
inkscape:connector-curvature="0" />
<text
transform="matrix(-0.90278536,-0.43009137,0.43009137,-0.90278536,480.44259,1161.6142)"
id="text6556"
xml:space="preserve"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:-1.80000007px;word-spacing:0px;fill:#eda138;fill-opacity:1;stroke:none;font-family:Back In The USSR DL;-inkscape-font-specification:Back In The USSR DL"
sodipodi:linespacing="125%"><textPath
xlink:href="#path6530"
id="textPath6560"
style="font-size:78px;letter-spacing:-1.80000007px;fill:#eda138;fill-opacity:1">PLOVDIV CONF</textPath></text>
<text
transform="matrix(-0.30657075,0.95184786,-0.95184786,-0.30657075,986.77285,334.49)"
id="text6570"
xml:space="preserve"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:4.74000168px;word-spacing:0px;fill:#eda138;fill-opacity:1;stroke:none;font-family:Back In The USSR DL;-inkscape-font-specification:Back In The USSR DL"
sodipodi:linespacing="125%"><textPath
xlink:href="#path6577"
id="textPath6579"
style="font-size:78px;letter-spacing:4.74000168px;fill:#eda138;fill-opacity:1">2014</textPath></text>
<path
d="m 246.30542,369.50504 a 105.59114,105.59114 0 1 1 -211.182282,0 105.59114,105.59114 0 1 1 211.182282,0 z"
transform="matrix(2.8292625,0,0,-2.8292625,-25.950433,1573.4098)"
id="path6577"
style="fill:none;stroke:none"
inkscape:connector-curvature="0" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.9 KiB

15
reactive-init.js Normal file
View File

@ -0,0 +1,15 @@
var reactive = new Ractive({
// The `el` option can be a node, an ID, or a CSS selector.
el: '.slides',
// We could pass in a string, but for the sake of convenience
// we're passing the ID of the script tag above.
template: '#slides_template',
// Here, we're passing in some initial data
data: {event: schedule.nextEvent(), agenda: schedule.getEvents()}
});
function refreshEvent() {
reactive.set({event: schedule.nextEvent(), agenda: schedule.getEvents()});
}

71
reveal-init.js Normal file
View File

@ -0,0 +1,71 @@
Reveal.initialize({
// Display controls in the bottom right corner
controls: false,
// Display a presentation progress bar
progress: false,
// Display the page number of the current slide
slideNumber: false,
// Push each slide change to the browser history
history: false,
// Enable keyboard shortcuts for navigation
keyboard: true,
// Enable the slide overview mode
overview: true,
// Vertical centering of slides
center: true,
// Enables touch navigation on devices with touch input
touch: true,
// Loop the presentation
loop: true,
// Change the presentation direction to be RTL
rtl: false,
// Turns fragments on and off globally
fragments: true,
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded: false,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: 10000,
// Stop auto-sliding after user input
autoSlideStoppable: true,
// Enable slide navigation via mouse wheel
mouseWheel: false,
// Hides the address bar on mobile devices
hideAddressBar: true,
// Opens links in an iframe preview overlay
previewLinks: false,
// Transition style
transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
// Transition speed
transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/none/slide/concave/convex/zoom
// Number of slides away from the current that are visible
viewDistance: 3
});
Reveal.addEventListener('update-safe', function() {
refreshEvent();
});

121
schedule.js Normal file
View File

@ -0,0 +1,121 @@
function Schedule() {
var events = [];
this.addEvent = function(event) {
events.push(event);
events = _.sortBy(events, function(event) {
return event.startTime.unix()
});
}
this.upcomingEvents = function() {
return _.select(events, function(event) {
return event.startTime.isAfter(moment());
});
}
this.nextEvent = function() {
return _.first(this.upcomingEvents());
}
this.getEvents = function() {
return events;
}
this.addDelay = function(time) {
_.each(this.upcomingEvents(), function(event, index, agenda) {
event.startTime.add(time);
});
}
}
var schedule = new Schedule();
schedule.addEvent({
title: 'Откриване',
startTime: moment({hour: 10})
});
schedule.addEvent({
title: 'За смъртта на TDD',
startTime: moment({hour: 11}),
lecturer: {
name: 'Стефан Кънев',
description: 'Стефан се занимава с програмиране откакто се помни. Сред любимите му неща са Ruby, Vim, автоматизирани тестове, папийонки, Apple продуктите и всевъзможни екзотични езици за програмиране. В заетото си време програмира на Rails, а в свободното - води един-два курса във ФМИ към СУ, пише много код, който после трие и се опитва да не се нарани с планинското си колело. Никак не обича PHP и е амбивалентен към Java.'
}
});
schedule.addEvent({
title: 'Компютърни игри за независими разработчици',
startTime: moment({hour: 10, minute: 10}),
lecturer: {
name: 'Стефан Ставрев',
description: 'Собственик и управител на TRI Soft. С над 3 години опит в проектирането и разработването на интелигентни системи и игри, и трудов стаж в научната компания TNO - основен партньор на Холандското министерство на отбраната. Понастоящем Стефан се занимава с разработката на иновативни автономни системи, компютърно зрение, разпознаване на лица и разработване на игри и интерактивни архитектурни визуализации в реално време. Изкуствен интелект и модерните технологии за него са не просто академични дисциплини, а и начин на мислене. В свободното си време обича да преподава. Води избираеми курсове в Пловдивския университет „Паисий Хилендарски“.'
}
});
schedule.addEvent({
title: 'Angular JS',
startTime: moment({hour: 11, minute: 50}),
lecturer: {
name: 'Радослав Станков',
description: 'Организатор на VarnaConf. Работи като developer от повече от 10 години. В момента основно разработва с Ruby, JavaScript и Objective-C. Участвал е в доста open-source проекти. Голяма част от тях могат да бъдат намерени в неговия Github акаунт.'
}
});
schedule.addEvent({
title: 'Обяд',
startTime: moment({hour: 12, minute: 30})
});
schedule.addEvent({
title: 'Lightning Talks',
startTime: moment({hour: 13, minute: 30})
});
schedule.addEvent({
title: 'Защо трябва да обичаме Haskell?',
startTime: moment({hour: 14, minute: 30}),
lecturer: {
name: 'Радослав Георгиев',
description: 'Радо, по-известен като РадоРадо, е предприемач-програмист (това е като warrior-mage), който се интересува от всичко свързано с технологии, разработка на софтуер, преподаване, автоматизиране и подобряване на образованието. Организатор на HackFMI - ежесеместърен хакатон във ФМИ (София), където млади и надъхани студенти и ученици, заменят комфорт и сън в името на създаване на софтуерни продукти, в рамките на 3 дни. В свободното си време се занимава с езици за функционално програмиране.'
}
});
schedule.addEvent({
title: 'Тенденции в потребителското изживяване',
startTime: moment({hour: 15, minute: 20}),
lecturer: {
name: 'Теодор Лазаров',
description: 'Теодор е управител маркетинг и реклама в TRI Soft. С над 9 години опит в областа на дизайна и рекламата. Интересува се постоянно от новите тенденции и добри практики в тази област. Работи усилено за потребителското изживяване ( UX ). Перфекционалист в работата си, обича да изпипва детайлите до съвършенство. Работил е с големи компании като Българо-Американска кредитна банка, Пампорово - АД, Корпоративна Търговска банка, адвокатска кантора SV-lawyers, рекламна агенция Megaboards и др. Теодор има и много голям интерес към продуктовия дизайн - нещо, на което производителите рядко обръщат внимание в България.'
}
});
schedule.addEvent({
title: 'Кафе пауза',
startTime: moment({hour: 16, minute: 00})
});
schedule.addEvent({
title: 'IT инфраструктура - що е то',
startTime: moment({hour: 16, minute: 30}),
lecturer: {
name: 'Боян Кроснов',
description: 'Собственик на Правец 82 (1987). Състезател - BOI, IOI. CCIE. Живял и работил в 5 държави. Съосновател на StorPool. Силни страни: Мрежи, x86 неща, datacenter неща, разпределени архитектури, мениджмънт на софтуерни продукти и предприемачество. Текуща изследователска дейност: екзотични системи и програмни езици, статии и лекции на тема съхранение на данни и стартъпи. Поведение на твърди дискове и SSD, оценяване на производителността на системи.'
}
});
schedule.addEvent({
title: 'Клъстеризация и Класификация',
startTime: moment({hour: 17, minute: 20}),
lecturer: {
name: 'Екатерина Михайлова',
description: 'Катя се занимава с програмиране от училище, като състезател по информатика. Била е стажант в Google, а в момента се занимава с компютърна лингвистика. Интересите ѝ включват машинно самообучение, лингвистика.'
}
});
schedule.addEvent({
title: 'Закриване',
startTime: moment({hour: 18, minute: 00})
});