pátek, 8. března 13

Kdo jsme?

• Jaromír Kavan - Grafika• Tomáš Musiol - Kodování a koncept• Patrik Illy - Nápady a připomínky• Moravio - Podpora :)

pátek, 8. března 13

Co je CEZET Map?

• Mapa ČR jako vektorové písmo• Jednotlivé kraje jsou samostatné písmena• Jednoduché změny barev a rozměrů• Databáze s polohou 110 největších měst ČR

• OSS - Creative Commons Licence CC BY• Dostupné na GitHubu

pátek, 8. března 13

Proč CEZET Map vzniklo?

• Časová náročnost a pracnost tradičního postupu• HTML AREA tag = WTF• Responsivní přístup k tvorbě webu• HD zařízení (Retina)• Optimalizace webu (rychlost, velikost, requesty)• Moderní technologie

pátek, 8. března 13

Použité technologie

• HTML - Skturktura• CSS3 - Stylování• SVG - Vektorové podklady pro tvorbu písma• Font face - Jádro projektu• jQuery - Interaktivní události

pátek, 8. března 13

HTML AREA tag = WTF

<AREA class = "area" rel = "regionEurope" data-startregion = "state_31" SHAPE = "poly" ALT = "Evropa" COORDS = "422,133, ... 426,131" HREF = "#" ONMOUSEOVER = "changeImages('mapa_zaklad_01', 'state1.gif'); return true;" ONMOUSEOUT = "changeImages('mapa_zaklad_01', 'state2.gif'); return true;"

pátek, 8. března 13

HTML AREA tag = WTF

<AREA class = "area" rel = "regionEurope" data-startregion = "state_31" SHAPE = "poly" ALT = "Evropa" COORDS = "422,133, ... 426,131" HREF = "#" ONMOUSEOVER = "changeImages('mapa_zaklad_01', 'state1.gif'); return true;" ONMOUSEOUT = "changeImages('mapa_zaklad_01', 'state2.gif'); return true;"

<AREA

pátek, 8. března 13

HTML AREA tag = WTF

<AREA class = "area" rel = "regionEurope" data-startregion = "state_31" SHAPE = "poly" ALT = "Evropa" COORDS = "422,133, ... 426,131" HREF = "#" ONMOUSEOVER = "changeImages('mapa_zaklad_01', 'state1.gif'); return true;" ONMOUSEOUT = "changeImages('mapa_zaklad_01', 'state2.gif'); return true;"

"422,133, ... 426,131"

<AREA

pátek, 8. března 13

HTML AREA tag = WTF

<AREA class = "area" rel = "regionEurope" data-startregion = "state_31" SHAPE = "poly" ALT = "Evropa" COORDS = "422,133, ... 426,131" HREF = "#" ONMOUSEOVER = "changeImages('mapa_zaklad_01', 'state1.gif'); return true;" ONMOUSEOUT = "changeImages('mapa_zaklad_01', 'state2.gif'); return true;"

"422,133, ... 426,131"

<AREA

ONMOUSEOVER = "changeImages('mapa_zaklad_01', 'state1.gif'); return true;"ONMOUSEOUT = "changeImages('mapa_zaklad_01', 'state2.gif'); return true;"

pátek, 8. března 13

HTML

<div class="cezetmap">

<ul class="kraje"><li class="kraj moravskoslezsky">

<a href="?kraj=moravskoslezsky">Moravskoslezský kraj</a></li>

</ul>

<ul class="mesta"><li class="mesto ostrava">

<a href="?mesto=ostrava">Ostrava</a></li>

</ul>

</div> <!-- /cezetmap -->

pátek, 8. března 13

HTML

<div class="cezetmap">

<ul class="kraje"><li class="kraj moravskoslezsky">

<a href="?kraj=moravskoslezsky">Moravskoslezský kraj</a></li>

</ul>

<ul class="mesta"><li class="mesto ostrava">

<a href="?mesto=ostrava">Ostrava</a></li>

</ul>

</div> <!-- /cezetmap -->

<div class="cezetmap">

</div>

pátek, 8. března 13

HTML

<div class="cezetmap">

<ul class="kraje"><li class="kraj moravskoslezsky">

<a href="?kraj=moravskoslezsky">Moravskoslezský kraj</a></li>

</ul>

<ul class="mesta"><li class="mesto ostrava">

<a href="?mesto=ostrava">Ostrava</a></li>

</ul>

</div> <!-- /cezetmap -->

<ul class="kraje">

<div class="cezetmap">

</div>

pátek, 8. března 13

HTML

<div class="cezetmap">

<ul class="kraje"><li class="kraj moravskoslezsky">

<a href="?kraj=moravskoslezsky">Moravskoslezský kraj</a></li>

</ul>

<ul class="mesta"><li class="mesto ostrava">

<a href="?mesto=ostrava">Ostrava</a></li>

</ul>

</div> <!-- /cezetmap -->

<ul class="kraje">

<ul class="mesta">

<div class="cezetmap">

</div>

pátek, 8. března 13

CSS a JS

<link rel="stylesheet" href="cezetmap/css/cezetmap.css" /><link rel="stylesheet" href="cezetmap/css/cezetmap.custom.css" />

<!-- jQuery --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>

<!-- podpora pro IE 7 a mensi --><!--[if lt IE 8]> <script src="IE8.js"> </script> <![endif]-->

<!-- CEZET Map skripty --><script src="cezetmap/js/cezetmap.js"> </script>

pátek, 8. března 13

CSS a JS

<link rel="stylesheet" href="cezetmap/css/cezetmap.css" /><link rel="stylesheet" href="cezetmap/css/cezetmap.custom.css" />

<!-- jQuery --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>

<!-- podpora pro IE 7 a mensi --><!--[if lt IE 8]> <script src="IE8.js"> </script> <![endif]-->

<!-- CEZET Map skripty --><script src="cezetmap/js/cezetmap.js"> </script>

<link rel="stylesheet" href="cezetmap/css/cezetmap.css" />

pátek, 8. března 13

CSS a JS

<link rel="stylesheet" href="cezetmap/css/cezetmap.css" /><link rel="stylesheet" href="cezetmap/css/cezetmap.custom.css" />

<!-- jQuery --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>

<!-- podpora pro IE 7 a mensi --><!--[if lt IE 8]> <script src="IE8.js"> </script> <![endif]-->

<!-- CEZET Map skripty --><script src="cezetmap/js/cezetmap.js"> </script>

<link rel="stylesheet" href="cezetmap/css/cezetmap.css" />

jQuery

pátek, 8. března 13

CSS a JS

<link rel="stylesheet" href="cezetmap/css/cezetmap.css" /><link rel="stylesheet" href="cezetmap/css/cezetmap.custom.css" />

<!-- jQuery --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>

<!-- podpora pro IE 7 a mensi --><!--[if lt IE 8]> <script src="IE8.js"> </script> <![endif]-->

<!-- CEZET Map skripty --><script src="cezetmap/js/cezetmap.js"> </script>

<link rel="stylesheet" href="cezetmap/css/cezetmap.css" />

jQuery

<script src="cezetmap/js/cezetmap.js"> </script>

pátek, 8. března 13

pátek, 8. března 13

www.cezetmap.cz

@cezetmap

pátek, 8. března 13