Webentwickler-Ressourcen Eine Mega-Compilation

Das Internet wächst ständig und es gibt Hunderttausende von kollektiven Ressourcen für zukünftige Webentwickler. Von Online-Artikeln, Tutorials, Tools, Anleitungen und Videos können Sie alles über das Web lernen. Online zu springen war noch nie einfacher!

Im Folgenden habe ich eine riesige Sammlung von sehr hilfreichen Webentwickler-Ressourcen zusammengestellt. Dazu gehören Anfängermaterial für HTML5 / CSS3 sowie kompliziertere Theorien für JavaScript und PHP-Programmierung. Einige begeisterte Entwickler können diese Sprachen erlernen und beliebte Webanwendungen ähnlich wie Twitter oder Tumblr erstellen. Wenn Sie an hilfreichen Ressourcen für moderne Webentwickler interessiert sind, werden Sie diese Zusammenstellung zuverlässiger Ressourcen lieben.

Hilfreiche Online-Magazine

Die Welt des Bloggens ist explodiert und Hunderttausende neuer Autoren haben sich mit dem Internet beschäftigt. Viele dieser Online-Blogs konzentrieren sich auf Design und Webentwicklung. Sie können viele hilfreiche Ressourcen finden, indem Sie einfach diese RSS-Feeds durchblättern.

Je nachdem, welche Art von Sprache Sie kodieren, wird Ihr Interesse an einem dieser Blogs bestimmt. Wir können uns auf die Webentwicklung konzentrieren und davon ausgehen, dass dies die gesamte Frontend-Arbeit (HTML5 / CSS3 / JavaScript) sowie einfache Backend-Skripts (PHP / RoR / Python / SQL) umfasst. Ich habe mir die Freiheit genommen, eine einzige Liste der beliebtesten Dev-Blogs zu erstellen, die sich auf Front-End- und Back-End-Code konzentrieren.

• Nettuts+
• 24 Möglichkeiten
• Webmonkey
• Smashing Coding
• Webitect
• Element prüfen
• Katzen, die kodieren
• Line25 Web Design Blog

Es gibt sicherlich viele andere, die Sie berücksichtigen sollten. Ich empfehle Ihnen, Google auf der Suche nach Tutorials und Artikeln zu Ihrer bevorzugten Dev-Sprache zu suchen. Mit einem RSS-Feed-Aggregator wie Google Reader können Sie Listen aller neuesten Artikel aus diesen Magazinen erstellen. Dies ist eine großartige Möglichkeit, um Ihren Arbeitstag zu beginnen oder sogar ein wenig Zeit für die Durchführung von Tutorials zu töten.

jQuery-Plugins in Hülle und Fülle

Sowohl die jQuery-Kernbibliothek als auch jQuery Mobile haben im vergangenen Jahr an Bedeutung gewonnen. Mit diesen Open-Source-Bibliotheken können Sie ein Front-End-Erlebnis mit reichhaltigen Animationen und einfach zu implementierenden Ajax-Funktionen entwerfen, auch wenn die mobile Bibliothek in Bezug auf Plug-Ins und Drittanbietercode nicht ganz mit ihrem übergeordneten Element auf dem Laufenden ist.

In ähnlicher Weise kann ein anderes fantastisches Produkt, bgStretcher, als dynamisches Hintergrundskript verwendet werden. Es dauert eine Reihe von Bildern und eine gewisse Skalierung der Größen ist proportional zur Bildschirmauflösung Ihres Benutzers. Schauen Sie sich die wunderbare Demo an, um dies in Aktion zu sehen. Beide Plugins können kostenlos heruntergeladen werden und dienen als einfache Beispiele für den fantastischen Code von Drittanbietern, der auf jQuery basiert. Wenn Sie mit diesen Ressourcen arbeiten, sparen Sie viel Zeit bei der Projektarbeit, sodass Sie das Rad nicht neu erfinden müssen.

Im Allgemeinen empfehle ich auch, die Websites Ajax Blender und Dynamic Drive für JavaScript-Codeausschnitte / Plugins zu durchsuchen. Die Bibliothek ist nicht riesig, wächst jedoch ständig mit den neuen, vom Benutzer eingereichten Inhalten. Die Sites enthalten nicht nur jQuery-Plugins, sondern auch MooTools- und Prototype-Bibliotheken.

Wenn Sie mit der jQuery Mobile-Bibliothek arbeiten, möchte ich ein anderes Tool jqmPhp empfehlen. Es ist eine dynamische PHP-Klasse, in der Sie auf einfache Funktionen verweisen können, um Zeilen und Zeilen mit HTML5-Code auszugeben, die über jQuery Mobile bereitgestellt werden. Es ist ehrlich gesagt der einfachste Weg, dynamische mobile Apps, die um eine PHP-Shell herum gebaut werden, zu prototypisieren. Der Site-Blog enthält zahlreiche Beispielreferenzen.

Gebäude in HTML5 & CSS3

Wenn wir über Front-End-Webentwicklung sprechen, geht es in der Regel um Effizienz. Sie haben beim Erstellen einer Website in HTML / CSS nicht die gleichen Probleme wie beim Codieren einer Back-End-Ruby-Anwendung. In HTML gibt es keine echte Logik oder Fehlerbehandlung - meist geht es darum, wie schnell Sie das Layoutdesign in allen Browsern richtig skalieren können.

Zuerst muss ich die HTML5-Boilerplate empfehlen. Dies ist eine Vorlage für gestrippte nackte Knochen, die alle enthält “Standard” HTML5-Webseitenelemente in einem Paket. Dazu gehören ein Standard-Stylesheet, JavaScript, ein Favicon, Apple-Touch-Symbole und viele andere Extras. Es ist ein 100% kostenloses Projekt und Sie können sogar zu ihrem Github-Repo beitragen. Dies ist ein Muss für alle Entwickler, bevor Sie mit einem ernsthaften Webprojekt beginnen.

Wenn Sie diese Boilerplate abarbeiten, haben Sie die Möglichkeit, Ihren eigenen benutzerdefinierten Code hinzuzufügen. Aber ich schlage vor, den nächsten Schritt zu machen und mit einer App wie Initializr zu bauen. Dadurch wird ein typisches Website-Layout erstellt, und Sie können sogar anpassen, welche Elemente in Ihrem Paket enthalten sind. Google Analytics-Code, minimierte jQuery-, .htaccess- oder web.config-Dateien sowie etwa ein Dutzend weitere Optionen sind verfügbar.

CSS-Designer

Nachdem wir uns nun ein wenig mit HTML5-Code beschäftigt haben, sollten wir auch einige der gängigen CSS3-Frameworks berücksichtigen. Diese sind offener als HTML-Vorlagen, da Sie mit CSS viel mehr tun können. Konstrukteure werden auch die Schwierigkeit erkennen, standardkonformen Code für alle modernen Webbrowser zu erstellen.

Das Golden Grid System eignet sich hervorragend als Rahmen für responsive Webdesigns. Diese Layouts passen sich an mobile Bildschirme an und falten sich nach innen, wenn Sie die Größe des Browserfensters ändern. Es hilft auch bei der Planung der Breite und Größe jedes Spaltenbereichs. Blueprint ist ein weiteres praktisches CSS-Framework, das Sie ausprobieren sollten. Es eignet sich hervorragend zum Erstellen benutzerdefinierter Websites und bietet eine fantastische Dokumentation.

Wenn es um CSS-Tools geht, muss CSS3 PIE jedoch zu meinen drei Favoriten gehören. Es ist eine einfache Web-App, die den richtigen Code zum Rendern der in Internet Explorer 6-9 unterstützten CSS3-Effekte ausgibt. Sie können mit anpassbaren Einstellungen dynamische lineare Verläufe, abgerundete Ecken und Rahmenschatten erstellen. Die Website enthält IE-Beispiele, wenn Sie sie auch ausprobieren möchten.

Entwickler werden auch versuchen, ihre Dateigrößen für die Produktion zu reduzieren. Clean CSS ist eine Ressource, in der Sie aus zahlreichen Optionen auswählen können, um Ihren Code zu vereinfachen und die Dateigröße zu reduzieren. Ein anderer alternativer Code Beautifier bietet nicht so viele Optionen, ist aber möglicherweise einfacher zu verwenden.

Anpassen von Designs mit WordPress

WordPress Publishing ist mit Abstand das beliebteste CMS dieser Zeit. Wir haben möglicherweise Millionen von neuen Blogs und Websites gesehen, die alle von dieser fantastischen Content-Management-Lösung angetrieben werden. WordPress-Entwickler sind daher sehr gefragt, wenn es darum geht, benutzerdefinierte Widgets und Webseitenthemen zu erstellen.

Die neue Version von Constellation Theme bietet WordPress-Entwicklern einen leichteren Ausgangspunkt als die Standardvorlagen. Das neue Twenty Eleven-Design ist sehr schlau und minimalistisch, kann jedoch nicht mit einer gesamten Theme-Vorlage konkurrieren, die auf HTML5Boilerplate basiert. Das Constellation WP-Design enthält sogar Medienabfragen für verschiedene Geräteauflösungen wie iPhone- und iPad-Tablets.

Wonderflux ist eine weitere WordPress-Theme-Vorlage, die noch nicht so weit fortgeschritten ist. Es wurde kürzlich aus der Betaversion in Version 1.0 zusammen mit Online-Dokumentation veröffentlicht. Dieses Thema ist etwas komplizierter als Constellation, wodurch Sie mehr Kontrolle über das Layout haben. Die Entwickler haben eigene PHP-Hooks, -Funktionen und -filter eingebaut, um Ihre WordPress-Site dynamischer zu gestalten.

Seriöse WP-Entwickler sollten beide Lösungen überprüfen, um zu sehen, ob eine von ihnen bei zukünftigen Projektarbeiten helfen würde.

Finden von Web Developer-Freebies

Im Vergleich zu PSDs und Grafiken scheint die Webentwicklungs-Community in Freebie-Galerien ein wenig zu fehlen. Sie können auf Github immer gute Skripte finden, aber Sie müssen sie oft selbst suchen und ausprobieren.

Es ist schwierig, Websites zu finden, die kostenlose Downloads und Demos sowie Skriptbeispiele anbieten. Meine neue Lieblingsressource ist CodeVisually, die vom Benutzer eingereichte Entwicklungstools, Plugins, Bibliotheken und andere nützliche Dinge katalogisiert. Das Layout ist wie eine Galerie aufgebaut, in der jede Seite einen Link zum Produkt, einen Demo-Screenshot und einige weitere Details enthält.

Die Galerie enthält Hunderte von Beispielen für HTML / HTML5-Vorlagencode, CSS3-Bibliotheken und sicherlich auch eine Menge jQuery-Dateien. Ich habe auch festgestellt, dass dies eine großartige Website ist, um Ihren eigenen Open Source-Code der Öffentlichkeit vorzulegen. Ihr Name ist an die Vorlage gebunden, und Sie können Links zu Ihrer eigenen Website setzen, auf die Benutzer auf den Code zugreifen können.

Webanwendungs-APIs

Ein sehr beliebter Trend in der modernen Webentwicklung besteht darin, APIs als Drittanbieter-App aufzubauen. Die meisten der führenden Marken sozialer Netzwerke verfügen auf ihrer Website über ein funktionsfähiges API- und Dokumentationssegment. Außerdem gibt es unzählige kostenlose Wrapper-Klassen auf Github, die in allen wichtigen Back-End-Programmiersprachen geschrieben sind.

Entwickler sollten sich mit dieser Art von Codebibliotheken wohl fühlen, da ihre Nachfrage steigt. Mit dem OAuth-System können Sie aus vielen dieser Anwendungen schnell eine Benutzerdatenbank aufbauen. Im Folgenden sind nur einige Verweise auf beliebte Online-APIs und deren vollständige Dokumentation aufgeführt.

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

Nutzen Sie diese Ressourcen wann immer möglich für neue Projekte. Das Web wird immer enger und die Benutzer strömen immer zur nächsten großen App. Sie können tausende weitere Mitglieder für Ihre App gewinnen, wenn Ihre Besucher keinen neuen Account registrieren müssen, sondern sich direkt über Twitter oder Facebook anmelden können.

Q & A-Ressourcen

Die beste Erfahrung zwischen Entwicklern besteht darin, Fragen zu stellen und neue Techniken zu erlernen. Die Entwicklergemeinde ist für Neuankömmlinge immer hilfreich und bereit, in vielen Situationen ihr Fachwissen zur Verfügung zu stellen. Wenn Sie Probleme oder spezifische Fragen zu einem Projekt haben, durchsuchen Sie Google nach einem Forum für verwandte Webentwickler.

Ich muss persönlich empfehlen, der Stack Exchange-Community beizutreten, wenn Sie nicht bereits Mitglied sind. Dazu gehören erstaunliche Websites wie Stack Overflow und Super User, auf denen Sie Programmierhilfe zu praktisch allem erhalten können. Community-Mitglieder können sich in allen wichtigen Web-Sprachen auskennen, einschließlich jQuery und kleineren PHP-Klassen.

Ein guter Trick, den ich gelernt habe, ist das Durchsuchen von Google, um zu sehen, ob das Problem bereits gelöst wurde. Geben Sie einige Suchbegriffe in Ihre Google-Suche ein und hängen Sie das Suffix an Site: stackoverflow.com. Bei allen zurückgegebenen Suchergebnissen handelt es sich um Fragen aus Stack Overflow-Archiven. Wenn Sie Glück haben, finden Sie möglicherweise die Lösung für Ihr aktuelles Problem.

Seitengeschwindigkeit online testen

Dieses neue Tool, das von Google Developers veröffentlicht wurde, war wirklich beeindruckend. Die App Page Speed ​​Online analysiert den Inhalt Ihrer Website und erstellt einen Analysebericht zu Ihren Geschwindigkeiten. Dies beinhaltet mögliche Lösungen, um Ladezeiten zu reduzieren und Ihre Besucher länger auf der Website zu halten.

Außerdem können Sie Probleme mit Absprungraten und niedrigeren Umsätzen ermitteln. Google Analytics ist ein Muss für jede Website, aber ich bin der Meinung, dass Page Speed ​​gerade eine höhere Analyseebene erreicht.

Die Berichtsausgabe hat eine Rangfolge von hoher bis niedriger Priorität und enthält oft viele verschiedene Elemente. Wenn Sie LAMP-Setups verstehen und auf Apache-Servern arbeiten, können Sie auch das Modul mod_pagespeed in Betracht ziehen. Viele dieser Optimierungen werden auf Ihrer Website automatisch durchgeführt, um Ladezeiten zu reduzieren und wichtige Webdaten (Bilder, Symbole, Skripts) zu zwischenspeichern..

Die Software des besten Entwicklers

Zwischen den beiden beliebtesten Betriebssystemen finden Sie Dutzende von Programmen. Von Grafiksoftware über Quellcode-Editoren und IDEs stehen Web-Entwicklern viele Ressourcen zur Auswahl. Wenn Sie jedoch nach populären Vorschlägen suchen, empfehle ich die folgenden Titel.

Mac OS X

Panic ist ein Softwareunternehmen, das Coda entwickelt hat - mit Abstand die beste Webentwicklungs-App für Mac. Sie haben Zugriff auf einen Quellcode-Editor, ein Terminal und einen FTP-Client, in dem Sie Änderungen direkt an den Serverdateien vornehmen können. Coda unterstützt außerdem eine lange Liste von Syntaxhervorhebungen für Sprachen wie HTML, XML, CSS, JavaScript, PHP, SQL und viele mehr.

Wenn Sie jedoch eine kostenlose Lösung benötigen, sollten Sie Komodo Edit ausprobieren. Die Software wurde für Windows und Mac entwickelt, ist Open Source und kann kostenlos heruntergeladen werden. Es enthält alle Unterstützung für Syntaxhervorhebung und viele ähnliche Funktionen wie Coda (leider kein FTP). TextWrangler ist eine weitere kostenlose Lösung, die Sie ausprobieren können, auch nur einen einfachen Texteditor.

Für eine kostenlose FTP-Anwendung besuchen Sie Cyberduck im Mac App Store. Ich persönlich bevorzuge eine kostenpflichtige Alternative wie Yummy FTP oder Transmit.

Microsoft Windows

Wenn Sie über Webdesign und -entwicklung nachdenken, wird Ihnen die Adobe-Softwaresuite immer in den Sinn kommen. Windows-Benutzer haben viele Alternativen zu Dreamweaver, und viele davon sind völlig kostenlos.

Notepad ++ ist ein hervorragendes Beispiel für einige Open Source-Win32-Software. Das Projekt befindet sich noch in der aktiven Entwicklung und veröffentlicht regelmäßig (fast monatlich) Updates. Ich liebe ihre tabbed Oberfläche und Unterstützung für so viele zusätzliche Plugins. Wie bereits erwähnt, wird Komodo Edit auch für Windows XP / Vista / 7 angeboten, Sie können es also alternativ ausprobieren.

Webentwickler unter Windows haben auch keinen FTP-Client. Filezilla ist wahrscheinlich die beliebteste kostenlose Alternative. Alternativen finden Sie in unserer kostenlosen FTP-Client-Liste mit ähnlichen Tools.

Andere hilfreiche Entwicklerressourcen

• 100 wesentliche Webentwicklungstools
• Best Of 2011: Beste nützliche Plugins und Tutorials für jQuery
• Ruby on Rails-Tutorials für Anfänger in der Webentwicklung
• 7 Aufregende Trends in der Webentwicklung für 2011

Fazit

Das erste Quartal 2012 hat bisher mit einem Knall begonnen! Wir haben bereits einige erstaunliche Inhalte von Designern und Webentwicklern aus der ganzen Welt gesehen. Profis, die für das Web aufbauen, verfügen über so viele Tools wie noch vor 1-2 Jahren.

Ich hoffe, dass diese umfangreiche Zusammenstellung von Tools und Ressourcen Ihre Methodik für eine bessere Entwicklung vorantreiben wird. Ich arbeite sehr gerne mit Web-Entwicklern zusammen und lerne ständig neue Projekte. Es gibt jedoch nur so viel Platz für neue Ressourcen, die wir einbeziehen können. Ich habe also ein paar Juwelen vermisst. Wenn Sie Ideen oder Vorschläge für verwandte Webentwickler-Ressourcen haben, teilen Sie uns dies im Diskussionsbereich mit.