cezetmap - mapa Čr jako vektorové písmo
DESCRIPTION
Prezentace Cezetmap - Mapa ČR jako vektorové písmoTRANSCRIPT
![Page 1: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/1.jpg)
pátek, 8. března 13
![Page 2: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/2.jpg)
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
![Page 3: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/3.jpg)
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
![Page 4: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/4.jpg)
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
![Page 5: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/5.jpg)
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
![Page 6: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/6.jpg)
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
![Page 7: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/7.jpg)
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
![Page 8: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/8.jpg)
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
![Page 9: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/9.jpg)
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
![Page 10: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/10.jpg)
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
![Page 11: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/11.jpg)
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
![Page 12: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/12.jpg)
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
![Page 13: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/13.jpg)
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
![Page 14: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/14.jpg)
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
![Page 15: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/15.jpg)
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
![Page 16: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/16.jpg)
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
![Page 17: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/17.jpg)
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
![Page 18: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/18.jpg)
pátek, 8. března 13
![Page 19: Cezetmap - Mapa ČR jako vektorové písmo](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559452311a28abd34f8b466f/html5/thumbnails/19.jpg)
www.cezetmap.cz
@cezetmap
pátek, 8. března 13