[IDE/Nástroje]Nejlepší program pro vylepšování HTML kódů

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz


Odeslat příspěvekod x-rated 8. 7. 2013 12:45

pro kontrolu je webová aplikace http://validator.w3.org/
pro optimalizaci a vylepšení Webdesigner 2013 (ten co sedí na židli a buší do klávesnice)
a obecně na tvorbu Notepad++
8-)
Dell UP2715K 27" AH-IPS 5120x2880 • Asus Maximus VIII Gene • Intel Core i7-7700K @ 5 GHz • Corsair Vengeance @ 3,6 GHz, 32 GB • Samsung 960 Pro - 1 TB • Creative SoundBlaster X-Fi Titanium HD • MSI GTX 1080 Ti Gaming X @ 2/11 GHz
x-rated
Junior
Uživatelský avatar

Odeslat příspěvekod redhawk 8. 7. 2013 12:47

Notepad ++ a Firefox + Developer toolbar + validator w3 org
Hlúposť užívateľa je priamo úmerná jeho právam.
redhawk
Junior
Uživatelský avatar


Odeslat příspěvekod medvidek88 8. 7. 2013 13:20

Když tedy opomenu Firebug, tak hlavně PageSpeed, Web Developer, User Agent switch.
NO IE !!!
medvidek88
Junior
Uživatelský avatar

Odeslat příspěvekod tom.suky 8. 7. 2013 13:32

Kontrola kódu?
Zkušení programátoři jsou schopní napsat kód bez systémových chyb a layout nezbývá zkontrolovat jak jinak než spuštěním ve všech prohlížecích na různých zařízeních.

Úklid kódu?
To se dnes ještě dělá? V dnešní době je jedno, jestli stránka má 2 nebo 3 KB, ale spíše kolik požadavků na různé soubory zasílá (styly, scripty, obrázky).
Zde uvádím příklad připojení k https://developer.apple.com/ (data pro hlavní html soubor)
Connecting: 623ms, SSL: 441ms, Sending: 0, Waiting: 188ms, Receiving: 30ms, Celkem 1,3 sekundy.
Z toho je tedy vidět, že je úplně jedno, jak velký soubor je (rozdíl bude v pár ms).
Pro doladění doporučuji Chrome Developer tools (Ctrl+Shift+I) a pro rady Chrome extension PageSpeed Insights (by Google)

A nakonec ještě: validátor kódu?
Zvlášť ten na w3.org je neaktuální a validuje podle W3 HTML 5 specifikace, která je v dnešní době v řadě případů nedostačující.

Jeden příklad za všechny:
Kód: Vybrat vše
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Vyhodí chybovou hlášku Bad value X-UA-Compatible for attribute http-equiv on element meta. což znamená, že validátor nezná aktuální specifikaci html (http://wiki.whatwg.org/wiki/PragmaExtensions)

Daleko důležitější je mít napsané HTML tak, aby tomu rozuměly všechny prohlížeče stejně a správně, než mít stránku "VALID" :D
tom.suky
Kolemjdoucí

Odeslat příspěvekod PiranhaGreg 9. 7. 2013 11:15

Samotný kód mi kontroluje NetBeans. Na tvorbu webů dnes asi nejlepší IDE. HTML, CSS, PHP i JS syntaxi zvládá na jedničku. Trochu rezervy má ještě v samotném našeptávání, ale to asi nebude vzhledem k dynamickým datovým typům nikdy dokonalé. Potěšilo mě ale, že vnímá kód v rámci celého projektu a ne jen aktuálního souboru.

PHP na localhostu spouštím přes XAMPP (zvládá i databáze). Všechno pak ladím přes Chrome Developer Tools. Docela se divím, že ho tu ještě nikdo nezmínil. Je přehledné, zvládne vše co po něm potřebuji a spolu s Firefoxem je nejdál v podpoře webových standartů. Vyhovuje mi dokonce víc než všude vychvalovaný Firebug.

Optimalizaci na straně serveru zatím neprovádím žádnou. Mé projekty ještě nejsou tak velké, aby nějaký framework vyžadovali. Nejvíc optimalizuji v JavaScriptu. Ve většině projektů používám jQuery a pokud je to větší projekt, tak ještě někdy HeadJS pro dodatečné načítání javascriptu (narvat 10 <script> tagů do hlavičky dokumentu je fakt zvrácenost). Ve finální verzi webu pak všechny JS ale většinou sloučím do jednoho souboru a přes tento packer ho zmenším. HTML a CSS nechávám být.

Validitu kontroluji přes validáor od W3C. Pro zjištění jaká JS konstrukce je rychlejší používám tuhle šikovnou stránku a pro zjištění podpory nějakého webového standartu v prohlížečích zas tuhle. Na malé pokusy ještě někdy využívám tuto stránku. Jen mi tam chybí našeptávač...

Na tvorbu vektorové grafiky využívám Illustrátor (ale je to asi celkem jedno, výsledný svg by měl být standardizovaný) a pro její optimalizaci pak tento online nástroj. Na bitmapovou grafiku využívám Paint.NET a Photoshop a na tvorbu ikon nástroj IconFX.

Se zbytkem mi pomůže Google, stackoverflow a případně i tady fórum na živě :-) .
PiranhaGreg
Mírně pokročilý
Uživatelský avatar

Předchozí stránka

Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků