Pavel Fiala - moje dokumenty k uceni, semestralni prace, fotky z akci etc.

z denicku jak zacit s HTML5

Rozložení stránek v HTML5 a nejčastější chyby použití

Toto řešení není plně aktuální pro více následujte na githubu

V poslední době, občas předělávám nějaké staré šablony po jiných kódérech, ale i po sobě.

V tom úryvku bych chtěl poukázat na používání HTML5 a vytvoření šablon, tak aby byly použitelné a pochopitelné pro všechny. Samozřejmě velice úzce propojeno s pojmenováním tříd a identifikátorů tak, aby kód i pro CSS byl co nejvíce použitelný v obecnosti

Budu zde příkládat sice i důraz na vypnutý JS, ale pokud se nad tím zamýslíte, má to svůj význam a není to o nic složitejší

Nejčastější chyby v HTML a CSS struktuře

  • předivování -> nadbytečné množství zbytečných obalů
  • table box model -< pokud používate tabulku pro model, nezapomeňte na to že, tento model potom obsahuje pouze patičku, ba naopak v obsahu obsahuje tabulka thead i tbody
  • milionkrát definované -> stejné prvky se stejnými vlastnostmi do jedné skupiny pojmenování a ta je teprve rozšiřována
  • pouze jeden nadpis h1? -> pokud klient má nástroj jako je wysiwyg, tak může do obsahu stránky vkládat cokoli
  • špatné pozicování -> pokud již absolutně něco pozicujeme, je nutné definovat obě souřadnicové hodnoty
  • HTML5 -> při použití HTML5, je dobré vědět, že bez JS pro rozpoznání elementů si neškrtneme, řešení -> identifikátory a třidý vkládat na již známe elementy z (x)HTML4
  • FIGURE -> pozor není nutnost na použití tohoto elementu vždy nicméně, pokud je to hlavním obrázkem článku (atricle) je to vhodné
  • Špatná struktura textu -< tvořte strukturu textu tak aby jste věděli co každý hlavní blok na stránkach znamená
    - nezapomínejte na nadpisy a strukturujte je tak, aby po sobě následovali. HTML5 sice již rozlišuje miliónkrát zanořené nadpisy, ale to neznamená, že vámi navržená struktura by neměla mít posloupnost
    - vemte v potaz situaci, kdy vy označíte v určítých úrovních články a sekce nadpisy -< pokud je správně strukturováno, je pak "jedno" jaké nadpisy webmaster pomoci wysiwygu vloží
  • špatné pochopení box modelu -> jeden box model na všechny šablony
  • neustále clearování -> špatné pochopení blokových a neblokových prvků, né za každou cenu se musí vždy clearovat
  • nikdy ne jenom href="#"! -> důvod vypnutý JS, pak tato kotva totiž ztrácí smysl
  • drobečkovou navigaci a paginátor -> patří do seznamu
  • inline Javascript -> pokud to opravdu není nutné nevkládejte inline javacript, snažte se řešit jej obecně například v custom.js
  • obrázek nebo span? -> to co je designovým prvekem patří do CSS
  • nikdy NE pro všechny prvky -> definice v css * {margin:0;padding:0;} je opravdu zbytečné a nesmyslná, důvod k tomu je, že obsah vložený skrze wysiwyg webmasterem následně musíte stylovat celý.
  • nikdy display:none! -> vytvoření speciální třídy například "hide" a její skrytí javascriptem
    - ano, znamená to stylovat i případ pokud je javascript vyplý
  • milión identifikátoru a tříd -> mnohonásobné volání několika rúzných tříd za sebou viz: #header .container #nav-main li a
    - je to zbytečné a při použítí je nutné pak definovat takto všechno, né-li následné použití !importu
    - pokuste se volat vždy pouze jeden identifikátor pouze tři určující obaly pro prvek viz: #navigation a em
  • aby se v tom prase vyznalo -> sjednodujte si stejné prvky v CSS, použití CSS3 definujte zvlášt
    • zbytečně knihovny navíc -> naučte se používát v bez újmy na obecnosti jen potřebné knihovny a využijte je na maximum
    například při použití jQuery, si můžete vyrobit svůj vlastní modál, pomoci pár řádku a trocha CSS, je zbytečné na to používat celou knihovny pro nějaké zvlaštní modaly, třeba: 
    //modal window need jQuery plugin
var documentHeight = $(document).height();
var documentWidth = $(document).width();

$('body').append('<div id="overlay-modal"></div>');
$('div[data-toggle=modal]').append('<a class="close">x</a>').addClass("modal");

$('#overlay-modal').css({
	'height': documentHeight,
	'width': documentWidth
});

$("a[data-target=modal]").click(function () {
	var modal = $(this).attr('href');
	$("#overlay-modal").show();
	$(modal).addClass('rounded').show();
});

$('.close, #overlay-modal').click(function () {
	$('#overlay-modal, .modal').hide('fast');
});;
    #overlay-modal {
	background-color: rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0.1);
	position:absolute;
	display:none;
	top:0;
	left:0;
	z-index:100
}
.modal {
	padding:10px;
	z-index:110;
	border:2px solid #000000;
	background-color: #ffffff;
	width: 580px;
	position: fixed;
	top: 50%;
	left: 50%;
	height: 400px;
	overflow: auto;
	margin-top: -200px;
	margin-left: -300px;
}
.modal .close {
	position: absolute;
	top: 0px;
	right: 5px;
}

Postřehy

  • HTML5 již nám dáva navíc vlastnost data-^, což je velice příjemné použítí například při určení pro odkaz, modalního okna etc, samozřejmě jeho použití je i jiné, ale o tom jindy :-)
    -> velice vhodné je pro označení nového okna selektorů CSS3, kdy vytiskneme v obsahové častí odkaz pokud směřuje ven, toto však nemusí být ryze pravidlem, můžeme takto přidat například ikonku pro odkaz, který se otevře v novém okně 
    section.main a[data-target="new-window"]:after {
	content: " [" attr(href) "]";
}
    <a href="#" data-target="new-window">okno otevřené pomoci javascriptu do nového okna</a>
<a href="#nazev-modalního-okna" data-target="modal">okno otevřené v modálním okně, jméno volaného modální si vytáhněte JS z hrefu</a>
    snažte se tyto typy vámi definováných vlastnosti sjednotit, na věci které jsou společné
    pokud počítáte s wysiwyg pak je potřeba upravit potřebný nastroj, například TinyMCE, aby místo vlastnosti target="_blank" vkládal vaši definici
  • vzhledem k používání html5 dobrého ostylování již není nutné označovat prvky ve formuláři *, předpokládejte že jste zkušenější uživatel, a máte jej vyplý (určitě poznáte rozdíl mezi modrou a červenou v inputu), proto hvězdičku vkládejte pomoci JS, za input[required], ušetříte si i v budoucnu práci a při všech formulářích
  • snažte se prvky, které jsou odkazem stylovat tak, aby působily, že se něco stalo napříjklad posunem textu zleva doprava 
    a:active em{
	position:relative;
	left:1px;
}
  • používejte více html prvků nežli třídy > span, strong, em > samozřejmě i jejich použití má své opodstatnění
  • nebojte se dynamičnosti prvků (menu, sloupce etc.)
  • jakýkoli odkaz, který nemá vyloženě potenciál tlačítka, potrhávejte a na hover, teprve měňte
  • klient by měl mít možnost měnit vše v šabloně, pokud je správně ošetřeno stránky si sám nezničí
  • javascript se snažte umísťovat do patičky
  • nebojte se používat patřičně nástroje pro kontrolu rád používám http://gtmetrix.com
  • nezapomeňte na podporu starých prohlížečů, a snažte se využít dostupných knihoven k normalizaci bloků a prvků. Ušetříte si tím zbytečné stylovní navíc při optimalizaci.
    Knihovna normalize.css
    Knihovna html5.js
  • používejte CDN
  • Minimalizujte CSS, JS a HTML

Box model

  • Jeden layout pro všechny tyby obsahy stránek
  • To co většinou rozlišujeme jsou obsahy, nikoli box model, ten ze zásady je určen jednotným designem, i když například homepage obsahuje slider, či pod stránky nějaké to menu navíc

layout obsahuje:

  • head
    • pokud není nutné do tagu <head> vkládejte jen ty nejnutnější JS
    • řazení CSS -> vždy volejte nejdříve CSS knihoven, které používáte, až poté volejte svůj vlastní
    • vyvarujte se nadbytečným prvkům v definici
      <link rel="stylesheet" href="css/styles.css" />
<script src="js/scripts.js"></script>
    • minimalizujte dotazy na servery -> sjednottě CSS, JS etc.
  • header
    • nebojte se logo vložit do H1, pozor pokud není opravdu nutné či požadavek klienta, vkládejte obrázek loga pomoci CSS
    • logo je vždy klikací -> teorie neklikací logo na homepage je zcestná (aspoň dle mne), důvod je ten, že pokud uživatel zjistí, že na domácí stránce logo není klikací tak v tom případě s tím již nemusí také počítat do budoucna
    • může obsahovat navigaci
  • content -> zobrazený obsah dané stránky
    • rozdělte si obsah na to co může vkládat webmaster, a to co je automaticky generované
    • obsah je jako jeden hlavní article, který má sekce, tyto sekce se mohou dále dělit na články > například listing komentářů, kde komentář je samostatným článkem
    • třidou main, jsem si označil hlavní pravky článku
      obsah má například vždy jedinečný nadpis -> v mém případě jsem si jej označil třídou main, je to z důvodu toho že většinou tento nadpis zobrazujeme opravdu jinak
      a za druhé nemám rád používání v css značky pro označení přímého prvku
    • dále zde vidíme sekce pro listing, zde můžeme listovat například ty komentáře nebo zboží či cokoli jiného
      za povšímnutí stojí se naučit pojmenování například třidami column-two listing, vzhledem k použití i v jiných šablonách projektu (např hledání ...)
      dáke také je vidět, prvky dále už nemusím třidit do jiných class, a to proto protože vím že nemusím, protože i kdyby tam byl tag img, span, strong, a etc., tak jsou věnovaný pouze již jednomu boxu a já předpokládám že tento listing by se vší pravděpodobností měl být i pro ostatní prvky stejný (výhímkou však může být tlačítko, cena apod)
      tento listing může být označen jako aside místo section, za podmínky že listing jako takový souvisí s daným obsahem. 
      <li>
	<a href="#" title="detail">
		<h2>jediný nadpis v listingu</h2>
		<figure>
			<img src="images/product-preview.jpg" alt="jediný obrázek v listingu" width="100" height="100" />
		</figure>
		<p>nestylovaný krátky popis produktu</p>
	</a>
	<span class="price">18.99 CZK</span>
	<a href="#" class="btn btn-submit" title="" ><em>tlačítko</em></a>
</li>
  • navigace - samostatný a měl by byt i jediným prvek na stránkách
    • elementem <nav> -> označujeme vždy jen hlavní navigaci
    • hlavička může i nemusí obsahovat navigaci, já rád používám navigaci až za obsahem, důvod k tomu je jediný, co chcete, aby uživately se vykreslilo dříve, hlavní obsah či balast předním?
    • vyhledávání je také navigačním prvkem
    • všimněte si speciálně to kde já označuji currentní prvek, že vkládám text do tagu em a položte si otázku proč :-)
      to proč tagem em je z toho důvodu že ten mi bude určovat velikost a častešně i vzhled (speciálně ostylováno), pokud bychom chtěli nějáké jiné prvky vkládáme je mimo em a například jako span, a normalně se je snažíme floatovat (tím nemyslím position:absolute) 
      <li><a href="#"><em>menu které má speciální okraje -> obrázek v css</em><span class="left"></span><span class="right"></span></a></li>
    • snažte se tvořit menu tak, aby bylo dynamické, na šířku
    • ve formuláři je k vidění označení a rozdělění tříd btn, btn-blue toto je vhodné si rozdělit a předpokládat, že tláčítka, které budete používat na webu budou všechny stejná, jediné co se bute měnit je velikost (výška, šířka, velikost písma) a barva proto tedy definujeme hlavní tlačítko, které bude mít střední velikost a základní jednu barvu, nějaký ten hover. 
      .btn {
	display: inline-block;
	margin-bottom: 0;
	font-size: 13px;
	line-height: 18px;
	color: #000000;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #000000;
	text-decoration: none;
}
.btn em {
	background-color: #f5f5f5;
	display: inline-block;
	padding: 4px 5px 4px;
	font-style: normal;
	border: 1px solid #f00000;
}
.btn:hover em {
	border: 1px solid #000000;
}
.btn-blue em {
	background-color: lightblue;
}
.btn-blue:hover em {
	background-color: #f5f5f5;
}}

      povšiměnte si hlavně toho, že dané stylování tlačítka je pak jednotné pro všechny, to znamená velikost, font, barvy etc. a již nemusíme definovat vše ostatní. To proč já používám i obal em je například zde z důvodu dvojího stínování, pokud bych chtěl obrázek na pozadí
      vždy zpracovávejte tlačítka tak, aby se roztáhlo dle obsahu! Každé tlačítko lze definovat dynamicky!
      tak tvořené třídy pro dané prvky na webu samozřejmě použijete i na jíné elementy (např. boxy) esmíte zapomenout, že takto definované vlastnosti se čtou od shora dolů, to znamená definuje od nejvíce obecných vlastností
  • footer -> hlavní navigace, zápatí
    • zde jediná poznámka, menu v patičce není nutně hlavní navigací

a nakonec celkový příklad

kam dál?