HTML5 a CSS3 pro Dummies Cheat Sheet - dummies

David Karlins, Judith Muhr

HTML a CSS jsou základními stavebními kameny webových stránek. Příchod HTML5 a CSS3 představuje dynamickou a silnou evoluční fázi vývoje webového designu. Maximalizace potenciálu formátů HTML5 a CSS3 umožňuje aplikovat styling a formátování, prezentovat zvuk a video a vytvářet animaci a interaktivitu způsobem, který nikdy nebyl možný, aniž by bylo možné provést vzájemné propojení pluginů, obrazových souborů a jazyka JavaScript.

Nejlepší online zdroje pro HTML5 a CSS3

Slyšeli jste staré rčení: "Svoboda slova není svobodná. "To platí i pro návrh webových stránek, pokud nejste využiti nejužitečnějších bezplatných zdrojů. Zde je seznam nejlepších bezplatných zdrojů, které můžete najít online pro HTML5 a CSS3:

• Free web hosting je k dispozici od 000webhost. com. Jejich volné stránky jsou bez reklam, podporují skriptování na straně serveru a mají spolehlivě spolehlivý záznam.

• Chcete-li získat přehled o tom, jak vytvářet webové stránky, potřebujete knihy (jako HTML5 & CSS3 For Dummies ). Podrobné zdroje, které doplňují tyto znalosti, jsou však dostupné online a nejužitečnější je W3schools. com.

• Pomocí nástrojů jQuery Mobile můžete vytvářet výkonnou, plně mobilní webovou aplikaci.

• Zatímco v jQuery Mobile, podívejte se na volné, vlastní motivy (styly) od ThemeRoller.

• Problémem je zastavení a ověření kódu pomocí nástrojů na W3C. Zkontrolujte CSS na // jigsaw. w3. org / css-validator / a HTML na adrese // validator. w3. org /.

• Vytvořte volné barevné schémata v aplikaci Kuler společnosti Adobe.

• Potřebujete spolehlivé vyhledávací pole pro vaše stránky, ale v rozpočtu pro vyhledávací pole máte nula dolarů? Použijte FreeFind, který vytváří vyhledávací pole pro vaše stránky bez použití nebo prodávání údajů o tom, kdo hledá, co na vašem webu.

• A co volný blog? Získejte jeden na Bloggeru.

• Nakonec pomozte lidem, aby vás našli pomocí mapy Google vložené do vašich stránek.

Nástroje pro přípravu videa HTML5 pro web

Nativní video, které přehraje bez zásuvných modulů (jako je Windows Media Player nebo QuickTime Player), je jedním z nejvíce vzrušujících nových funkcí v HTML5. Ale kde získáte video kompatibilní s HTML5? Jak to prezentujete? Zde jsou některé nástroje, které vám pomohou vyřešit tyto výzvy:

• Převeďte video soubory do Theora Ogg.

• Společnost Microsoft má pěkný výukový program pro vytváření ovládacích prvků JavaScript pro natívné video.

• Kdo může sledovat stále se měnící seznam, které prohlížeče podporují nativní formáty videa HTML5?Odpověď: lidé Wikipedia sledovat.

• Jedním z nejcennějších online (bezplatných) zdrojů pro tvorbu webových stránek, natož web video, je Miro Video Converter. Připojíte libovolné video a vytváří video formáty vhodné pro formát HTML5.

• Musíte vyzkoušet své video v různých prohlížečích? Saucelab. com nástroje nejsou zdarma, ale nabízejí bezplatné testy, které poskytují náhled vašeho videa v libovolném zařízení z stolního počítače Windows s IE 6 až po nejnovější verzi operačního systému iPadu.

• Potřebujete udělat trochu úpravy na vašem videu před odesláním? Loopster disponuje bezplatnými nástroji pro zpracování videa

• YouTube a Vimeo budou hostit vaše videa zdarma, ale za zhruba 60 dolarů ročně nabízí společnost Vimeo službu, která hostí vaše video a dává vám plnou kontrolu nad tím, kdo ho může vidět a prezentuje video bez reklamy nebo propagační materiály pro vimeo.

Optimalizace obrázků s velkými plochami barevných barev Použití formátu GIF

Při optimalizaci grafiky, které mají překrytý text na fotorealistickém obrazu, je třeba vytvořit samostatné řezy pro oblasti obrazu, které jsou fotorealistické, a vytvořit další řezy pro oblasti obrázku, které obsahují text. Exportujte oblasti obsahující text pomocí formátu GIF a exportujte fotorealistické oblasti obrazu pomocí formátu JPEG. Zde je několik tipů, které vám pomohou:

• U vysoce kvalitních obrázků JPEG použijte při exportu nastavení kvality 70. U menších obrázků ve formátu JPEG se můžete dostat s kvalitou nastavení 50.

• Pokud vytváříte fotogalerii produktu nebo fotografa, exportujte snímky ve formátu JPEG s nastavením kvality 80.

• Při kompresi snímků ve formátu JPEG věnujte zvláštní pozornost okrajům objektů v obraze. Když začnete vidět obrazové body nebo okraje postrádají definici, obrázek jste zkomprimovali příliš daleko.

• Při exportu snímků pomocí formátu souborů GIF použijte nejmenší počet barev, které poskytují ostrý obraz a budete mít rychlý obraz.

• Při převzorkování obrázků pro webové stránky potřebujete maximální rozlišení 72 pixelů na palec.

Webové stránky, které neobsahují žádné video, se stávají vzácnějšími. Video je všude na internetu: používá se k zábavě, v reklamách a podporuje rockové hvězdy a další umělce. Když je video dobře provedeno, je to krása. Zde je několik věcí, které je třeba vzít v úvahu při přidávání videa na webovou stránku:

• Video zaberá spoustu šířky pásma. Je-li šířka pásma pro webové stránky překročena, může být spoplatnění poměrně nákladné. Místo toho, abyste mohli hostovat video na webových stránkách, nahrajte je na YouTube a vložte video do webové stránky nebo blogu.

• Neporušujte zákony o autorských právech. Nekopírujte video z jiných webových stránek nebo videa jiných uživatelů YouTube a nepoužívejte je na svých webových stránkách.

• Zkontrolujte licenci: Pokud používáte video od dodavatele nebo výrobce na komerčních webových stránkách, ujistěte se, že jste se na něj vztahovali dodavatele nebo licence výrobce.

• Použijte vysoce kvalitní videokameru k záznamu videa: Ne, iPhone není vysoce kvalitní videokamera. Pokud kódujete špatnou kvalitu videa pro web, získáte špatnou kvalitu videa.Vzpomeňte si na starou axiom: odpadky, odpadky.

• Ujistěte se, že diváci webu mají potřebné zásuvné moduly pro zobrazení videa.

• Pokud vytváříte stránky HTML5 s videem, ujistěte se, že cílové publikum pro web používá prohlížeče kompatibilní s HTML5.

• Při úpravě více videoklipů nepoužívejte přechody pro vytvoření videa pro web. Přechody videa vypadají skvěle v HD videu, ale při kódování videa pro web nevypadají dobře.