CEZET Map - Představení projektu

11.3.2013 - Netdevelo Academy

Transcript

2. 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
3. Proč CEZET Map vzniklo? • Časová náročnost a pracnost tradičního postupu • HTML AREA ta = WTF • Responsivní přístup k tvorbě webu • HD zařízení (Retina) • Optimalizace webu (rychlost, velikost, requesty) • Moderní technolo ie
4. Použité technolo ie • HTML - Skturktura • CSS3 - Stylování • SVG - Vektorové podklady pro tvorbu písma • Font face - Jádro projektu • jQuery - Interaktivní události
5. HTML AREA ta = 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;"
6. HTML AREA ta = 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
7. HTML AREA ta = 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
8. HTML AREA ta = 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;"
9. 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 -->
10. 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>
11. 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>
12. 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>
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>
14. 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" />
15. 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
16. 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>
19. www.cezetmap.cz @cezetmap