cezetmap - mapa Čr jako vektorové písmo
DESCRIPTION
Prezentace Cezetmap - Mapa ČR jako vektorové písmoTRANSCRIPT
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