CEZET Map - Představení projektu

CEZET Map - Představení projektu

11.3.2013 - Netdevelo Academy

69616d8fda5467f9c84fc141725fbf7c?s=128

Tomáš Musiol

March 12, 2013
Tweet

Transcript

  1. None
  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>
  17. None
  18. None
  19. www.cezetmap.cz @cezetmap