Pokud připravujete obrázky JPG pro váš web, pravděpodobně jste již narazili na problém, v jaké kvalitě (resp. kompresi) obrázek uložit, aby byl co nejmenší a zároveň stále bylo vidět, co na něm je místo aby byly vidět chyby (artefakty).
Já vám ukážu jednoduchý matematický výpočet, kterým určíte nejvhodnější kompresi.
Pokračování textu Jak určit kvalitu a kompresi JPG obrázků?Kromě sdílení šablon můžete v Latte často používaný kód zapouzdřit do makra. Rozdíl je v tom, že zatímco kód v šabloně se provádí při každém načtení stránky, makro může část kódu připravit v době kompilace šablony a do šablony vložit již připravený kód.
Pokračování textu Jak správně vytvořit vlastní makra v LatteSystémů, jakými psát a organizovat CSS pravidla, je celá řada a dá se říct, že každá „trochu větší“ společnost (Twitter, Yandex, atd.) vydala nějaký framework, metodiku nebo návod, jak oni organizují svá CSS, protože ten jejich systém je „ten nejlepší“.
Je v tom ale skutečně taký rozdíl? A drží se tyto systémy obecných pravidel pro CSS? Pojďme se na to podívat. Poznámka: Do tohoto článku budu postupně doplňovat další systémy a poznatky, takže nemusí být momentálně úplný a může se hodně měnit.
Pokračování textu Organizace CSS? Ne, děkuji.Kromě CSS tříd, které sami definujete v HTML, můžete použít i pseudo-třídy, které jsou definované CSS2 a CSS3 specifikací a mají své speciální významy, které se odvíjí od obsahu HTML nebo akcí, které uživatel provádí.
Pokračování textu CSS pseudo-třídyWebkit nyní podporuje tzv. Client Hints („rady od klienta“), pomocí kterých můžete na serveru připravit obrázky a ostatní zdroje tak, aby se co nejlépe hodily pro příslušný prohlížeč nebo zařízení.
Když prohlížeč požádáte, může v každém požadavku poslat údaje o rozlišení a rychlosti připojení zařízení, takže budete přesně vědět, co si můžete dovolit stáhnout a zobrazit, aby to neovlivnilo rychlost zobrazení a kvalitu stránky.
HTML stránka může obsahovat celou řadu tagů a odkazů, které pomohou buď prohlížečům nebo vyhledávačům lépe pochopit rozložení stránek a rychleji ho načíst a zobrazit.
Pokud například načítáte obrázky a soubory z CDN, můžete prohlížeči říct, že se má připravit a najít nejbližší CDN server ještě před tím, než začnete soubory stahovat. Pokud máte seznam nebo článek rozdělený na stránky, můžete označit odkaz na následující stránku a prohlížeč pak tuto stránku načte ještě dříve, než ji bude chtít uživatel zobrazit; vyhledávač naopak díky tomu spojí všechny položky na jednu stránku a nebude uživatele odkazovat doprostřed seznamu.
Pokračování textu Pomozte zobrazit vaši stránkuV dnešní době je responzivní web důležitou součástí každé firemní stránky. A dá se předpokládat, že takový responzivní web bude hlavně zobrazován na mobilních zařízeních jako jsou chytré telefony a tablety, které mají dost omezenou kapacitu baterie a při vydatném používání vydrží jen pár hodin.
A jistě žádného návštěvníka nepřesvědčí o kvalitách Vašich stránek nebo nabízených produktů to, že při jejich procházení se výdrž jeho baterie sníží na polovinu. Častým příznakem problémů je pomalé nebo trhané skrolování na slabších (starších) strojích a zařízeních.
Jak tedy zabránit tomu, aby Vaše stránky doslova sežrali uživatelům baterie jejich zařízení?
Již víme, jak vzdáleně debugovat Chrome na zařízeních s Android.
Pokud máte aplikaci napsanou pomocí knihovny Cordova, která využívá WebView jádro pro zobrazování HTML obsahu, můžete v ní taktéž zapnout vzdálené debugování.
Stačí do onCreate() metody vaší aplikace přidat tento kód:
if(
Build.VERSION.SDK_INT >=
Build.VERSION_CODES.KITKAT) {
this.appView
.setWebContentsDebuggingEnabled(true);
}
Z kódu je vidět, že debugování je dostupné jen v API 4.4 a výše (momentálně tedy 4.4.x a 5.0.x), takže musíte mít nový nebo updatovaný telefon (nebo testovat na nejnovějších emulátorech), ale i tak je to určitě velká pomoc, pokud potřebujete ověřit, jak vypadá DOM vygenerovaný pro aplikaci nebo které JavaScripty se spouští za běhu aplikace.
Třída Build se nachází v API, takže budete potřebovat naimportovat příslušnou knihovnu:
import android.os.Build; //není potřeba, pokud již máte: import android.os.*; //nebo import android.*;
Celkový layout (rozložení) stránky se z historicky-technických důvodů dělá různě: tabulkou, plovoucímu prvky či JavaScriptem.
Moderní prohlížeče ale nabízejí jednu metodu (s gridem jsou vlastně dvě), která dokáže prvky na stránce uspořádat tak, aby si zachovali svůj vzhled a zároveň se přizpůsobily stránce.
Možná vás již napadlo, jak rychle je prohlížeč schopen najít CSS pravidlo pro konkrétní element v HTML a co dělat nebo nedělat pro to, abyste mu co nejvíce pomohly.
Pokračování textu Optimalizace selektorů
