2017 október 18, szerda
Home » Sitebuild » Eszközök a weboldalkészítéshez

Eszközök a weboldalkészítéshez

Pár hasznos programot szeretnék megosztani, melyek nemcsak a kezdő weboldalkészítők számára jöhetnek jól, hanem a régebb óta a szakmában lévőknek is.

Sokan azt gondolják a weboldalkészítésről, hogy „Frontpage-ben összerakok valamit, aztán már jó is vagyok”. De ez koránt sincs így. A Frontpage-t még a kezdők számára sem ajánlom, annál vannak sokkalta jobb fejlesztő eszközök. Itt felmerülhet az is, hogy „Jó, de azok több százezres programok, én szeretnék belőle megélni, de ennyiért még el sem tudom kezdeni”.


Az elmúlt pár év fejlődési iránya bebizonyította, hogy a WYSIWYG, tehát a grafikus html szerkesztők nem használhatóak tökéletesen az új szabványokkal.

Ezért ha a weboldal trendeket szeretnénk követni (Valid XHTML, CSS-es oldalfelépítés), akkor meg kell tanulnunk kódok alapján felépíteni egy weboldalt.

Ehhez viszont már rengeteg ingyenes program és plugin áll rendelkezésünkre, melyekkel valóban korszerű és könnyen átlátható honlapokat tudunk készíteni.

A kódok szerkesztéséhez az egyik legalkalmasabb a Notepad++ nevű program, mellyel rengeteg programnyelvben tudunk forrás fájlokat készíteni, többek között css, html, php, javascript, flash actionscript. Ez annyit tesz, hogy egyszerűen megírjuk benne a forrásfájlt, majd egy arra alkalmas programmal lefordítjuk, vagy egyszerűen csak megnyitjuk böngészővel.  A program a különböző blokkokat és tagokat színekkel emeli ki nekünk, mellyel könnyebben eligazodhatunk a forrásban. A program letölthető innen: http://notepad-plus.sourceforge.net/hu/site.htm.

Notepad ++


CSS szerkesztéséhez számtalan segédprogram létezik, melyekkel valós időben tudjuk nyomon követni a változásokat, valamint valós időben is tudjuk szerkeszteni. Ehhez nincs is másra szükségünk, mint a firefox nevű böngészőre (www.firefox.hu) és néhány kiegészítő pluginra, melyek ehhez a böngészőhöz íródtak.

Az első ilyen plugin a Web Developer Toolbar (https://addons.mozilla.org/hu/firefox/addon/60), mely egy igen fontos funkciót rejt magában. Az Outline lenyíló menü Outline Current Element menüpontjára kattintva indul ez a funkció. Ez abban nyújt segítséget, hogy egy piros körvonallal kijelöli az egerünk alatt található css blokkot a böngészőben, valamint a felső sávban kiírja a pontos nevét és a css kódban elfoglalt helyét.

Web Developer Toolbar


Edit CSS (https://addons.mozilla.org/hu/firefox/addon/179), mely egy egyszerű css szerkesztő. A böngészőben jobb klikkre előhívott felugró menüben találjuk meg. Elindítás után automatikusan betölti az éppen nézett weboldal stíluslapjait (ez a funkció nem mindig működik, ekkor másoljuk mi bele az oldalhoz tartozó css kódot). A kódot szerkesztve az eredmény azonnal láthatóvá válik a böngésző ablakában. Automatikus kódkiegészítés és színkódok sincsenek benne.

Ajánlom, hogy a szerkesztendő css kódot előbb Notepad++ -ban nyissuk meg, majd ezután rakjuk be az Edit CSS-be. Ha ott szerkesztettünk rajta, a mentéshez másoljuk vissza a Notepad++-ba.

Edit CSS


Az utolsó általam ajánlott plugin a HTML Validator (http://users.skynet.be/mgueury/mozilla/), mellyel ellenőrizve az oldalainkat egyből kiderülhet, hogy weboldalunk megfelel-e a W3C szabványnak.

About laccas

Sitebuilder, wordpress fejlesztő és online marketinges. Újabb szenvedélye a Social Media, ebben igyekszik gyarapítani tudását - és lájkolóinak számát.

Check Also

jQuery qTip

A qTip egy Jquery-ben íródott tooltip script, amellyel lehetőségünk van a képekhez, linkekhez tartozó tooltip-jeink ...