Zasoby dla programistów internetowych Mega-kompilacja

Internet stale się rozwija i istnieją setki tysięcy zbiorowych zasobów dla przyszłych twórców stron internetowych. Od artykułów online, samouczków, narzędzi, przewodników po filmy - możesz dowiedzieć się wszystkiego przez Internet. Skok online nigdy nie był łatwiejszy!

Poniżej zestawiłem ogromną kolekcję bardzo przydatnych zasobów programistów internetowych. Należą do nich materiały dla początkujących HTML5 / CSS3 wraz z bardziej skomplikowanymi teoriami programowania JavaScript i PHP. Kilka entuzjastycznych programistów może studiować te języki i tworzyć bardzo popularne aplikacje internetowe podobne do Twittera lub Tumblra. Jeśli interesują cię przydatne zasoby dla współczesnych twórców stron internetowych, pokochasz tę kompilację godnych zaufania zasobów.

Pomocne czasopisma online

Świat blogów eksplodował setkami tysięcy nowych pisarzy przenoszących się do Internetu. Wiele z tych blogów online koncentruje się na projektowaniu i tworzeniu stron internetowych. Możesz znaleźć wiele przydatnych zasobów, po prostu przeglądając te kanały RSS.

W zależności od rodzaju języka, który kodujesz, określi to twoje zainteresowanie jakimkolwiek z tych blogów. Możemy skupić się na tworzeniu stron internetowych i założyć, że obejmuje to wszystkie prace front-end (HTML5 / CSS3 / JavaScript), a także proste skrypty zaplecza (PHP / RoR / Python / SQL). Pozwoliłem sobie zbudować jedną listę najpopularniejszych blogów dev, które skupiają się zarówno na kodzie front-end, jak i back-end.

Nettuts+
24 sposoby
Webmonkey
Smashing Coding
Webitect
Sprawdź element
Koty Who Code
Blog internetowy Design Line25

Z pewnością jest wiele innych do rozważenia. Polecam uderzenie w Google w poszukiwaniu samouczków i artykułów na temat preferowanego języka dev. Następnie za pomocą agregatora kanałów RSS, takiego jak Czytnik Google, możesz skonfigurować listy wszystkich najnowszych artykułów z tych magazynów. Jest to świetny sposób na rozpoczęcie dnia roboczego, a nawet zabicie trochę czasu na przeglądaniu samouczków.

Wtyczki jQuery Galore

Zarówno biblioteka rdzenia jQuery, jak i jQuery Mobile zyskały wiele trakcji w ubiegłym roku. Te biblioteki open source pracują nad zaprojektowaniem front-endowego doświadczenia pełnego bogatej animacji i łatwych do implementacji funkcji Ajax, chociaż biblioteka mobilna nie do końca dogoniła swojego rodzica pod względem wtyczek i kodu innych firm.

Podobnie inny fantastyczny produkt bgStretcher może być używany jako dynamiczny skrypt w tle. Będzie to seria obrazów i skalowanie rozmiarów proporcjonalnie do rozdzielczości ekranu użytkownika. Sprawdź wspaniałe demo, aby zobaczyć to w akcji. Obie te wtyczki można pobrać za darmo i zachowują się jak proste przykłady niesamowitego kodu firmowego zbudowanego na jQuery. Praca z tymi zasobami pozwoli zaoszczędzić mnóstwo czasu na pracy nad projektem, dzięki czemu nie będziesz musiał ponownie wymyślać koła.

Ogólnie polecam także przeglądanie stron Ajax Blender i Dynamic Drive w poszukiwaniu fragmentów kodu JavaScript / wtyczek. Biblioteka nie jest ogromna, ale stale rośnie od nowych treści przesyłanych przez użytkowników. Witryny zawierają nie tylko wtyczki jQuery, ale także MooTools i biblioteki Prototype.

Jeśli zakończysz pracę z biblioteką jQuery Mobile, chcę polecić inne narzędzie jqmPhp. Jest to dynamiczna klasa PHP, w której możesz odwoływać się do prostych funkcji do wyprowadzania linii i linii kodu HTML5 obsługiwanego przez jQuery Mobile. Szczerze mówiąc jest to najprostszy sposób na prototypowanie dynamicznych aplikacji mobilnych zbudowanych wokół powłoki PHP. Blog witryny zawiera wiele przykładowych referencji, które można przekopać.

Budowanie w HTML5 i CSS3

Kiedy mówimy o tworzeniu stron internetowych na froncie, generalnie chodzi o wydajność. Nie masz takich samych problemów z budowaniem strony internetowej w HTML / CSS, jak kodowanie aplikacji Ruby zaplecza. W HTML nie ma prawdziwej logiki ani obsługi błędów - chodzi głównie o to, jak szybko można skalować projekt layoutu we wszystkich przeglądarkach.

Najpierw muszę zacząć od rekomendacji płyty HTML5 Boilerplate. Jest to szablon pozbawiony kości, który zawiera wszystkie elementy “standard” Elementy strony HTML5 w jednym pakiecie. Obejmuje to domyślny arkusz stylów, JavaScript, favicon, ikony Apple Touch i wiele innych gadżetów. Jest to w 100% darmowy projekt i możesz nawet przyczynić się do ich repo Github. Jest to obowiązkowy zasób dla wszystkich programistów przed rozpoczęciem jakiegokolwiek poważnego projektu internetowego.

Teraz, jeśli pracujesz nad tym szablonem, masz możliwość dodania całego własnego kodu niestandardowego. Ale proponuję zrobić kolejny krok i zbudować aplikację, taką jak Initializr. Spowoduje to wygenerowanie typowego układu strony, a nawet pozwoli ci dostosować, które elementy są zawarte w pakiecie szablonu. Dostępny jest kod Google Analytics, skrócone pliki jQuery, .htaccess lub web.config, a także kilkanaście innych opcji.

Projektanci CSS

Teraz, gdy przyjrzeliśmy się nieco kodowaniu HTML5, powinniśmy także rozważyć niektóre popularne struktury CSS3. Są one bardziej otwarte niż szablony HTML, ponieważ możesz zrobić znacznie więcej za pomocą CSS. Projektanci zdadzą sobie również sprawę z trudności w budowaniu zgodnego ze standardami kodu dla wszystkich nowoczesnych przeglądarek internetowych.

System Golden Grid jest fantastyczny jako szkielet dla responsywnych projektów internetowych. Układy te będą dostosowywane do ekranów mobilnych i składane do wewnątrz podczas zmiany rozmiaru okna przeglądarki. Pomaga także w planowaniu szerokości i rozmiaru każdego obszaru kolumny. Blueprint to kolejna poręczna struktura CSS, którą powinieneś sprawdzić. Świetnie nadaje się do tworzenia niestandardowych stron internetowych i oferuje fantastyczną dokumentację.

Jednak jeśli chodzi o narzędzia CSS, CSS3 PIE musi znajdować się w moich trzech ulubionych. Jest to prosta aplikacja internetowa, która wyświetla odpowiedni kod do renderowania efektów CSS3 obsługiwanych w przeglądarce Internet Explorer 6-9. Możesz tworzyć dynamiczne gradienty liniowe, zaokrąglone rogi i cienie ramek z konfigurowalnymi ustawieniami. Witryna zawiera przykłady IE, jeśli chcesz je również sprawdzić.

Deweloperzy będą również dążyć do zmniejszenia rozmiarów plików do produkcji. Czysty CSS to jeden zasób, w którym możesz wybierać spośród wielu opcji, aby uprościć kod i zmniejszyć rozmiar pliku. Inny alternatywny kod Beautifier nie oferuje tylu opcji, ale może być łatwiejszy w użyciu.

Dostosowywanie motywów za pomocą WordPress

Publikowanie WordPress jest z łatwością najpopularniejszym systemem CMS w tej epoce. Widzieliśmy prawdopodobnie miliony nowych blogów i stron internetowych opartych na tym fantastycznym rozwiązaniu do zarządzania treścią. W związku z tym programiści WordPress są bardzo zainteresowani budowaniem niestandardowych widgetów i motywów witryn.

Nowa wersja Constellation Theme daje programistom WordPress łatwiejszy punkt wyjścia niż domyślne szablony. Nowy motyw Twenty Eleven jest bardzo sprytny i minimalistyczny, ale nie może konkurować z całym szablonem motywu zbudowanym na płycie HTML5Boilerplate. Motyw Constellation WP zawiera nawet zapytania o media dla różnych rozdzielczości urządzeń, takich jak iPhone i tablety iPad.

Wonderflux to kolejny szablon motywu WordPress, który nie jest tak zaawansowany w rozwoju. Niedawno został wydany z wersji beta do wersji 1.0 wraz z dokumentacją online. Ten temat jest nieco bardziej skomplikowany niż Constellation, który daje większą kontrolę nad układem. Programiści włączyli niestandardowe haki PHP, funkcje i filtry, aby Twoja strona WordPress była bardziej dynamiczna.

Poważni programiści WP powinni sprawdzić oba rozwiązania, aby sprawdzić, czy któreś z nich pomoże w przyszłych projektach.

Wyszukiwanie darmowych gadżetów dla programistów

W porównaniu z PSD i grafiką społeczność twórców stron internetowych wydaje się być trochę pozbawiona darmowych galerii. Zawsze możesz znaleźć świetne skrypty na Githubie, ale często musisz szukać i testować je samodzielnie.

Trudno jest znaleźć witryny oferujące bezpłatne pliki do pobrania i wersje demonstracyjne, a także przykłady skryptów. Moim ulubionym nowym źródłem jest CodeVisually, który kataloguje narzędzia programistyczne, wtyczki, biblioteki i inne fajne rzeczy. Układ jest skonfigurowany jak galeria, gdzie każda strona zawiera link do produktu, zrzut ekranu demonstracyjnego i kilka dalszych szczegółów.

Galeria zawiera setki przykładów kodu HTML / HTML5, bibliotek CSS3, a na pewno mnóstwo jQuery. Odkryłem również, że jest to świetna strona internetowa, aby przesłać publicznie własny otwarty kod źródłowy. Twoje imię i nazwisko są powiązane z przesłaniem, a ponadto możesz umieścić linki do własnej strony internetowej, na której użytkownicy mogą uzyskać dostęp do kodu.

Interfejsy API aplikacji WWW

Bardzo popularnym trendem we współczesnym tworzeniu stron internetowych jest tworzenie interfejsów API jako aplikacji innych firm. Większość głównych marek sieci społecznościowych zawiera działający interfejs API i segment dokumentacji bezpośrednio na swojej stronie internetowej. Plus jest mnóstwo darmowych klas wrapperów na Githubie napisanych we wszystkich głównych językach programowania zaplecza.

Deweloperzy powinni czuć się komfortowo pracując z tymi typami bibliotek kodu, ponieważ są one coraz bardziej popularne. Korzystając z systemu OAuth, można szybko zbudować bazę użytkowników z wielu z tych aplikacji. Poniżej wymieniłem tylko kilka odniesień do popularnych interfejsów API online i ich pełną dokumentację.

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

Korzystaj z tych zasobów w miarę możliwości w nowych projektach. Sieć staje się coraz bardziej połączona, a użytkownicy zawsze przybywają do następnej dużej aplikacji. Możesz rekrutować tysiące bardziej oddanych członków do swojej aplikacji, gdy Twoi użytkownicy nie muszą rejestrować całego nowego konta i mogą zamiast tego zarejestrować się bezpośrednio na Twitterze lub Facebooku.

Pytania i odpowiedzi Zasoby

Najkorzystniejszym doświadczeniem między programistami jest zadawanie pytań i uczenie się nowych technik. Społeczność programistów jest zawsze bardzo pomocna dla nowych użytkowników i chętnie oferuje swoją wiedzę w wielu sytuacjach. Jeśli masz jakieś problemy lub konkretne pytania dotyczące projektu, przeszukaj Google, aby znaleźć powiązane forum programisty.

Osobiście muszę polecić dołączenie do społeczności Stack Exchange, jeśli nie jesteś jeszcze członkiem. Obejmuje to niesamowite strony internetowe, takie jak Stack Overflow i Super User, w których można uzyskać pomoc programistyczną w zasadzie wszystko. Członkowie społeczności znają wszystkie główne języki internetowe, w tym jQuery i mniejsze klasy PHP.

Czystą sztuczką, której się nauczyłem, jest przeszukiwanie Google i sprawdzenie, czy problem został już rozwiązany. Wprowadź kilka słów kluczowych do wyszukiwarki Google i dodaj przyrostek site: stackoverflow.com. Wszystkie zwrócone wyniki wyszukiwania będą pytaniami z archiwów Stack Overflow - jeśli masz szczęście, możesz znaleźć rozwiązanie problemu.

Szybkość testowania strony online

To nowe narzędzie wydane przez Google Developers naprawdę robi wrażenie. Aplikacja Page Speed Online przeanalizuje zawartość Twojej witryny i wygeneruje raport analityczny na temat prędkości. Obejmuje to możliwe rozwiązania mające na celu skrócenie czasu ładowania i dłuższe odwiedzanie witryny.

Może również pomóc w określeniu problemów ze współczynnikami odrzuceń i niższymi konwersjami. Google Analytics jest koniecznością dla każdej witryny, ale uważam, że Page Speed osiąga wyższy poziom analizy.

Dane wyjściowe raportu są klasyfikowane w kolejności od wysokiego do niskiego priorytetu i często zawierają wiele różnych elementów. Jeśli rozumiesz konfiguracje LAMP i pracujesz na serwerach Apache, możesz również rozważyć moduł mod_pagespeed. Automatycznie wykonuje wiele z tych optymalizacji w witrynie, aby zmniejszyć czas ładowania i buforować ważne dane internetowe (obrazy, ikony, skrypty).

Najlepsze oprogramowanie dla programistów

Między dwoma najpopularniejszymi systemami operacyjnymi można znaleźć dziesiątki programów. Od oprogramowania graficznego po edytory kodu źródłowego i środowiska IDE, twórcy stron internetowych mają do wyboru wiele zasobów. Ale jeśli szukasz popularnych sugestii, polecam następujące tytuły.

Mac OS X

Panic to firma programistyczna, która stworzyła Codę - zdecydowanie najlepszą aplikację do tworzenia stron internetowych dla komputerów Mac. Masz dostęp do edytora kodu źródłowego, terminala i klienta FTP, gdzie możesz dokonywać zmian bezpośrednio do plików serwera. Coda dodatkowo obsługuje długą listę podświetlania składni dla języków takich jak HTML, XML, CSS, JavaScript, PHP, SQL i wiele innych.

Jeśli jednak potrzebujesz darmowego rozwiązania, sprawdź Komodo Edit. Oprogramowanie zostało opracowane dla systemów Windows i Mac, open source i całkowicie bezpłatne do pobrania. Zawiera całą tę samą obsługę podświetlania składni i wiele podobnych funkcji jak Coda (niestety nie FTP). TextWrangler to kolejne darmowe rozwiązanie, które warto wypróbować, także prosty edytor tekstu.

Aby uzyskać bezpłatną aplikację FTP, sprawdź Cyberduck w Mac App Store. Chociaż osobiście wolę płatną alternatywę, taką jak Yummy FTP lub Transmit.

Microsoft Windows

Pakiet oprogramowania Adobe zawsze przychodzi na myśl, gdy myślisz o projektowaniu i tworzeniu stron internetowych. Użytkownicy systemu Windows mają mnóstwo alternatyw dla programu Dreamweaver, a wiele z nich jest całkowicie darmowych.

Notepad ++ to świetny przykład oprogramowania Open Source Win32. Projekt jest nadal aktywny i często publikuje aktualizacje (prawie co miesiąc). Uwielbiam ich interfejs z kartami i wsparcie dla wielu dodatkowych wtyczek. Jak już wspomniałem, Komodo Edit jest również oferowane dla Windows XP / Vista / 7, więc możesz spróbować tego alternatywnie.

Programiści internetowi w systemie Windows nie są też pozbawieni klienta FTP. Filezilla jest prawdopodobnie najpopularniejszą darmową alternatywą. Aby uzyskać alternatywne rozwiązania, sprawdź naszą bezpłatną listę klientów FTP wraz z podobnymi narzędziami.

Inne pomocne zasoby Dev

100 niezbędnych narzędzi do tworzenia stron internetowych
Najlepsze z 2011: Najlepsze użyteczne wtyczki i samouczki jQuery
Poradniki Ruby on Rails dla programistów WWW
7 ekscytujących trendów rozwoju sieci na rok 2011

Wniosek

Do tej pory pierwszy kwartał 2012 r. Rozpoczął się z hukiem! Widzieliśmy już niesamowite treści wylewające się z projektantów i twórców stron internetowych z całego świata. Profesjonaliści budujący dla sieci mają do dyspozycji tak wiele narzędzi w porównaniu z 1-2 lata temu.

Mam nadzieję, że ta ogromna kompilacja narzędzi i zasobów popchnie twoją metodologię do lepszego rozwoju. Uwielbiam pracować z twórcami stron internetowych i cały czas poznawać nowe projekty. Jednak jest tylko tyle miejsca na nowe zasoby, które możemy uwzględnić, więc na pewno straciłem kilka klejnotów. Jeśli masz pomysły lub sugestie dotyczące powiązanych zasobów programistów internetowych, poinformuj nas o tym w obszarze dyskusji.