Úvodná » Vzhľad stránky » Zdroje webových vývojárov Mega-kompilácia

    Zdroje webových vývojárov Mega-kompilácia

    Internet sa neustále rozrastá a existujú stovky tisíc kolektívnych zdrojov pre budúcich vývojárov webu. Z online článkov, tutoriálov, nástrojov, sprievodcov, videí sa môžete dozvedieť viac o čomkoľvek na webe. Skutočne nikdy nebolo jednoduchšie skočiť online!

    Nižšie som zostavil obrovskú zbierku niektorých veľmi užitočných zdrojov webových vývojárov. Patria medzi ne materiály začiatočníkov pre HTML5 / CSS3 spolu s komplikovanějšími teóriami pre programovanie jazyka JavaScript a PHP. Je možné, že pár nadšených vývojárov študoval tieto jazyky a vytvoril populárne webové aplikácie podobne ako Twitter alebo Tumblr. Ak máte záujem o užitočné prostriedky pre moderných vývojárov webových stránok, potom budete radi túto kompiláciu dôveryhodných zdrojov.

    Užitočné on-line časopisy

    Svet blogov explodoval so stovkami tisíc nových spisovateľov, ktorí sa venovali internetu. Mnohé z týchto blogov online sa zameriavajú na vývoj a vývoj webových aplikácií. Nájdete veľa užitočných zdrojov tým, že jednoducho prelistujete tieto RSS kanály.

    V závislosti od toho, aký typ jazyka budete kódovať, určuje váš záujem o niektorý z týchto blogov. Môžeme sa zamerať na vývoj webových aplikácií a predpokladáme, že to zahŕňa všetky prednášky (HTML5 / CSS3 / JavaScript) a jednoduché skripty typu back-end (PHP / RoR / Python / SQL). Vzal som si slobodu pri zostavovaní jediného zoznamu najobľúbenejších dev blogov, ktoré sa sústreďujú na predný aj zadný kód.

    • Nettuts+
    • 24 spôsobov
    • Webmonkey
    • Smashing Coding
    • webitect
    • Preskúmať prvok
    • Mačky, ktoré kóde
    • Line25 Web Design Blog

    Je určite veľa ďalších, ktoré je potrebné zvážiť. Odporúčam Googleovi hľadať výukové programy a články v preferovanom jazyku dev. Potom pomocou agregátora RSS kanálov ako je Google Reader môžete nastaviť zoznamy najnovších článkov z týchto časopisov. To je skvelý spôsob, ako začať svoj pracovný deň, alebo dokonca zabiť trochu času chugging cez tutoriály.

    jQuery Plugins Galore

    Obidve jQuery jadrová knižnica a jQuery Mobile získali v minulom roku veľa trakcie. Tieto open source knižnice pracujú na návrhu front-end zážitku plného bohatej animácie a ľahko použiteľných funkcií Ajax, aj keď mobilná knižnica nie je docela zachytená svojim rodičom, pokiaľ ide o pluginy a kód tretej strany.

    Podobne ďalší skvelý produkt bgStretcher môže byť použitý ako skript dynamického pozadia. Bude to trvať sériu obrázkov a niektoré mierky veľkosti proporcionálne k rozlíšeniu obrazovky používateľa. Pozrite sa na nádherné demo, aby ste videli toto v akcii. Obidva tieto pluginy sú zadarmo k stiahnutiu a správajú sa ako jednoduché príklady pre skvelý kód tretej strany postavený na jQuery. Práca s týmito prostriedkami vám ušetrí veľa času pri práci na projekte, takže nemusíte znovu vymýšľať koleso.

    Vo všeobecnosti odporúčam prehliadanie webových stránok Ajax Blender a Dynamic Drive pre útržky kódu kódu kódu JavaScript. Knižnica nie je obrovská, ale neustále rastie z nového obsahu odosielaného používateľmi. Stránky zahŕňajú nielen jQuery pluginy, ale aj MooTools a Prototype knižnice.

    Ak skončíte s prácou s knižnicou jQuery Mobile, chcem odporučiť iný nástroj jqmPhp. Je to dynamická PHP trieda, kde môžete odkazovať na jednoduché funkcie na výstupné riadky a riadky kódu HTML5 poháňané prostredníctvom jQuery Mobile. Je to čestne najjednoduchší spôsob, ako vytvoriť prototyp dynamických mobilných aplikácií postavených okolo shell PHP. Blog na stránkach má veľa príkladov, ktoré sa dajú odkázať.

    Budovanie v jazykoch HTML5 a CSS3

    Keď hovoríme o vývoji webových aplikácií na front-end, je to všeobecne o efektívnosti. Nemáte rovnaké problémy s vytváraním webových stránok v jazyku HTML / CSS, ako by ste kódovali aplikáciu Ruby späť. Neexistuje žiadna reálna logika alebo spracovanie chýb v HTML - je to hlavne o tom, ako rýchlo môžete rozlíšiť dizajn rozloženia správne vo všetkých prehliadačoch.

    Najprv musím začať tým, že odporúčam HTML5 Boilerplate. Toto je šablóna s holými kosťami, ktorá obsahuje všetky “standard” Prvky webovej stránky HTML5 v jednom balíku. To zahŕňa predvolený štýl, JavaScript, favicon, Apple dotykové ikony a veľa ďalších dobrôt. Je to 100% bezplatný projekt a môžete dokonca prispieť na ich repo Github. Je to nevyhnutný zdroj pre všetkých vývojárov pred začatím akéhokoľvek seriózneho webového projektu.

    Teraz, ak pracujete s touto kartotékou, máte možnosť pridať celý svoj vlastný kód. Navrhujem však urobiť ďalší krok a budovať s aplikáciou, ako je inicializér. Vytvorí sa to typické rozloženie webových stránok a dokonca vám umožní prispôsobiť, ktoré prvky sú zahrnuté vo vašom balíku balíkov. Kód Google Analytics, miniatúrne súbory jQuery, .htaccess alebo web.config, plus asi tucet ďalších možností.

    Návrhárov CSS

    Teraz, keď sme sa trochu pozreli na kódovanie HTML5, mali by sme zvážiť aj niektoré populárne rámce CSS3. Tieto sú širšie než HTML šablóny, pretože s CSS môžete robiť oveľa viac. Dizajnéri si tiež uvedomia, že je ťažké vytvoriť štandardný kód pre všetky moderné webové prehliadače.

    Systém Golden Grid je fantastický ako rámec pre citlivé návrhy webových stránok. Tieto rozloženia sa prispôsobia mobilným displejom a pri zmenách veľkosti okna prehliadača sa zložia smerom dovnútra. Tiež pomáha pri plánovaní šírky a veľkosti každej oblasti stĺpca. Blueprint je ďalší šikovný rámec CSS, ktorý by ste si mali vyskúšať. Je to skvelé pre vytváranie vlastných webových stránok a ponúka fantastickú dokumentáciu.

    Pokiaľ ide o nástroje CSS, CSS3 PIE musí byť v mojich troch najobľúbenejších obľúbených položkách. Je to jednoduchá webová aplikácia, ktorá poskytuje správny kód na vykreslenie efektov CSS3 podporovaných v programe Internet Explorer 6-9. Môžete vytvárať dynamické lineárne prechody, zaoblené rohy a tieň v skrinke s prispôsobiteľnými nastaveniami. Stránka má príklady IE, ak ich chcete tiež skontrolovať.

    Vývojári budú tiež chcieť znížiť veľkosť svojich súborov na výrobu. Čistý CSS je jeden zdroj, v ktorom môžete vybrať z mnohých možností, aby ste zjednodušili kód a zmenšili veľkosť súboru. Iný alternatívny kód Beautifier neponúka toľko možností, ale môže byť jednoduchšie.

    Prispôsobenie motívov pomocou programu WordPress

    Publikovanie WordPress je v tejto dobe najpopulárnejšou CMS. Videli sme milióny nových blogov a webových stránok, ktoré sú vybavené týmto fantastickým riešením na správu obsahu. A keďže takíto vývojári spoločnosti WordPress majú vysoký dopyt po budovaní vlastných widgetov a motívov webových stránok.

    Nová verzia Constellation Theme dáva vývojárom WordPress ľahší východiskový bod ako štandardné šablóny. Nová téma Twenty Eleven je veľmi šikovná a minimalistická, ale nemôže konkurovať celej šablóne témy, ktorá je postavená na vrchole HTML5Boilerplate. Téma Constellation WP dokonca zahŕňa aj mediálne dotazy pre rozličné rozlíšenie zariadení, ako sú tablety iPhone a iPad.

    Wonderflux je ďalšia tematická šablóna WordPress, ktorá nie je dosť ďaleko vo vývoji. Bolo to len nedávno prepustený z verzie beta do v1.0 spolu s nejakou online dokumentáciou. Táto téma je o niečo zložitejšia ako Constellation, ktorá vám dáva väčšiu kontrolu nad rozložením. Vývojári zahrnuli vlastné PHP háčiky, funkcie a filtre, aby vaša stránka WordPress dynamickejšia.

    Závažní vývojári WP by mali skontrolovať obe riešenia, aby zistili, či by jeden z nich mohol pomôcť pri budúcej práci na projekte.

    Vyhľadávanie Freebies pre vývojárov webu

    V porovnaní so spoločnosťami PSD a grafikou sa komunita vývoja webu zdá trochu chýba v bezplatných galériách. Na Github vždy nájdete skvelé skripty, ale často budete musieť vyhľadávať a otestovať sami seba.

    Je ťažké nájsť webové stránky, ktoré ponúkajú bezplatné sťahovanie a ukážky, ako aj príklady skriptov. Môj obľúbený nový zdroj je CodeVisually, ktorý katalogizuje používateľom predložené vývojové nástroje, pluginy, knižnice a iné pekné veci. Rozloženie je nastavené ako galéria, na ktorej každá stránka obsahuje odkaz na produkt, demo screenshot a ďalšie podrobnosti.

    Galéria obsahuje stovky príkladov kódu šablóny HTML / HTML5, knižníc CSS3 a určite množstvo jQuery. Tiež som zistil, že je to skvelá webová stránka, ktorá vám podá verejný open source kód. Vaše meno je viazané na odoslanie a navyše môžete umiestniť odkazy na vlastnú webovú stránku, kde môžu používatelia získať prístup k tomuto kódu.

    Rozhrania API pre webové aplikácie

    Veľmi obľúbeným trendom v oblasti moderného vývoja webových aplikácií je vytváranie rozhraní API ako aplikácie tretej strany. Väčšina bežných značiek sociálnych sietí zahŕňa pracovný segment API a dokumentácie priamo na svojich webových stránkach. Okrem toho sú na Githube písané vo všetkých hlavných programovacích jazykoch.

    Vývojári by mali cítiť dobre pracovať s týmito typmi knižničných knižníc, keďže rastú v dopyte. Pomocou systému OAuth môžete rýchlo vytvoriť užívateľskú základňu z mnohých týchto aplikácií. Nižšie uvádzam len niekoľko odkazov na populárne online API a ich kompletnú dokumentáciu.

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

    Využite tieto zdroje na nových projektoch vždy, keď je to možné. Web je čoraz viac prepojený a používatelia sa vždy dostávajú do ďalšej veľkej aplikácie. Ak chcete, aby vaši návštevníci nepotrebovali zaregistrovať si úplne nový účet, môžete si do svojej aplikácie zamestnať tisíce ďalších špecializovaných členov a môžete sa zaregistrovať priamo prostredníctvom služby Twitter alebo Facebook.

    Zdroje Q & A

    Najprospešnejšie skúsenosti medzi vývojármi kladú otázky a učia sa nové techniky. Komunita vývojárov je vždy užitočná pre začínajúcich používateľov a je ochotná ponúknuť svoje odborné znalosti v mnohých situáciách. Ak máte nejaké problémy alebo konkrétne otázky o projekte, vyhľadajte v službe Google fórum súvisiaceho webového vývojára.

    Ja osobne odporúčam pripojiť sa k komunite Stack Exchange, ak ešte nie ste členom. To zahŕňa úžasné webové stránky, ako sú Stack Overflow a Super User, kde môžete získať programovú pomoc v podstate všetko. Členovia komunity sú informovaní vo všetkých hlavných webových jazykoch vrátane jQuery a menších tried PHP.

    Jednoduchý trik, ktorý som sa naučil, je vyhľadávať v službe Google a zistiť, či bol váš problém už vyriešený. Zadajte niekoľko kľúčových slov do vyhľadávania Google a pridajte príponu site: stackoverflow.com. Všetky vrátené výsledky vyhľadávania budú otázky z archívov pretečenia stackov - ak máte šťastie, môžete nájsť presne riešenie vášho aktuálneho problému.

    Testovanie rýchlosti stránky online

    Tento nový nástroj vyvinutý spoločnosťou Google Developers bol skutočne pôsobivý. Aplikácia Speed ​​Page Online aplikácie analyzuje obsah vašej webovej lokality a generuje prehľad o vašich rýchlostiach. Patria sem možné riešenia na skrátenie doby načítania a dlhšiu návštevnosť návštevníkov.

    Môže vám tiež pomôcť určiť problémy s mierami odchodov a nižšími konverziami. Služba Google Analytics je pre akékoľvek webové stránky nevyhnutná, ale domnievam sa, že Page Speed ​​dosiahne vyššiu úroveň analýzy.

    Výstupná správa je zoradená z vysokej na nízku prioritu a často obsahuje mnoho rôznych položiek. Ak chápete nastavenia LAMP a pracujete na serveroch Apache, môžete tiež zvážiť modul mod_pagespeed. Automaticky vykoná mnoho z týchto optimalizácií na vašich webových stránkach, aby ste znížili doby načítania a cache dôležité webové údaje (obrázky, ikony, skripty).

    Najlepší vývojársky softvér

    Medzi dvoma najpopulárnejšími operačnými systémami nájdete desiatky programov. Od grafického softvéru po redakciu zdrojových kódov a IDE, existuje veľa možností pre vývojárov webových stránok. Ale ak hľadáte populárne návrhy odporúčam nasledujúce tituly.

    Mac OS X

    Panic je softvérová spoločnosť, ktorá vytvorila Coda - ďaleko najlepšia aplikácia pre vývoj webových aplikácií pre Mac. Máte prístup k editoru zdrojového kódu, terminálu a FTP klientovi, kde môžete vykonávať zmeny priamo na serverové súbory. Coda navyše podporuje dlhý zoznam zvýrazňovania syntaxe pre jazyky ako HTML, XML, CSS, JavaScript, PHP, SQL a mnoho ďalších.

    Ak však potrebujete bezplatné riešenie, mali by ste sa pozrieť na Komodo Edit. Softvér je vyvinutý pre operačné systémy Windows a Mac, open source a úplne zadarmo na prevzatie. Obsahuje rovnakú podporu pre zvýrazňovanie syntaxe a množstvo podobných funkcií ako Coda (bohužiaľ bez FTP). TextWrangler je ďalšie bezplatné riešenie, ktoré môžete skúsiť, a to aj jednoduchý textový editor.

    Pre bezplatnú aplikáciu FTP skontrolujte Cyberduck na Mac App Store. Aj keď osobne preferujem platenú alternatívu, ako je Yummy FTP alebo Transmit.

    Microsoft Windows

    Softvérová sada Adobe vždy prichádza na myseľ, keď premýšľate o web dizajne a vývoji. Používatelia systému Windows majú veľa alternatív k programu Dreamweaver a mnohé z nich sú úplne zadarmo.

    Notepad ++ je skvelým príkladom niektorého open source softvéru Win32. Projekt je stále aktívny a pravidelne vydáva aktualizácie (takmer mesačne). Mám rád svoje rozhranie tabbed a podporu pre toľko ďalších pluginov. Ako som už uviedol, Komodo Edit je tiež ponúkaný pre systém Windows XP / Vista / 7, takže si to môžete vyskúšať ako alternatívu.

    Weboví vývojári v systéme Windows nie sú ani bez FTP klienta. Filezilla je pravdepodobne najobľúbenejšia voľná alternatíva. Pre alternatívy si pozrite náš bezplatný zoznam FTP klientov spolu s podobnými nástrojmi.

    Ďalšie užitočné zdroje pre vývojárov

    • 100 základných nástrojov vývoja webu
    • Najlepšie z roku 2011: Najlepšie jQuery pluginy a návody
    • Ruby on Rails Tutoriály pre vývojárov webu Začiatočníci
    • 7 Vzrušujúce trendy vývoja webu pre rok 2011

    záver

    Zatiaľ prvý štvrťrok 2012 začal s treskom! Už sme videli nejaký úžasný obsah vylievajúci z dizajnérov a webových vývojárov z celého sveta. Odborníci, ktorí vytvárajú web, majú k dispozícii toľko nástrojov v porovnaní s 1-2 rokmi.

    Dúfam, že táto obrovská kompilácia nástrojov a zdrojov prinesie vašu metodológiu pre lepší rozvoj. Milujem prácu s webovými vývojármi a neustále sa učím o nových projektoch. Napriek tomu je len tak veľa priestoru na nové zdroje, ktoré môžeme zaradiť, takže musím zabudnúť na niekoľko drahokamov. Ak máte nápady alebo návrhy súvisiacich zdrojov webových vývojárov, dajte nám vedieť v oblasti diskusných príspevkov.