Webfejlesztő erőforrások A Mega-Compilation

Az internet folyamatosan növekszik, és több százezer kollektív forrás áll rendelkezésre a közelgő webfejlesztők számára. Az online cikkekből, oktatóanyagokból, eszközökből, útmutatókból, videókból megtudhatsz valamit az interneten. Soha nem volt könnyebb ugrani online!

Az alábbiakban összeállítottam egy nagyon hasznos webes fejlesztői erőforrást. Ezek közé tartozik a HTML5 / CSS3 kezdő anyag, valamint a bonyolultabb JavaScript és PHP programozás. Lehet, hogy néhány lelkes fejlesztő tanulmányozza ezeket a nyelveket, és vadon népszerű webalkalmazásokat építhet, hasonló a Twitterhez vagy a Tumblr-hoz. Ha érdeklődik a modern webes fejlesztők hasznos eszközei iránt, akkor szeretni fogja ezt a megbízható források összeállítását.

Hasznos online magazinok

A blogolás világa több százezer új íróval robbant fel az internetre. Az online blogok közül sokan a design és a webfejlesztés köré összpontosítanak. Sok hasznos forrást találhat az RSS-hírcsatornákon keresztül.

Attól függően, hogy milyen típusú nyelvet kódol, határozza meg, hogy érdeklődik-e ezen blogok iránt. A webfejlesztésre összpontosíthatunk, és feltételezhetjük, hogy ez magában foglalja az összes front-end munkát (HTML5 / CSS3 / JavaScript), valamint egyszerű back-end parancsfájlokat (PHP / RoR / Python / SQL). Megjegyeztem, hogy egyetlen listát állíthatok a legnépszerűbb dev blogokról, amelyek mind a front-end, mind a back-end kódokra összpontosítanak.

• Nettuts+
• 24 mód
• Webmonkey
• Smashing kódolás
• Webitect
• Elem vizsgálata
• Macskák, akik kódot
• Line25 Web Design Blog

Természetesen sokan még figyelembe kell venniük. Azt javaslom, hogy a Google-t a kívánt dev-nyelvű oktatóanyagok és cikkek keresése során találja. Ezután egy olyan RSS-hírcsatorna-aggregátort használhat, mint a Google Reader, és ezekből a magazinokból állíthatja be az összes legújabb cikket. Ez egy nagyszerű módja annak, hogy elkezdje munkanapját, vagy akár egy kicsit megölje a tanításokat.

JQuery Plugins Galore

Az elmúlt évben mind a jQuery magkönyvtár, mind a jQuery Mobile sok vontatást szerzett. Ezek a nyílt forráskódú könyvtárak a gazdag animációval és könnyen végrehajtható Ajax funkciókkal rendelkező előzetes élményt terveznek, bár a mobilkönyvtár nem teljesen felzárkózott a szülőjéhez a bővítmények és a harmadik fél kódja tekintetében.

Hasonlóképpen egy másik fantasztikus bgStretcher termék is használható dinamikus háttérfájlként. Képsorozatot készít, és a méretét a felhasználó képernyőjének felbontásával arányosan méretezi. Nézze meg a csodálatos bemutatót, hogy ezt láthassa. Mindkét plugin ingyenesen letölthető, és egyszerű példaként viselkedik a jQuery-re épülő félelmetes harmadik fél kódjára. Ezeknek az erőforrásoknak a használata megtakarít sok időt a projekt munkájára, így nem kell újra feltalálnia a kereket.

Általában azt is javaslom, hogy böngészhessek az Ajax Blender és a JavaScript kódrészletek / bővítmények dinamikus meghajtó webhelyein. A könyvtár nem hatalmas, de folyamatosan növekszik az új felhasználó által benyújtott tartalmakból. A webhelyek nem csak a jQuery plugineket, hanem a MooTools és a Prototype könyvtárakat is tartalmazzák.

Ha végül a jQuery Mobile könyvtárral dolgozol, azt szeretném ajánlani egy másik jqmPhp eszközt. Ez egy dinamikus PHP osztály, ahol az egyszerű funkciókat a jQuery Mobile-on keresztül vezérelhető HTML5 kód kimeneti vonalaira és soraira lehet hivatkozni. Ez őszintén a legegyszerűbb módja a PHP shell köré épített dinamikus mobilalkalmazások prototípusának. A webhely blogja rengeteg példát tartalmaz az ásatáshoz.

HTML5 és CSS3 építése

Amikor a front-end webes fejlesztésről beszélünk, általában a hatékonyságról van szó. Önnek nincs ugyanaz a problémája, hogy HTML / CSS-ben létrehozza a webhelyet, mintha egy back-end Ruby alkalmazást kódolna. A HTML-ben nincs igazi logika vagy hibakezelés - ez főleg arról szól, hogy milyen gyorsan tudod méretezni az elrendezést minden böngészőben.

Először a HTML5 Boilerplate ajánlásával kell elkezdnem. Ez egy meztelen csontsablon, amely tartalmazza az összes “alapértelmezett” HTML5 weboldalelemek egy csomagban. Ez magában foglalja az alapértelmezett stíluslapot, a JavaScript-et, a favicon-t, az Apple touch ikonjait és sok más jótékonyságot. Ez egy 100% ingyenes projekt, és még a Github repóján is hozzájárulhat. Ez minden fejlesztő számára kötelező erőforrás, mielőtt bármilyen komoly webprojektet elkezdené.

Most, ha leállítja ezt a kazettát, akkor lehetősége van arra, hogy hozzáadja a saját egyéni kódját. De azt javaslom, hogy a következő lépést és egy olyan alkalmazást használjam, mint például az Initializr. Ez egy tipikus webhely-elrendezést eredményez, és lehetővé teszi, hogy testreszabja, mely elemeket tartalmazza a csomagtartó csomag. A Google Analytics-kód, a finomított jQuery, a .htaccess vagy a web.config fájlok, valamint egy tucat egyéb lehetőség áll rendelkezésre.

CSS tervezők

Most, hogy egy kicsit nézett a HTML5 kódolásba, figyelembe kell vennünk néhány népszerű CSS3 keretrendszert is. Ezek sokkal nyitottabbak, mint a HTML-sablonok, mivel sokkal többet tehetsz a CSS-el. A tervezők azt is felismerik, hogy nehézséget okoz a szabványoknak megfelelő kódok kiépítése az összes modern webböngésző számára.

A Golden Grid rendszer fantasztikus, mint az érzékeny webes tervek kerete. Ezek az elrendezések a böngészőablak átméretezése során alkalmazkodnak a mobil képernyőkhöz, és befelé hajlanak. Ezenkívül segít az egyes oszlopterületek szélességének és méretének megtervezésében. A Blueprint egy másik praktikus CSS keretrendszer, amit ki kell nézni. Nagyszerű egyéni weboldalak építése és fantasztikus dokumentáció.

A CSS-eszközökkel kapcsolatban azonban a CSS3 PIE-nek az első három kedvencemben kell lennie. Ez egy egyszerű webes alkalmazás, amely a megfelelő kódot adja ki az Internet Explorer 6-9 támogatott CSS3 effektjeinek megjelenítéséhez. Dinamikus lineáris gradienseket, lekerekített sarkokat és doboz árnyékokat hozhat létre testreszabható beállításokkal. Az oldalon IE-példák vannak, ha ki szeretné nézni őket is.

A fejlesztők azt is keresik, hogy csökkentsék a fájlméreteket a gyártáshoz. A tiszta CSS egy olyan erőforrás, ahol számos lehetőséget választhat a kód egyszerűsítésére és a fájlméret csökkentésére. Egy másik alternatív Code Beautifier nem kínál annyi lehetőséget, de könnyebben használható.

Témák testreszabása a WordPress segítségével

A WordPress közzététele a korszak legnépszerűbb CMS-je. Talán több millió új blogot és webhelyet láthattunk, amelyek e fantasztikus tartalomkezelő megoldással működnek. És mint ilyen, a WordPress fejlesztők nagy igényt támasztanak az egyéni widgetek és a weboldal témáinak építésével.

A Constellation Theme új kiadása megkönnyíti a WordPress fejlesztők számára az alapértelmezett sablonokat. Az új húsz tizenegy téma nagyon ügyes és minimalista, de nem tud versenyezni a HTML5Boilerplate tetején felépített teljes sablonmal. A Constellation WP témakör még különböző eszközfelbontásokhoz, például az iPhone és az iPad tabletekhez is tartalmaz média lekérdezéseket.

A Wonderflux egy másik WordPress téma sablon, amely nem egészen messze van a fejlesztésben. A közelmúltban megjelent a béta-ból a v1.0-ba, néhány online dokumentációval együtt. Ez a téma egy kicsit bonyolultabb, mint a Constellation, ami nagyobb ellenőrzést nyújt az elrendezés felett. A fejlesztők magukban foglalják az egyéni PHP horogokat, funkciókat és szűrőket, hogy a WordPress webhelye dinamikusabb legyen.

A komoly WP-fejlesztőknek meg kell vizsgálniuk mindkét megoldást, hogy meggyőződhessünk arról, hogy az egyik segít a jövőbeni projektmunkában.

A Web Developer Freebies keresése

A PSD-khez és a grafikákhoz képest a webfejlesztő közösség egy kicsit hiányzik a freebie-galériákban. Mindig nagyszerű szkriptek találhatók a Githubon, de gyakran meg kell keresniük és kipróbálni őket.

Nehéz megtalálni azokat a webhelyeket, amelyek ingyenes letöltéseket és demókat, valamint script példákat kínálnak. Kedvenc új erőforrásom a CodeVisually, amely a felhasználó által benyújtott fejlesztőeszközöket, beépülő modulokat, könyvtárakat és egyéb szép dolgokat katalógusolja. Az elrendezés olyan galéria, amelyen minden oldal tartalmaz egy linket a termékre, a demo screenshotra és néhány további részletre.

A galéria több száz példát tartalmaz HTML / HTML5 sablonkódról, CSS3 könyvtárakról és minden bizonnyal sok jQuery cuccról. Azt is megállapítottam, hogy ez egy nagyszerű webhely, hogy saját nyilvános forráskódot nyújtson be a nyilvánosság számára. A nevét a beadványhoz kötötte, és a saját weboldalára mutató hivatkozásokat is elhelyezhet, ahol a felhasználók hozzáférhetnek a kódhoz.

Webalkalmazás-API-k

A modern webes fejlesztések nagyon népszerű trendje az API-k kiépítése harmadik fél alkalmazásként. A mainstream közösségi hálózati márkák többsége tartalmaz egy működő API-t és dokumentációs szegmenst a saját honlapján. Ráadásul rengeteg szabad csomagoló osztály létezik a Githubban, minden főbb back-end programozási nyelven.

A fejlesztőknek kényelmesen kell dolgozniuk az ilyen típusú kódkönyvtárakkal, mivel növekszik a kereslet. Az OAuth rendszer segítségével sok ilyen alkalmazásból gyorsan létrehozhat egy felhasználói bázist. Az alábbiakban csak néhány hivatkozást tettem a népszerű online API-kra és azok teljes dokumentációjára.

• Twitter API
• CloudApp API
• Instagr.am API
• eBay API
• Foursquare API
• Dribbble API
• Github API

Használja ki ezeket az erőforrásokat az új projektekre, amikor csak lehetséges. A web egyre inkább összekapcsolódik, és a felhasználók mindig a következő nagy alkalmazásra állnak. Ha több látogatót szeretne regisztrálni egy teljesen új fiókba, és regisztrálhat közvetlenül a Twitteren vagy a Facebookon keresztül, több ezer dedikált tagot is felvehet az alkalmazásába..

Kérdések és válaszok

A fejlesztők között a leghasznosabb tapasztalatok kérdése és új technikák tanulása. A fejlesztői közösség mindig segítőkész az újonnan érkezők számára, és számos helyzetben hajlandó felajánlani szakértelmét. Ha bármilyen problémája vagy konkrét kérdése van a projekten, keresse meg a Google-t egy kapcsolódó webfejlesztő fórumra.

Én személy szerint ajánlom, hogy csatlakozzon a Stack Exchange közösséghez, ha még nem vagy tag. Ez magában foglalja az olyan csodálatos webhelyeket, mint a Stack Overflow és a Super User, ahol alapvetően bármit kaphatunk programozási segítséget. A közösségi tagok jól ismerik a főbb web nyelveket, beleértve a jQuery-t és a kisebb PHP-osztályokat.

Egy szép trükk, amit megtanultam, hogy a Google-on keresztül keressem, és nézd meg, hogy a probléma már megoldódott. Adjon meg néhány kulcsszót a Google kereséséhez, és adja hozzá a utótagot site: stackoverflow.com. Minden visszajuttatott keresési eredmény a Stack Overflow archívumban található - ha szerencsés vagy, akkor pontosan megtalálhatja a jelenlegi problémát..

Az oldalsebesség online tesztelése

Ez az új eszköz, amelyet a Google Fejlesztők készítettek, valóban lenyűgöző volt. Az Alkalmazás Page Speed ​​Online elemzi a webhely tartalmát, és analitikai jelentést készít a sebességeiről. Ez magában foglalja a betöltési idő csökkentésére és a látogatók hosszabb idejű megtartására vonatkozó megoldásokat is.

Ezenkívül segíthet meghatározni a visszafordulási arányokkal és az alacsonyabb konverziókkal kapcsolatos problémákat. A Google Analytics minden webhely számára elengedhetetlen, de úgy érzem, hogy az oldalsebesség csak magasabb szintű elemzést ér el.

A jelentés kimenete magas és alacsony prioritású, és gyakran sok különböző elemet tartalmaz. Ha megérti a LAMP beállításokat és dolgozik az Apache szervereken, akkor a mod_pagespeed modult is figyelembe veheti. A webhelyén számos ilyen optimalizálás automatikusan végrehajtódik, hogy csökkentsék a betöltési időt és a fontos webes adatok (képek, ikonok, parancsfájlok) gyorsítótárát.

A legjobb fejlesztői szoftver

A két legnépszerűbb operációs rendszer között több tucat program található. A grafikus szoftverektől a forráskód szerkesztőkig és az IDE-kig sok forrás áll rendelkezésre a webfejlesztők számára. Ha azonban népszerű javaslatokat keres, ajánlom a következő címeket.

Mac OS X

A pánik egy olyan szoftvergyártó cég, aki Coda-t hozott létre - messze a legjobb webfejlesztő alkalmazás Mac számára. Hozzáférhet egy forráskód-szerkesztőhöz, terminálhoz és FTP-klienshez, ahol közvetlenül módosíthatja a kiszolgálófájlokat. A Coda támogatja továbbá a szintaxis kiemelésének hosszú listáját olyan nyelveken, mint a HTML, XML, CSS, JavaScript, PHP, SQL és még sok más.

Ha azonban szükséged van egy ingyenes megoldásra, nézd meg a Komodo Edit-t. A szoftvert a Windows és a Mac számára fejlesztették ki, nyílt forráskódú, és teljesen ingyenesen letölthető. Ez magában foglalja a szintaxis kiemeléséhez és a hasonló tulajdonságokhoz hasonló sok támogatást, mint a Coda (sajnos nincs FTP). A TextWrangler egy másik ingyenes megoldás, amit megpróbálhatsz, csak egy egyszerű szövegszerkesztő.

Az ingyenes FTP alkalmazáshoz nézd meg a Cyberduck programot a Mac App Store-on. Bár személyesen szeretem a fizetett alternatívát, mint a Yummy FTP vagy a Transmit.

Microsoft Windows

Az Adobe szoftvercsomag mindig emlékeztet a webes tervezésre és fejlesztésre. A Windows-felhasználóknak rengeteg alternatívája van a Dreamweavernek, és sokan teljesen ingyenesek.

A Notepad ++ kiváló példája a nyílt forráskódú Win32 szoftvereknek. A projekt továbbra is aktív fejlesztés alatt áll, és a frissítéseket gyakran (majdnem havonta) frissíti. Szeretem a lapozott felületet, és támogatja a sok további bővítményt. Ahogy fentebb már említettem, Komodo Edit is elérhető a Windows XP / Vista / 7 operációs rendszerhez, így megpróbálhatja ezt alternatívaként.

A Windows webes fejlesztői nem rendelkeznek FTP klienssel sem. A Filezilla talán a legnépszerűbb szabad alternatíva. Alternatívák esetén nézze meg ingyenes FTP-ügyfeleink listáját, hasonló eszközökkel.

Egyéb hasznos eszközök

• 100 Alapvető webfejlesztő eszköz
• Best Of 2011: Legjobb hasznos jQuery pluginok és oktatóanyagok
• Ruby on Rails oktatóanyagok a webes fejlesztők kezdőknek
• 7 Izgalmas webfejlesztési trendek 2011-re

Következtetés

Eddig 2012 első negyedévében egy bumm! Már láthattunk egy csodálatos tartalmat a világ minden tájáról származó tervezőktől és webfejlesztőktől. A weben dolgozó szakemberek sok eszközzel rendelkeznek, mint 1-2 évvel ezelőtt.

Remélem, hogy ez a hatalmas eszközök és erőforrások összeállítása növeli a módszertanokat a jobb fejlődés érdekében. Szeretem a webfejlesztőkkel való együttműködést és az új projektek megismerését. Mégis csak annyi hely van az új erőforrásokra, amiket be tudunk vonni, így elkötelezett vagyok néhány drágakővel. Ha ötletei vagy javaslata van a kapcsolódó webfejlesztő erőforrásokkal kapcsolatban, tudassa velünk a hozzászólás utáni területen.