Veebiarendaja ressursid Mega-kompileerimine

Internet kasvab pidevalt ning tulevaste veebiarendajate jaoks on olemas sadu tuhandeid kollektiivseid ressursse. Veebisaitidest, õpetustest, tööriistadest, juhenditest, videodest saate veebis lihtsalt midagi teada saada. Internetis pole kunagi olnud lihtsam hüpata!

Allpool olen koostanud tohutu kogumise väga kasulikest veebiarendaja ressurssidest. Need hõlmavad algaja materjali HTML5 / CSS3 jaoks ning keerulisemaid JavaScripti ja PHP programmeerimise teooriaid. Mõnedel entusiastlikel arendajatel on võimalik neid keeli õppida ja ehitada väga populaarseid veebirakendusi, mis on sarnased Twitterile või Tumblrile. Kui teil on huvi kaasaegsete veebiarendajate kasulike vahendite vastu, siis armastate seda usaldusväärsete ressursside koostamist.

Kasulikud veebiajakirjad

Blogimise maailm on plahvatanud sadu tuhandeid uusi kirjanikke, kes interneti teel võtavad. Paljud neist veebipäevikutest on keskendunud disaini ja veebi arendamisele. Leiad palju kasulikke ressursse, kui neid lihtsalt RSS-vooge läbi vaadata.

Sõltuvalt sellest, millist keelt te koodite, määrab see teie huvi nende blogide vastu. Me saame keskenduda veebiarendusele ja eeldada, et see hõlmab kõiki esiotsaid (HTML5 / CSS3 / JavaScript) ning lihtsaid back-end skripte (PHP / RoR / Python / SQL). Olen võtnud endale vabaduse ehitada välja üks kõige populaarsemate dev blogide nimekiri, mis keskenduvad nii esi- kui ka back-end koodile.

• Pähklid+
• 24 viisi
• Webmonkey
• Kodeerimise segamine
• Webitect
• Kontrollige elementi
• Kassid Kood
• Line25 veebidisaini blogi

Kindlasti on veel palju teisi. Ma soovitan lüüa Google'it, et otsida õpetusi ja artikleid oma eelistatud devi keelest. Seejärel saate kasutada RSS-lugejate, nagu Google Readeri, loendit kõigist nende ajakirjade viimastest artiklitest. See on suurepärane võimalus oma tööpäeva alustamiseks või isegi mõnevõrra aegade tapmiseks läbi õpetuste.

jQuery Plugins Galore

Nii jQuery tuumraamatukogu kui ka jQuery Mobile on viimase aasta jooksul palju veojõudu saanud. Need avatud lähtekoodiga raamatukogud töötavad välja tipptasemel kogemuse, mis on täis rikkaid animatsioone ja kergesti rakendatavaid Ajaxi funktsioone, kuigi mobiilraamatukogu ei ole oma emaettevõtetega pluginate ja kolmanda osapoole koodi poolest päris kinni haaranud.

Samamoodi saab dünaamilise tausta skriptina kasutada teist fantastilist toodet bgStretcher. See võtab rea pilte ja suuruse suurust proportsionaalselt teie kasutaja ekraani eraldusvõimega. Vaadake imelist demo, et seda näha. Mõlemad pluginad on tasuta alla laaditavad ja käituvad lihtsate näidetena jQueryst välja ehitatud suurepärase kolmanda osapoole koodi jaoks. Nende ressurssidega töötamine säästab aega projektitööle, nii et te ei pea ratast uuesti leiutama.

Üldiselt soovitan sirvida JavaScripti koodilõigete / pluginate veebisaite Ajax Blender ja Dynamic Drive. Raamatukogu ei ole tohutu, kuid see kasvab pidevalt uue kasutaja esitatud sisust. Saidid sisaldavad mitte ainult jQuery pluginaid, vaid ka MooTools ja Prototype raamatukogusid.

Kui sa lõpuks töötad jQuery Mobile'i teegiga, soovin soovitada teist tööriista jqmPhp. See on dünaamiline PHP klass, kus saab viidata lihtsaid funktsioone HTML5 koodi väljundliinidele ja rida jQuery Mobile'i kaudu. See on ausalt kõige lihtsam viis PHP kesta ümber ehitatud dünaamiliste mobiilirakenduste prototüüpimiseks. Saidi blogis on palju näiteid kaevamiseks.

Hoone HTML5 & CSS3

Kui me räägime veebipõhisest arendamisest, on see üldjuhul efektiivsus. Teil ei ole samu probleeme veebisaidi ehitamisel HTML / CSS-s, nagu te kodeeriksite back-end Ruby rakendust. HTML-is pole reaalset loogikat või veatöötlust - see on peamiselt selle kohta, kui kiiresti saate skeemi kujundust kõigis brauserites korralikult mastaapida.

Kõigepealt pean alustama HTML5 Boilerplate'i soovitusega. See on tühi luude šabloon, mis sisaldab kõiki “standard” HTML5 veebilehe elemendid ühes paketis. See hõlmab vaikimisi stiili, JavaScripti, faviconi, Apple'i puudutavaid ikoone ja palju muid hüvesid. See on 100% tasuta projekt ja saate isegi oma Github repos osaleda. See on kõigi arendajate jaoks kohustuslik ressurss enne mis tahes tõsise veebiprojekti alustamist.

Nüüd, kui töötate selle katlakiviga ära, on teil võimalus lisada kõik oma kohandatud koodid. Aga ma soovitan võtta järgmise sammu ja ehitada sellise rakendusega nagu Initializr. See loob tüüpilise veebilehe paigutuse ja võimaldab isegi kohandada, millised elemendid on teie pakettpaketi sees. Saadaval on Google Analyticsi kood, minigeeritud jQuery, .htaccess või web.config failid ning umbes kümmekond muud valikut.

CSS disainerid

Nüüd, kui me vaatame natuke HTML5 kodeeringusse, peaksime kaaluma ka mõningaid populaarseid CSS3 raamistikke. Need on avatumad kui HTML-mallid, sest CSS-iga saate seda teha palju rohkem. Disainerid mõistavad ka raskusi standarditele vastava koodi loomisel kõikidele kaasaegsetele veebibrauseritele.

Kuldvõrgu süsteem on fantastiline kui raamistik tundlikele veebidisainidele. Need paigutused kohanduvad mobiiliekraanidele ja klapivad brauseri akna suuruse muutmisel sissepoole. Samuti aitab see iga veeru ala laiuse ja suuruse planeerimisel. Blueprint on veel üks mugav CSS raamistik, mida peaksite kontrollima. See on suurepärane kohandatud veebisaitide loomiseks ja pakub fantastilisi dokumente.

CSS-i tööriistade puhul peab CSS3 PIE olema minu kolmes lemmikus. See on lihtne veebirakendus, mis väljastab õige koodi, et muuta Internet Explorer 6-9 toetatud CSS3 efektid. Te saate luua kohandatavate seadetega dünaamilisi lineaarseid gradiente, ümardatud nurkasid ja kasti varje. Saidil on ka IE näited, kui soovite ka neid kontrollida.

Arendajad otsivad ka oma failide suuruse vähendamiseks tootmiseks. Puhas CSS on üks ressurss, mille abil saate valida koodide lihtsustamiseks ja failide suuruse vähendamiseks mitmete võimaluste hulgast. Teine alternatiivne kood Beautifier ei paku nii palju võimalusi, kuid seda on lihtsam kasutada.

Teemade kohandamine WordPressiga

WordPressi kirjastamine on selle ajastu kergesti populaarne CMS. Oleme näinud miljoneid uusi blogisid ja veebisaite, mis töötavad selle fantastilise sisuhalduse lahenduse abil. Ja nagu sellised WordPressi arendajad on nõudlikud kohandatud vidinate ja veebilehtede teemade loomisele.

Constellationi teema uus versioon annab WordPressi arendajatele lihtsama lähtepunkti kui vaikemallid. Uus Twenty Eleven teema on väga salakaval ja minimalistlik, kuid see ei saa konkureerida kogu HTML5Boilerplate peal asuva teemamalliga. Constellation WP teema sisaldab isegi meediaküsimusi erinevate seadme resolutsioonide jaoks, nagu iPhone ja iPad tabletid.

Wonderflux on teine ​​WordPressi teema mall, mis ei ole arengus üsna kaugel. See oli hiljuti välja pandud beetaversioonist v1.0 koos mõnede online-dokumentidega. See teema on veidi keerulisem kui Constellation, mis annab teile rohkem kontrolli paigutuse üle. Arendajad on lisanud kohandatud PHP konksud, funktsioonid ja filtrid, et muuta teie WordPress saidi dünaamilisemaks.

Tõsised WP arendajad peaksid kontrollima mõlemat lahendust, et näha, kas üks neist aitaks tulevikus projektitöös.

Veebiarendaja freebies leidmine

Võrreldes PSD-dega ja graafikaga tundub veebiarenduse kogukond freebie-galeriides veidi puuduvat. Githubis võite alati leida suurepäraseid skripte, kuid tihti peate neid ise otsima ja proovima.

On raske leida veebisaite, mis pakuvad tasuta allalaadimisi ja demosid ning skripti näiteid. Minu lemmik uus ressurss on CodeVisually, mis kataloogib kasutaja esitatud arendusvahendeid, pluginaid, raamatukogusid ja muid puhtaid asju. Paigutus on seadistatud nagu galerii, kus iga lehekülg sisaldab linki tootele, demo-ekraanipildile ja mõningaid täiendavaid üksikasju.

Galerii sisaldab sadu näiteid HTML / HTML5 malli koodist, CSS3 raamatukogudest ja kindlasti ka palju jQuery kraami. Olen ka leidnud, et see on suurepärane veebisait, et esitada oma avatud lähtekoodi avalikkusele. Teie nimi on seotud esitamisega, millele lisandub linke oma veebisaidile, kus kasutajad saavad koodi juurde pääseda.

Veebirakenduse API-d

Väga populaarne suundumus tänapäeva veebiarenduses on API-de väljaehitamine kolmanda osapoole rakenduseks. Enamik mainstream sotsiaalse võrgustiku kaubamärke sisaldavad töötavat API ja dokumentatsiooni segmenti otse oma veebilehel. Lisaks on Githubis kõikides suuremates back-end programmeerimiskeeles kirjutatud tasuta pakendiklassid.

Arendajad peaksid tundma end mugavalt töötades seda tüüpi koodiraamatukogudega, kuna nad kasvavad nõudluses. OAuth-süsteemi abil saate kiiresti luua paljudest nendest rakendustest kasutajaliini. Allpool on toodud vaid mõned viited populaarsetele veebipõhistele API-dele ja nende täielik dokumentatsioon.

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

Võimaluse korral kasutage neid vahendeid uutele projektidele. Veeb on üha enam ühendatud ja kasutajad on flokeerinud järgmise suure rakenduse juurde. Saate oma rakendusse värvata tuhandeid pühendatud liikmeid, kui külastajad ei pea registreerima uut kontot ja saavad selle asemel registreeruda otse Twitteri või Facebooki kaudu.

Küsimused ja vastused

Kõige kasulikum kogemus arendajate vahel on küsimuste esitamine ja uute tehnikate õppimine. Arendajate kogukond on uustulnukate jaoks alati nii abivalmis ja valmis paljudes olukordades oma teadmisi pakkuma. Kui teil on mingeid probleeme või konkreetseid küsimusi projekti kohta, otsige Google'ist seotud veebiarendaja foorumit.

Mina isiklikult pean soovitama ühineda Stack Exchange'i kogukonnaga, kui te ei ole veel liige. See hõlmab hämmastavaid veebisaite nagu Stack Overflow ja Super User, kus saate programmeerimise abi põhiliselt midagi. Ühenduse liikmed on teadlikud kõigist peamistest veebikeeltest, sealhulgas jQuery ja väiksematest PHP klassidest.

Kena trikk, mida ma õppisin, on otsida Google'ist ja vaadata, kas teie probleem on juba lahendatud. Sisestage oma Google'i otsingusse mõned märksõnad ja lisage järelliide sait: stackoverflow.com. Kõik tagastatud otsingutulemused on Stacki ülevooluarhiivide küsimused - kui olete õnnelik, võite leida täpselt teie praeguse probleemi lahenduse.

Lehekülje kiiruse testimine võrgus

See uus Google'i arendajate väljapakutud tööriist on tegelikult olnud muljetavaldav. Rakenduse Lehekülje kiirus veebis analüüsitakse teie veebisaidi sisu ja luuakse teie kiiruste analüütiline aruanne. See hõlmab võimalikke lahendusi, et vähendada laadimisaega ja hoida külastajad saidil kauem.

See võib samuti aidata teil kindlaks teha põrkamäärade ja madalamate konversioonide probleeme. Google Analytics on mis tahes veebisaidi jaoks hädavajalik, kuid ma arvan, et Page Speed ​​saavutab just kõrgema analüüsi taseme.

Aruande väljund on kõrgelt madalast prioriteedist ja sageli sisaldab see palju erinevaid objekte. Kui te mõistate LAMP seadistusi ja töötate Apache serverites, võite kaaluda ka mod_pagespeed moodulit. See viib teie veebisaidil automaatselt läbi mitu neist optimeeringutest, et vähendada laadimisaega ja olulisi veebiandmeid (pilte, ikoone, skripte).

Parim arendaja tarkvara

Kahe kõige populaarsema operatsioonisüsteemi vahel on kümneid programme. Graafikaprogrammist lähtekoodi redaktoritele ja IDE-dele on veebiarendajatele palju ressursse valida. Aga kui te otsite populaarseid soovitusi, soovitan järgmist.

Mac OS X

Paanika on tarkvarafirma, kes lõi Coda - kaugelt parim Maci veebiarenduse rakendus. Teil on juurdepääs lähtekoodi redaktorile, terminalile ja FTP kliendile, kus saate teha otse serveri faile. Lisaks toetab Coda pikka nimekirja süntaksi esiletõstmisest keeltes nagu HTML, XML, CSS, JavaScript, PHP, SQL ja palju muud.

Kui aga vajate tasuta lahendust, siis tuleb tutvuda Komodo Editiga. Tarkvara on loodud Windowsi ja Maci jaoks, avatud lähtekoodiga ja täiesti tasuta allalaadimiseks. See hõlmab kõiki sama süntaksi esiletõstmise toetusi ja palju sarnaseid funktsioone nagu Coda (kahjuks FTP puudub). TextWrangler on veel üks vaba lahendus, mida võiksite proovida, vaid lihtsalt lihtsa tekstiredaktori.

Tasuta FTP-rakenduse jaoks vaadake Cyberduck Mac App Store'ist. Kuigi ma isiklikult eelistan makstud alternatiivi, nagu Yummy FTP või Transmit.

Microsoft Windows

Adobe'i tarkvarapakett tuleb alati meelde, kui mõtlete veebi disainile ja arendamisele. Windowsi kasutajatel on Dreamweaverile palju alternatiive ning paljud neist on täiesti tasuta.

Notepad ++ on suurepärane näide mõnest avatud lähtekoodiga Win32 tarkvarast. Projekt on ikka veel aktiivses arenduses ja avaldab uuendusi sageli (peaaegu iga kuu). Ma armastan nende vahekaarti ja toetatakse nii palju täiendavaid pluginaid. Nagu ma eespool mainisin, pakutakse Komodo Edit ka Windows XP / Vista / 7 jaoks, nii et saate seda proovida.

Windowsi veebiarendajad ei ole ilma FTP kliendita. Filezilla on ilmselt kõige populaarsem vaba alternatiiv. Alternatiivide puhul vaadake meie tasuta FTP klientide nimekirja koos sarnaste tööriistadega.

Muud kasulikud vahendid

• 100 olulist veebiarendustööriista
• Best Of 2011: Parimad kasulikud jQuery pluginad ja juhendid
• Ruby on Rails õpetused veebiarenduse algajatele
• 7 Põnev veebiarenduse suundumus 2011. aastaks

Järeldus

Siiani on 2012. aasta esimeses kvartalis paugu saanud! Me oleme juba näinud hämmastavat sisu, mis on disaineritest ja veebiarendajatest üle kogu maailma. Veebi professionaalide hoone on nende käsutuses nii palju kui 1-2 aastat tagasi.

See on minu lootus, et see suur tööriistade ja ressursside kogum tõukab teie metoodikat parema arengu nimel. Ma armastan koostööd veebiarendajatega ja õppida pidevalt uusi projekte. Siiski on ainult nii palju ruumi uutele ressurssidele, mida me võime kaasata, nii et ma olen kindlasti paar kalliskivi ära jätnud. Kui teil on seotud veebiarendaja ressursside kohta ideid või soovitusi, andke meile sellest teada arutelu alal.