NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Předělání webu pomocí Bootstrapu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Michal Kuba
Tvůrce
Avatar
Michal Kuba:1.4.2015 23:17

Ahoj!
Hodlám se udělat jeden krok, podle mě docela důležitý, při úpravě webu. Chci, aby stránky byli responzivní a vypadaly pěkně na všech rozlišení displejů, od malých smartphonů přes tablety až k velkým obrazovkám PC. Prohlédl jsem si zdejší tutoriál (http://www.itnetwork.cz/…zivni-design) a prošel si i nějaké informace na w3schools ohledně Mobile first bootstrapu.

Chci se zeptat, jak přesně začít, abych se neubíral složitou a nebo špatnou cestou. Mám nějak zasáhnout samotného HTML kódu a nějak si postupně udělat několik divů a s těmi dále pracovat v CSS či jak?

Nahodím jen zhruba kód hlavní stránky, na které je v osmi políčkách rozděleno kategorie inzerátů a nahoře vodorovné menu, nad ním logo.

<header>

            <img id="logo" src="../img/logo.png">
            <nav>
                <ul>
                    <li><a href="#">Domů</a></li>
                    <li><a href="../../nejnovejsi.php">Nejnovější inzeráty</a></li>
                    <li><a href="kontakt.php">Kontakt</a></li>
                    <li><a href="podat_inzerat.php">Podat inzerát</a></li>
                    <li><a href="prihlaseni.php">Přihlásit se</a></li>
                </ul>
                </nav>

        </header>
<section>

               <table class="polozky"><tr><td class="auto"> <img class="ikony" src="../img/ikony/auto.png">

               <ul>
                   <li><h3>AUTO</h3></li>
                    <li><a href="../kategorie/automobily/osobni_automobily.php">Osobní automobily</a></li>
                    <li><a href="../kategorie/automobily/nakladni_automobily.php">Nákladní automobily</a></li>
                    <li><a href="../kategorie/automobily/dodavky.php">Dodávky</a></li>
                    <li><a href="../kategorie/automobily/privesy.php">Přívěsy</a></li>
                    <li><a href="../kategorie/automobily/nahradni_dily.php">Náhradní díly</a></li>
                    <li><a href="../kategorie/automobily/automobily_jine.php">Jiné</a></li>
               </ul></td>
               <td class="moto">  <img class="ikony" src="../img/ikony/motorka.png">
               <ul>
                   <li><h3>MOTO</h3></li>
                    <li><a href="../kategorie/moto/motorky.php">Motorky</a></li>
                    <li><a href="../kategorie/moto/ctyrkolky.php">Čtyřkolky</a></li>
                   <li><a href="../kategorie/moto/trikolky.php">Tříkolky</a></li>
                    <li><a href="../kategorie/moto/nahradni_dily.php">Náhradní díly</a></li>
                    <li><a href="../kategorie/moto/prislusenstvi.php">Příslušenství</a></li>
                    <li><a href="../kategorie/moto/jine.php">Jiné</a></li>

               </ul></td>
                   <td class="prace"><img class="ikony" src="../img/ikony/prace.png">
               <ul>
                   <li><h3>PRÁCE</h3></li>
                    <li><a href="../kategorie/prace/nabidky_prace.php">Nabídky práce</a></li>
                    <li><a href="../kategorie/prace/poptavky.php">Poptávky</a></li>
                    <li><a href="../kategorie/prace/brigady.php">Brigády</a></li>
                    <li><a href="../kategorie/prace/zahranicni_prace.php">Zahraniční práce</a></li>
                    <li><a href="../kategorie/prace/urady_prace.php">Úřady práce</a></li>
                    <li><a href="../kategorie/prace/jine.php">Jiné</a></li>
               </ul></td>
               <td class="reality"> <img class="ikony" src="../img/ikony/reality.png">
               <ul>
                   <li><h3>REALITY</h3></li>
                    <li><a href="../kategorie/reality/byty_na_prodej.php">Byty na prodej</a></li>
                    <li><a href="../kategorie/reality/domy_na_prodej.php">Domy na prodej</a></li>
                    <li><a href="../kategorie/reality/byty_k_pronajmu.php">Byty k pronájmu</a></li>
                    <li><a href="../kategorie/reality/kancelare.php">Kanceláře</a></li>
                    <li><a href="../kategorie/reality/pozemky.php">Pozemky</a></li>
                    <li><a href="../kategorie/reality/jine.php">Jiné</a></li>
               </ul></td></tr>
                   <tr><td class="stavba"> <img class="ikony" src="../img/ikony/stavba.png">
               <ul>
                   <li><h3>STAVBA</h3></li>
                    <li><a href="../kategorie/stavba/stavebniny.php">Stavebniny</a></li>
                    <li><a href="../kategorie/stavba/pracovni_stroje.php">Pracovní stroje</a></li>
                    <li><a href="../kategorie/stavba/poradenstvi.php">Poradenství</a></li>
                    <li><a href="../kategorie/stavba/stavebni_bunky.php">Stavební buňky</a></li>
                    <li><a href="../kategorie/stavba/vybava_vystaveneho_objektu.php">Výbava vystavěného objektu</a></li>
                    <li><a href="../kategorie/stavba/jine.php">Jiné</a></li>
               </ul></td>
               <td class="mobily">   <img class="ikony" src="../img/ikony/mobil.png">
               <ul>
                   <li><h3>MOBILY</h3></li>
                    <li><a href="../kategorie/mobily/koupim_mobil.php">Koupím mobil</a></li>
                    <li><a href="../kategorie/mobily/prodam_mobil.php">Prodám mobil</a></li>
                    <li><a href="../kategorie/mobily/prislusenstvi.php">Příslušenství k telefonům</a></li>
                    <li><a href="../kategorie/mobily/baterie_nabijecky.php">Baterie, nabíječky</a></li>
                    <li><a href="../kategorie/mobily/handsfree.php">Handsfree</a></li>
                    <li><a href="../kategorie/mobily/jine.php">Jiné</a></li>
               </ul></td>
                   <td class="pc"> <img class="ikony" src="../img/ikony/pocitace.png">
               <ul>
                   <li><h3>POČÍTAČE</h3></li>
                    <li><a href="../kategorie/pocitace/ntb.php">Notebooky</a></li>
                    <li><a href="../kategorie/pocitace/stolni_pc.php">Stolní počítače</a></li>
                    <li><a href="../kategorie/pocitace/tiskarny_skenery.php">Tiskárny, skenery</a></li>
                    <li><a href="../kategorie/pocitace/monitory.php">Monitory</a></li>
                    <li><a href="../kategorie/pocitace/tablety.php">Tablety</a></li>
                    <li><a href="../kategorie/pocitace/jine.php">Jiné</a></li>
               </ul></td>
               <td class="av"> <img class="ikony" src="../img/ikony/video.png">
               <ul>
                   <li><h3>A & V</h3></li>
                    <li><a href="../kategorie/audioVideo/televizory.php">Televizory</a></li>
                    <li><a href="../kategorie/audioVideo/fotoaparaty.php">Fotoaparáty</a></li>
                    <li><a href="../kategorie/audioVideo/videokamery.php">Videokamery</a></li>
                    <li><a href="../kategorie/audioVideo/zesilovace.php">Zesilovače</a></li>
                    <li><a href="../kategorie/audioVideo/radia.php">Rádia</a></li>
                    <li><a href="../kategorie/audioVideo/jine.php">Jiné</a></li>
               </ul></td></tr></table>
           </section>
 
Odpovědět
1.4.2015 23:17
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Michal Kuba
Michal Žůrek - misaz:1.4.2015 23:50

tady není žádná cesta složitá a špatná. Některé jsou však horší a některé lepší. Začni, že si napíšeš media queries.

 
Nahoru Odpovědět
1.4.2015 23:50
Avatar
Peas
Člen
Avatar
Peas:2.4.2015 8:17

Ak si tam nahodi Bootstrap tak media queries bootstrepacke uz bude mat. Ci mu budu vyhovovat (co vo vacsine pripadov vyhovuju) alebo nie, to si moze donastavit dodatocne. Podla mna by skor mal zacat dodefinovavat pre DOM elementy bootstrepacke classy (napr col-sm-3...) a stranka vyzera, ze ma dost listov a tie bootstrap ma definovane, takze len samotnym natiahnutim bootstrapu sa zmenia, takze podla mna dalsim krokom je sa pozriet do ich dokumentacie listov.

 
Nahoru Odpovědět
2.4.2015 8:17
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Michal Kuba
Tomáš123:2.4.2015 14:36

Responzívny dizajn nie je zložitá časť. A podľa mňa ani nie je dôležité, či robíme mobile alebo desktop first. Je to iba o prepisovaní deklarácií. S rovnakou HTML štruktúrou sa mobilný dizajn robí rovnako ľahko a desktopový. Ak si to ešte neprerobil do bootstrapu, ani neprerábaj. Nie je to potrebné.

Nahoru Odpovědět
2.4.2015 14:36
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Tomáš123
Honza Bittner:2.4.2015 14:55

Jestli děláš desktop-first či mobile-first je obrovský rozdíl, hlavně pro CSS.

Desktop first jsou samé přepisování a resetování hodnot, kdežto v mobile first, máš hodnoty resetovány již na začátku, takže jen přidáváš změny.

Nahoru Odpovědět
2.4.2015 14:55
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:2.4.2015 15:03

Desktop first jsou samé přepisování a resetování hodnot
Skôr v desktop second. Platí teda, že mobile first = desktop first a mobile second = desktop second...

Alebo som zle pochopil tvoju myšlienku? Prosím o vysvetlenie.

Nahoru Odpovědět
2.4.2015 15:03
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš Maňhal
Člen
Avatar
Tomáš Maňhal:2.4.2015 15:11

Já bych se rozhodoval hlavně podle cílovky. Pokud jde o inzertní portál, tak bych na 99% zvolil "desktop first" řešení, protože cílovka bude v drtivé většině z desktopu (bude záležet na propagaci).

Desktop first také z důvodu, že prostě máme nějaký základní soubor funkcí, které na desktopu musí portál mít a na mobilu třeba některé nebudou vhodné. Takže je pořád jednodušší udělat desktop first se všemi funkcemi a až potom postupně "odřezávat" to, co bude na mobilu zbytečné.

 
Nahoru Odpovědět
2.4.2015 15:11
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Tomáš123
Honza Bittner:2.4.2015 15:22

Wut? Nějak nechápu kde jsi vytáhl ty second věci?

Nahoru Odpovědět
2.4.2015 15:22
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Honza Bittner:2.4.2015 15:26

Dovolím si nesouhlasit.

V desktop-first / mobile-first je úpa jedno kde či jak chceš weby hlavně používat. Jde tam o postup při tvorbě.

V desktop-first musíš hodně vlastností u různých elementů měnit - a ostatní resetovat -, což je značně neefektivní a nepřehledné. Tady si to představ jako shluk nabalených věcí, které musíš složitě odřezávat.

V mobile-first stačí vždy nastavit jen vlastnosti navíc. Pokud něco na mobilech nechceš, úplně s přehledem si můžeš nastavit display: none. Tady si můžeš představit, že máš super malé jádro, na které následně nabaluješ a zobrazuješ jednotlivé prvky.

Za mě tedy mobile-first.

Nahoru Odpovědět
2.4.2015 15:26
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:2.4.2015 15:36

Podstatou bolo, že či už robíš mobile first alebo desktop first, žiadne deklarácie prepisovať nemusíš (ak ponieme základné deklarácie prehliadača, ktoré sa musia restovať v oboch prípadoch).

V desktop-first musíš hodně vlastností u různých elementů měnit - a ostatní resetovat -
Aké ostatné, veď keď robím prvú verziu pre desktop, ešte nemám čo resetovať (ak nerátam pôvodné deklarácie prehliadača, ktoré sú aj tak v obidvoch prípadoch navyše - tam vzniklo second).

V mobile-first stačí vždy nastavit jen vlastnosti navíc
Ak súhlasíme s predvolenými vlastnosťami prehliadača, tak áno. Inak je to rovnaké ako desktop first.

Nahoru Odpovědět
2.4.2015 15:36
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš Maňhal:2.4.2015 16:03

S těmi "display:none;" pomalu, protože sice schováváš prvky, ale prohlížeče je načítají společně se stránkou a tvoříš tak zbytečnou datovou zátěž navíc.

 
Nahoru Odpovědět
2.4.2015 16:03
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.