Linkliste Bildbearbeitung Und Webdesign

Linkliste Bildbearbeitung und Webdesign

Digitale Fotografie und Bildbearbeitung

Kostenlose Bildbearbeitungsprogramme, RAW-Entwickler, Bildverwaltung, Plug-Ins

Kostenlose Bildbearbeitungsprogramme GIMP: Das kostenlose Bildbearbeitungsprogramm für Windows, Mac OS und Linux: • http://www.gimp.org

Plug-ins zu GIMP: • http://registry.gimp.org/

Paint.NET: Einfaches, aber doch umfangreiches Bildbearbeitungsprogramm für Windows: • http://paint.net/

RAW-Konverter und Codecs UFRaw: Der Open-Source-RAW-Entwickler zu GIMP als Plug-in und Stand-Alone-Programm, für Windows und Linux (in den Mac OS Distributionen des GIMP für Mac OS enthalten): • http://ufraw.sourceforge.net/Install.html

RAW Therapee: Ein Open-Source-RAW-Entwickler und Fotobearbeitungsprogramm, auch für die Zusammenarbeit mit GIMP, für Windows und Linux: • http://www.rawtherapee.com/?mitem=3

Photivo, ähnlich wie RawTherapee ein Open-Source-RAW-Entwickler und Fotobearbeitungsprogramm, mit Anbindung an GIMP: • http://photivo.org/

Scarab Darkroom 2 Lite, ein RAW-Entwickler in einer Freeware- und einer Sharewareversion: •http://www.scarablabs.com/scarab-darkroom

Raw Photo Processor (Mac OS X): • http://www.raw-photo-processor.com

RAW-Konverter (Linkliste): • http://www.fotocommunity.de/info/RAW-Konverter

RAW-Codecs verschiedener Kamerahersteller bei Microsoft (zur Darstellung von Vorschaubildern im Betriebssystem): • http://www.microsoft.com/prophoto/downloads/codecs.aspx

RAW-Codecs verschiedener Kamerahersteller bei FastPictureViewer (zur Darstellung von Vorschaubildern im Betriebssystem): • http://www.fastpictureviewer.com/codecs/

Bildverwaltungsprogramme Google Picasa: Bildverwaltungsprogramm mit einfachen Möglichkeiten der Bildbearbeitung und vielen Assistenten zum Drucken, Versenden der Bilder per E-Mail und mehr, für Windows: • http://picasa.google.de/

Irfan Viewer: zum Betrachten und Konvertieren von Grafikdateien, Datei- und Bildbrowser, Diashow, Stapelverarbeitung und Bildbearbeitung. Mehr als 400 Grafikformate werden unterstützt. Für den Privatgebrauch kostenlos. • http://www.irfanview.de/

XnView: Software zum Betrachten und Konvertieren von Grafikdateien, Datei- und Bildbrowser, Diashow, Thumbnail Generator plus Bildbearbeitung. Mehr als 400 Grafikformate werden unterstützt. Für den Privatgebrauch kostenlos. • http://www.xnview.de/

Lizenzfreie Bilder und Hintergründe

• http://browse.deviantart.com/ • http://de.fotolia.com/ • http://deutsch.istockphoto.com/ • http://www.fotodatenbank.com/ • http://www.piqs.de/ • http://www.pixelio.de/ • http://www.fotosearch.de/ (Suche, Linkliste)

Cross-Over Pastor Pixel: Gute Seite mit Photoshop-Tutorials und Add-Ons, Bildbearbeitung allgemein, Webgrafik, Flash, Dreamweaver, Javascript, Webdesign allgemein: • http://www.pastorpixel.de/ Webdesign

Programme – Browser, Websites testen

Aktuelle Browser und Browser-Plug-ins Microsoft Edge: der neue Webbrowser von Microsoft, der zusammen mit dem Betriebssystem Windows 10 installiert wird. Edge ist jedoch nicht nur ein Browser, der sich parallel zum Internet Explorer nutzen lässt, sondern auch Suchwerkzeug und Dateibetrachter, z.B. für PDF-Dateien. Ein separater Download ist nicht vorgesehen: • http://windows.microsoft.com/de-de/windows-10/getstarted-get-to-know-microsoft-edge Microsoft Internet Explorer • http://windows.microsoft.com/de-de/internet-explorer/download-ie Firefox: Schneller Browser für alle Betriebssysteme und Sprachen • http://www.mozilla.com/en-US/firefox/all.html Firefox-Add-Ons: Plug-ins und Add-ons zum Firefox für Webdesign und verschiedene andere Zwecke: • https://addons.mozilla.org/de/firefox/ Thunderbird: E-Mail-Programm zu Firefox, alle Betriebssysteme und Sprachen: • http://www.mozillamessaging.com/en-US/thunderbird/all.html Lightning, früher Sunbird: Kalender-Programm und Terminplaner zum Firefox, für alle größeren Betriebssysteme: • http://www.sunbird-kalender.de/downloads.php Seamonkey: Browsersuite aus der Mozilla-Familie, das Module für Browser, Mail & Newsgroups, Erstellen von Webseiten, Chat und einiges mehr bietet, für alle größeren Betriebssysteme: • http://www.seamonkey.at/download/ Safari: Schneller Browser von Apple für Mac OS und Windows: • http://www.apple.com/de/safari/ Opera: Norwegischer Browser für alle Betriebssysteme: • http://www.opera.com/download/?custom=yes Google Chrome: Browser von Google für Windows: • https://www.google.com/chrome/browser/desktop/index.html Citrio: Open-Source-Variante des Google-Browsers für alle Betriebssysteme, ohne die „Neugier“ des Originals von Google: •http://citrio.com/ Maxthon Cloud Browser •http://de.maxthon.com/ K-Meleon: Schlanker Mozilla-Browser für Windows: • http://kmeleon.sourceforge.net/download.php iCab: schlanker Browser speziell für Mac OS, Shareware/kostenlos mit Einschränkungen der Funktion: • http://www.icab.de/

Allgemeine Informationen zum Thema Webbrowser: • https://de.wikipedia.org/wiki/Webbrowser Auflistung und Entwicklungsgeschichte aller bislang relevanten Browser (Englisch): • https://en.wikipedia.org/wiki/List_of_web_browsers Historische und exotische Browser: • http://browsers.evolt.org/

Cross-Browser-Test Websites und Programme, um eigene Websites in verschiedenen Browsern, Bildschirmauflösungen und Betriebssystemen zu testen: • http://browsershots.org • http://www.viewlike.us • http://www.powermapper.com/products/sortsite/checks/browser-compatibility/ • http://t3n.de/news/cross-browser-testing-tools-542708/ • http://t3n.de/news/cross-browser-testing-501579/ • http://www.elmastudio.de/webdesign/tipps-und-tools/webseiten-cross-browsertests-ein- kleiner-uberblick-praktischer-tools-und-tipps/

Welche Browser unterstützen HTML5 und CSS3 ab welcher Version? • http://designyourweb.info/heutige-browser-und-ihre-html5-kompatibilitat/7

Websites auf Handhelds und Tablett-PCs testen: • http://mattkersley.com/responsive/ (Website – mehrere Fenstergrößen auf einmal testen) • https://dev.opera.com/ (Website) • http://mobile1st.com/ (Website und Offline-Programme zum Testen auf mobilen Endgeräten)

Statistiken zu Browsern und Bildschirmauflösung Wenn Sie sich informieren möchten, welches der am häufigsten genutzte Browser oder die am häufigsten verwendete Bildschirmauflösung ist, finden Sie statistische Angaben dazu auf dieser Seite: • http://www.webhits.de/deutsch/index.shtml?webstats.html

Programme und Online-Dienste – HTML- und CSS-Editoren und Validatoren, Sitemap Generatoren (kostenlos)

ASCII-Editoren – universell einsetzbare Editoren ASCII-Editoren sind einfache Zeichen-Editoren. Mit ihnen lässt sich der Quellcode für jede beliebige Programmierung, aber eben auch für HTML und CSS verfassen. Mit dem Betriebssystem Windows steht im Zubehör der ASCII-Editor Notepad, in neueren Versionen nur Editor genannt bereit. In Mac OS steht das entsprechende Programm TextEdit bereit, das sich ebenfalls als ASCII-Editor nutzen lässt.

Notepad++ (Open Source, kostenfrei): komfortabler ASCII-Editor, unter anderem mit Syntax- Highlighting (farbiger Hervorhebung von Tags). Download: • http://notepad-plus-plus.org/

HTML-Editoren Arachnophilia (Freeware): Text-, HTML- und Programmier-Editor, Englisch, für Windows, Javaversion für Linux und Mac OS X. Download: • http://arachnoid.com/arachnophilia/index.php

Bluefish (Open Source, kostenfrei): GTK-HTML-Editor für erfahrene Web-Designer und Programmierer (nur Quelltext), einfache Dateiverwaltung, Syntax-Highlighting, Mit HTML5-Unterstützung. Für Linux, Windows und Mac OS X. Download: • http://bluefish.openoffice.nl/index.html

Free HTML Editor (Freeware): abgespeckte Version des kostenpflichtigen CoffeeCup-HTML-Editors, bringt Assistenten für Tabellen, Frames, Forms und Fonts sowie einen FTP-Client mit, unterstützt Drag und Drop., HTML5 und CSS3, mit WYSIWYG-Funktion. Für Windows und Mac OS X, Englisch. Download: • http://www.coffeecup.com/free-editor

HTML-Kit 292 (Freeware): kostenloser HTML-Editor inklusive HTML Tidy (HTML-Validator), mit HTML5-Unterstützung. Nur für Windows. Download: • http://www.htmlkit.com/download/

Amaya (Open Source , kostenfrei): Web-Editor, mit dem es möglich ist, Dokumente, etwa Webseiten, direkt im Web zu erstellen oder zu bearbeiten; bietet Browser-Funktionen, die mit dem Editor verknüpft sind; enthält zudem umfassende Dokumentationsfunktionen, basierernd auf dem Resource Description Framework (RDF), XLink, und XPointer. Noch keine HTML5-Unterstützung. Englisch, für Linux, Windows und Mac OS X. Download: • http://www.w3.org/Amaya/

Aptana (Open Source, kostenfrei): umfangreicher HTML- und CSS-Editor, auch für andere (Web- )Programmiersprachen geeignet. Syntax-Highlighting, komfortable Datei- und Projektverwaltung, mit Unterstützung für HTML5 und CSS3. Deutsch, für Linux, Windows und Mac OS X. Downlaod: • http://www.aptana.com/index.html

WYSIWYG-Web-Editoren Nvu: Der WYSIWYG-Web-Editor Nvu ist der Enkel von Netscape Composer. Der Linux-Distributor Linspire machte aus dem belächelten Hobbyeditor ein mächtiges Gestaltungswerkzeug, das vor allem für Anwender mit HTML- und CSS-Kenntnissen interessant ist. Denn die meisten Bearbeitungsmöglichkeiten verstecken sich in den Kontextmenüs der Elemente. Auf diese Weise lässt sich exakt festlegen, wie Nvu die Seite aufbaut; das Potenzial von HTML und CSS wird voll ausgereizt. Ursprünglich unterstützt das Programm HTML4 und CSS2 (heb; http://www.heise.de/download/nvu.html). Für Linux, Windows und Mac OS X. Download: • http://www.nvu.com/

Kompozer: Nachfolgeprogramm (Open Source) zu Nvu mit einigen Bug-Fixes. Ursprünglich unterstützt das Programm HTML4 und CSS2. Für Linux, Windows und Mac OS X. Download: • http://www.kompozer.net/

BlueGriffon: WYSIWYG-Editor zum Erstellen von Webseiten; nutzt die Firefox-Rendering-Engine Gecko zur Darstellung; Dokumente lassen sich ohne HTML-Erfahrung über die grafische Bedienoberfläche erstellen oder direkt im Quelltext bearbeiten; findet mittels DOM-Explorer schnell alle Elemente zur Bearbeitung; durch kostenpflichtige Add-ons erweiterbar. MIT HTML5 und CSS3- Unterstützung. Open Source, für Linux, Windows und Mac OS X. Download: • http://www.bluegriffon.org/pages/Download

Website X5 (Freeware/Shareware): WYSIWYG-Editor zum Erstellen von Websites, der viel mit Vorlagen und vorgefertigten Elementen wie Buttons oder Slideshows arbeitet und mehr als 1.500 Grafikmodelle als Auswahl bietet; Registrierung vor Demo-Download erforderlich; in verschiedenen Versionen mit unterschiedlichen Funktionsumfang erhältlich. Nur Windows. Download: • http://www.websitex5.com/de/kostenlose-homepage-erstellen.html

Maqetta 9 (Open Source, kostenfrei): WYSIWYG-Editor für User-Experience-Designer, mit dem sich komplexe und dynamische HTML5-Webseiten erstellen lassen; auch als Webdienst nutzbar. Download: • http://maqetta.org/ Expression Web 4: WYSIWYG-Webeditor, der Werkzeuge zum Erstellen weitgehend standardkonformer Webseiten bereitstellt (Nachfolger von MS Frontpage); unterstützt ASP.NET 2.0 und das Einbinden von XML-Datenquellen; erfordert Registrierung per Windows-Live-ID. Unterstützt HTML4, HTML5, CSS2 und CSS3. Nur für Windows. Download: • http://www.microsoft.com/en-us/download/details.aspx?id=36179

WYSIWYG Web Builder 10 (Shareware, Windows, ca. 50,00 $): Offline-WYSIWYG-Editor, der auf dem Stand der Entwicklung ist und unter anderem Responsive Design und CSS-Animationen, Menüs etc. sowie die Nutzung von Templates bietet: • http://www.wysiwygwebbuilder.com/

Quick´n Easy Web Builder: wie vor, für Mac OS X: • http://www.quickandeasywebbuilder.com/

Linkliste mit weiteren Programmen zu HTML und CSS: • http://www.drweb.de/magazin/marktubersicht-wysiwyg-web-editoren/

Webdienst: Dialog Designer (kostenlos ): Webbasierter WYSIWYG-Editor, der Webseiten für interaktive Dialoge, HTML-Formulare und Fenster in Web-Anwendungen entwirft; generiert objektorientierten PHP- oder HTML-Code zum Beispiel für Anwendungen in Perl; lässt sich in eigene Anwendungen einbinden und unterstützt Round-Trip-Engineering; Registrierung auf Herstellerseite erforderlich. Webadresse: • http://www.reinhtml.eu/index_de.htm

Web Development – Apps Im Google-Play-Store oder Chrome-Web-Store stehen inzwischen eine Vielzahl von Programmen, Apps zur Verfügung, die zumeist cloud-basiert die Entwicklung von Websites und Webanwendungen, aber auch schnelle Bildbearbeitung und Bildkorrekturen aus dem Browser heraus ermöglichen, plattformübergreifend und nicht gebunden an eine Installation auf einem bestimmten Endgerät. Viele dieser Apps sind kostenfrei. • https://chrome.google.com/webstore/category/app/11-web-development?utm_source=chrome- ntp-icon

• Codeanywhere: https://codeanywhere.com/

• Nitruos: https://www.nitrous.io/

Web Development – Entwicklungsumgebungen Visual Studio (Freeware/Shareware, Windows, zum Teil auch Mac OS X und Linux): WYSIWYG- Entwicklungsumgebung für Websites und Webanwendungen; für verschiedene Aufgaben der Programmierung werden verschiedene Plattformen zum Teil kostenlos angeboten: • https://www.visualstudio.com/products/free-developer-offers-vs.aspx?slcid=0x409

AngularJS (Open Source, kostenfrei, von Google): Unterstützt die dynamische Web-Entwicklung mit HTML, JavaScript und CSS; nutzt intern jQuery. Englisch. Download: • https://angularjs.org/

Webdienst: YAML Builder (kostenfrei): Unterstützt beim Entwickeln von CSS-Layouts, die auf YAML basieren; bietet unter anderem freie Wahl der ins Layout integrierten Basiselemente sowie der Anzahl der Content-Spalten; Layout- und Spaltenbreiten lassen sich eingeben und Spalten beliebig anordnen; JavaScript muss aktiviert sein. Englisch. Webadresse: • http://builder.yaml.de/

CSS-Editoren und Generatoren Free CSS Toolbox (Freeware): CSS-Editor mit Syntax-Highlighting und CSS-Validator; bietet automatisches Vervollständigen und hilft beim Suchen nach fehlerhaften CSS-Anweisungen. Englisch, für Windows. Download: • http://www.blumentals.net/csstool/

CSS Menu Generator (Freeware): WYSIWYG-Menügenerator, der horizontale, vertikale und Drop- down-Menüs erstellt; Menü-Items lassen sich hinzufügen sowie Menü-Typen, Farbe und Fonts auswählen; erzeugter Quellcode lässt sich in die eigene Webseite einbinden. Nur für Windows. Download: • http://wonderwebware.com/downloads.html

CSS Tab Designer (Freeware): Visueller Designer (Generator) für CSS-basierende Listen und Navigations-Karteireiter, Englisch, nur Windows. Download: • http://www.highdots.com/products/css-tab-designer

Kostenloses Programm (Registrierung erforderlich) zur Herstellung des Quellcodes für horizontale CSS3-Klappmenüs • http://free-css-menu.com/css3-layout.html

HTML- und CSS-Validatoren, Link-Checker Webdienst: W3C HTML Validator (kostenfrei): • http://validator.w3.org/

Webdienst: W3C CSS Validator (kostenfrei): h• ttp://jigsaw.w3.org/css-validator/

Html Validator (Firefox-Add-On, kostenfrei): • https://addons.mozilla.org/de/firefox/addon/html-validator/

Webdienst: W3C CSS Link Checker (kostenfrei): • http://validator.w3.org/checklink

Link Checker (Firefox-Add-On, kostenfrei): • https://addons.mozilla.org/de/firefox/addon/linkchecker/

Xenu Link Checker (Freeware): Bestimmte Linkarten wie Javascript- und Mailto-Links können von der Link-Prüfung ausgeschlossen werden. Nachteil: kann keine SSL Links prüfen. Deutsch, für Windows. Download: • http://home.snafu.de/tilman/xenulink.html

Integrity – Link Checker für Mac OS X (Freeware, Englisch). Download: • http://peacockmedia.co.uk/integrity/

Sitemap-Generatoren Webdienst: xml-sitemaps (Basisversion kostenfrei): • http://www.xml-sitemaps.com/

Webdienst: XML-Sitemap-Generator (kostenfrei): • http://rapid.searchmetrics.com/de/seo-tools/miscellaneous/sitemap-generator,25.html

Webdienst: sitemap-maker (kostenfrei): • http://www.sitemap-maker.com/

Search Engine Optimization - SEO-Websites, SEO-Tools Linkvendor: Informations-Website zum Thema SEO mit Download-Angebot für (kostenlose) SEO- Tools: • http://de.linkvendor.com/

Informationen (PDF) von Google zum Thema SEO: • http://static.googleusercontent.com/media/www.google.de/de/de/webmasters/docs/einfuehrung- in-suchmaschinenoptimierung.pdf

SOS SEO Blog: Blog zum Thema SEO und Suchmaschinen: • http://www.sosseo.de/

Webdienst: Google Webmaster Tools (kostenfrei, Registrierung erforderlich): Analysen und Tools, um eine stabile, suchmaschinen-freundliche Website zu erstellen: • http://www.google.com/intl/de_de/webmasters/

Webdienst: Google Analytics (kostenfrei, Registrierung erforderlich): Professionelle Webanalysen und Tools: • http://www.google.de/intl/de/analytics/

Piwik (Open Source, kostenfrei): serverseitiges Website- und Traffic-Analysetool, unabhängig von Google und mit wesentlich mehr Privatheit der ermittelten Daten. Download: • http://piwik.org/

Webdienst: Robot Control Code Generation Tool – robots.txt-Generator (kostenfrei): • http://www.mcanerin.com/EN/search-engine/robots-txt.asp

Gestaltung - Farbgestaltung

Farben und Farbwirkung Farbensuchmaschine • http://encycolorpedia.com/ Suche nach Farbzahl (Hexzahl, dezimal), Farbpaletten, Farbnahmen, auch benannten Farben wie Ferrari Red (englischsprachige Eingabe)

Website in Deutsch mit Farblexikon, Farbtabellen, den benannten Farben in HTML und einer Tabelle der 256 sogenannten browsersicheren Farben: • http://www.sttmedia.de/farbnamen

Benannte Farben in HTML In HTML können neben hexadezimaler Zahlenangabe auch 147 englische Farbnamen für Schmuckfarben verwendet werden. Alphabetisch sortierte Farbnamen: • http://www.webweavers.de/material/farbtab.htm Nach ähnlichen Farben in Gruppen sortiert: • http://www.webweavers.de/material/farbsort.htm

Tutorial: Farben im Webdesign • http://www.metacolor.de/ Sehr ausführliches Tutorial zum Thema Farbgestaltung und Farblehre

Farbwirkung und Farbdreiklänge • http://www.die-barrierefreie-website.de/grundlagen/farbwirkung-und-farbklang.html

Ein kleines Tutorial zum Thema Farbwirkung und Farbdreiklänge, verteilt auf mehrere Seiten eines Forums: • http://forum.jswelt.de/tutorials-grafik/18997-farbkreis-and-farbharmonien.html • http://forum.jswelt.de/tutorials-grafik/19000-wirkung-farben.html • http://forum.jswelt.de/tutorials-grafik/19002-einsatz-farben.html

Programme und Online-Services zum Arbeiten mit Farben Farbverläufe in CSS3 erstellen Website zur Erstellung und freien Bearbeitung des Quellcodes von Farbverläufen, die sich in CSS3 einsetzen lassen (siehe Link rechts oben – Gradient Generator) – Homepage des Firefox-Add-Ons Colorzilla: • http://www.colorzilla.com/firefox/

Adobe Color CC – Farbkombinationen aus Bildern ermitteln Adobe bietet auf seinen Websites bzw. im Google Play Store verschiedene, zum Teil kostenlose Programme zur Bildbearbeitung für mobile Endgeräte, wie Adobe Photoshop Express oder Adobe Color: • https://play.google.com/store/apps/details?id=com.adobe.creativeapps.colorapp

Websites sollten nach Möglichkeit barrierefrei sein, d.h. Menschen mit Sehschwächen ermöglichen, die Informationen aus der Seite zu erreichen und aufzunehmen. Dazu zählt auch die Berücksichtigung von Farbsehschwächen bei der farblichen Gestaltung. Auf der folgend genannten Internetseite lässt sich die Adresse einer beliebigen Website eingeben, um diese sozusagen einmal mit den Augen eines Menschen mit Rot-Grün- bzw. Blau- Gelb-Sehschwäche zu betrachten: • http://www.vischeck.com/vischeck/vischeckURL.php

Colorpicker-Programme – Farben vom Bildschirm wählen und selbst mischen, Farbschemas entwickeln mit Ausgabe der Farben in Hexzahlen für Webdesign • http://colorcop.net/ • http://www.iconico.com/colorpic/ • http://www.martinstoeckli.ch/colorbug/colorbug.html (mit CSS-Gradient-Generator)) • http://www.dtpstudio.de/colors/ (Farbwerte RGB-CMYK umrechnen, Farbauswahl aus Farbsystemen wie RAL etc.; für Windows und Mac) • http://wan24.xpress-blog.de/software/colormanager-4-beta/ (Farbwerte RGB-CMYK u.a. umrechnen, Farbharmonien, Farbschemas anlegen)

Hilfen im Webdesign

Mengentext Mengen- bzw. sogenannte Blindtexte zum Layouten von Seiten und einen Blindtextgenerator finden Sie unter dieser Adresse: • http://www.all2e.com/Ressourcen/Blindtexte

Bildschirmlineale – Programme zum Messen auf dem Monitor • http://www.ww-a.de/pixellineal.html • http://www.markus-bader.de/MB-Ruler/download.d.php • http://colorcop.net/

Websites zu Internet-Programmiersprachen

Webdesign-Portale Informationen aus verschiedenen Bereichen, Tutorials und Downloads • http://www.drweb.de/start/ • http://www.jswelt.de/ • http://www.java-script.org/ • http://www.webmaster-elite.de/ • http://de.html.net/ • http://www.html-seminar.de/

HTML-CSS-Referenzen (Nachschlagewerke online) - HTML5 und CSS3 lernen SelfHTML8.12 ist das Nachschlagewerk zu HTML 4, CSS2, Javascript und anderen Internet- Programmiersprachen. Sie finden es online hier: • http://de.selfhtml.org/ und zum Download, um offline damit zu arbeiten, hier: • http://aktuell.de.selfhtml.org/extras/download.shtml

Als Referenz zu HTML5 und CSS3 dienen z.B. folgende Websites: • http://wiki.selfhtml.org/wiki/Startseite • http://html5-webdesign.de/Html_5.html • http://www.w3schools.com/default.asp (in Englisch, mit Tutorials)

HTML5 Gallery – Websites, die HTML5 nutzen • http://html5gallery.com/ HTML5 – Was geht heute schon, was geht nicht? • http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse- ueberblick/ CSS3 & HTML5 - Einstieg in die neuen Webstandards • http://css3-html5.de/ HTML5 ROCKS – Googles Website zu HTML5 (Englisch) • http://www.html5rocks.com/

CSS-Zengarden – Beispiel-Websites zum Einsatz von CSS2 und Grafik • http://www.csszengarden.com

CSS-Tutorials Website mit 10 interessanten CSS2-Tutorials • http://alice-grafixx.de/XHTML-CSS-Tutorials/1

Informationen zu CSS3 • http://www.css3.info/

CSS3-Lösungen (Quellcode) • http://www.dynamicdrive.com/style/

HTML5 – neue Elemente

Tags zur Seitenstruktur Erläuterung der neuen Tags zur Seitenstruktur - header, nav, aside, footer, article, section, dialog, details, summary, hgroup, doctype, figure, figcaption • http://html5-webdesign.de/Struktur.html

Beispiel für header, nav, section, footer • http://www.html-seminar.de/html-5-strukturierende-elemente.htm

Erläuterung zu figure • http://html5-webdesign.de/figure.html

Tags zur Wiedergabe und Darstellung Erläuterung der (neuen) Tags zur Wiedergabe und Darstellung - audio, video, track, embed, object (HTML4), svg, canvas, command, mark, meter, ruby, source, time, wbr • http://html5-webdesign.de/Darstellung.html

Audio einbinden – die Tags audio, source, embed • http://html5-webdesign.de/audio.html

Video einbinden – die Tags video, source, embed • http://html5-webdesign.de/video.html

Neue grafische Seiteninhalte – der Tag svg, svg als Dateiformat • http://www.mediaevent.de/2013/04/svg-in-html-seiten/ • http://www.w3schools.com/html/html5_svg.asp • http://www.drweb.de/magazin/svg-grafiken-einbetten-und-mit-css-und-javascript-manipulieren/#

Zeichnen mit JavaScript – der Tag canvas • http://html5-webdesign.de/canvas.html • http://www.w3schools.com/html/html5_canvas.asp

Neue Formularelemente – input types und progress • http://html5-webdesign.de/Formulare.html • http://www.mediaevent.de/xhtml/form-input.html

Metatags Eine Zusammenstellung der wichtigsten Metatags und ihrer Bedeutung sowie Hinweise zur Suchmaschinenoptimierung von Websites finden Sie hier: • http://www.webweavers.de/material/metatags.htm

Umfassender Metatag-Generator online • http://www.kleines-lexikon.de/tools/taggen.html#inp1

MathML, die Markup-Spache für mathematische Formeln und Ausdrücke Mathematische Aufgaben im Browser in HTML-Seiten darstellen – der Tag math • http://www.mediaevent.de/2012/12/mathml-formeln-in-webseiten-mit-html5/ • http://www.tutorialspoint.com/html5/html5_mathml.htm

CSS

CSS-Layouts Einführung in das Seitenlayout mit CSS (CSS2) • http://de.selfhtml.org/css/layouts/index.htm

Schon etwas ältere Standardlayouts mit CSS2 realisieren (mit Beispielen): • http://www.css4you.de/wslayout1/index.html • http://www.andreas-kalt.de/webdesign/tutorials/css-layout-erstellen

Free CSS-Layouts (Linkliste mit Links zu CSS-Templates): • http://www.drweb.de/magazin/css-layouts-und-templates/

Free CSS – CSS-Templates, CSS-Layouts • http://www.free-css.com/free-css-layouts/page1

HTML5-CSS3-Layout-Generatoren • http://www.html-seminar.de/css-layout-generator.htm • http://css3generator.de/ • http://www.cssportal.com/layout-generator/ • http://csslayoutgenerator.com/

CSS3-Mehrspalten-Tutorial (column-count) • http://webkrauts.de/artikel/2011/css3-im-praxistest-multi-column-layout

CSS3-Mehrspalten-Layout-Generator • http://www.aaronlumsden.com/multicol/

Responsive Webdesign - unterschiedliche Layouts nach Fensterbreite zuweisen: viewport, device-width, media-queries Die @viewport-Regel erklärt: • http://webkrauts.de/artikel/2011/ein-blick-durch-den-viewport

Einsatzmöglichkeiten für media-queries: • http://www.mediaevent.de/css/media-queries.html

Combining meta viewport and media queries (Englisch): • http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Media-queries und device-width: je nach device-with eine eigene CSS-Datei zuweisen: • http://www.drweb.de/magazin/media-queries-mobile-version-von-websites-mit-css3-erstellen/ • http://www.heise.de/ix/artikel/Allen-recht-1058764.html

Beispiel für Fluid Layouts mit media-queries • http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/

Responsive Webdesign - Grid-Layouts Tutorial CSS3-Gridlayout (Englisch), mit Erklärungen und Tipps zur Behebung häufig vorkommender Darstellungsfehler: • http://de.slideshare.net/zomigi/css3-layout

W3C-Gridlayout-Module • http://dev.w3.org/csswg/css-grid/

CSS3-Gridlayout (Microsoft Testdrive) • http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm

YAML – Yet Another Multicolumn Framework: ein Framework, das kostenlos bereit gestellt wird und es erlaubt, mit vorbereiteten Skripten und CSS sogenannte „Grid Layouts“ zu erstellen (Seitenlayouts, die je nach Breite des Viewports/Browserfensters umbrechen): • http://www.yaml.de/

Erläuterung eines Fluid Layouts (Englisch) • http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-3142768

CSS3-Animationen und Transitionen, Transformationen Achtung: selbst in IE10 funktionieren noch nicht alle Transformationen, Transitionen und Animationen!

Website mit Code-Generator für einfache Animationen, Transformationen und Transitionen • http://www.css3maker.com/index.html

Beispiele für einfache CSS3-Animationen (mit Quelltext) • http://projects.lukehaas.me/css-loaders/ • http://www.minimamente.com/example/magic_animations/ …und komplexere Animationen • http://beta.theexpressiveweb.com/#!/css3-animations

Beispiele für einfache CSS-Animationen mit der @keyframe-Regel, einschließlich Quellcode • http://www.mediaevent.de/css/animation.html • http://www.w3schools.com/css/css3_animations.asp

CSS-Transitions Erläuterung der wichtigsten Eigenschaften von Transitionen mit Beispielen und Quellcode • http://www.mediaevent.de/css/transition.html • http://css3.bradshawenterprises.com/transitions/ • http://www.pepe-juergens.de/2013/01/css3-transitions-hover-effekte/

CSS-Transformations Erläuterung der wichtigsten Eigenschaften von Transformationen mit Beispielen und Quellcode • http://www.pepe-juergens.de/2013/02/css3-transform/

CSS-Klappmenüs Websites, die verschiedene mit HTML, CSS und zum Teil mit Hilfe von Javascript gestaltete CSS- Klappmenüs (Dropdown-Menüs) vorstellen: • http://htmldog.com/articles/suckerfish/dropdowns/ • http://www.cssplay.co.uk/menus/slide_definition.html • http://barrierefrei.e-workers.de/workshops/tricks/menues.php • http://www.css-menue.de/

Quellcode für CSS-Klappmenüs (horizontal) • http://www.dynamicdrive.com/style/csslibrary/category/C1/ … und vertikal • http://www.dynamicdrive.com/style/csslibrary/category/C2/

Programme zur Herstellung von CSS-Menüs siehe CSS-Editoren und Generatoren

CSS3 und Webfonts Google Fonts Directory – kostenlos, freier Zugriff • http://code.google.com/webfonts

Adobe Edge Web Fonts – kostenlos, freier Zugriff, teilweise gleich mit Google Fonts • http://html.adobe.com/edge/webfonts/

Ähnlich, mit Registrierung: Adobe Typekit: https://typekit.com/

FontsForWeb.com – viele kostenlose, kommerziell nutzbare Web Fonts, jedoch sind die Bedingungen für jeden Font zu prüfen. Registrierung erforderlich. • http://fontsforweb.com/

Fonts.com – kostenloses Abo mit Registrierung • http://www.fonts.com/de/web-fonts

FontSquirrel – kommerziell nutzbare, kostenlose Fonts, mit Webfont-Generator: • http://www.fontsquirrel.com/home

Webdienst Font2Web – Online Web Font Konverter, konvertiert .TTf oder .OTF-Fonts in .TTF, .OTF, .WOFF, .EOT und .SVG-Dateien, kostenlos. • http://www.font2web.com/

Webdienst Everything Fonts font-face generator – Online Web Font Konverter, konvertiert .TTf oder .OTF-Fonts in .TTF, .OTF, .WOFF, .EOT und .SVG-Dateien, kostenlos. • http://everythingfonts.com/font-face

Verschiedene Webfont-Anbieter im Kurzporträt: • http://webtypobuch.de/lesen/Kapitel-4/Kapitel-4-4

Frameworks – Zusammenstellungen aus CSS und Javascript, um vorgegebene Aufgaben zu lösen

HTML5 Boilerplate: ein Framework, das kostenlos zur Verfügung gestellt wird und es per Javascript und CSS ermöglicht, Websites in HTML5 und CSS3 auch auf älteren Browsern korrekt darzustellen: • http://html5boilerplate.com/

Lightbox – nach Klick auf ein kleines Vorschaubild große Bilder in einer transparenten Fläche „über“ der eigentlichen Website öffnen, mit Möglichkeiten, eine Diashow zu realisieren: • http://lokeshdhakar.com/projects/lightbox2/ reveal.js (Open Source, kostenfrei): JavaScript-Framework, das Präsentationen auf Websites ermöglicht; basiert auf HTML5 und CSS3 und erlaubt es, unter anderem vertikal und horizontal mit Dreheffekten zu navigieren: • http://lab.hakim.se/reveal-js/#/

Javascript

Einführungen, Foren und freie Javascripte • http://de.selfhtml.org/javascript/index.htm • http://javascript.seite.net/index.bak.html • http://www.javascriptkit.com/ • http://www.jswelt.de/ • http://www.java-script.org/

Open Source-CMS-Systeme (Content Management Systeme) gpEasy benötigt PHP 4.1 oder neuer auf dem Server; keine Datenbank; Administration über die Website • http://gpeasy.com/ CMSimple bötigt PHP 4.04 auf dem Server, aber keine Datenbanken; eine Open-Source- und eine kommerzielle (werbefreie) Version sind verfügbar • http://www.cmsimple.com/ Silverstripe 2.3.3 benötigt PHP 5.02 (PHP ab 5.2 empfohlen) auf dem Server; MySQL-Datenbanken http://www.silverstripe.com Contao Open Source Content Management System (vormals TYPOlight) • http://www.contao.org/

Typo3 benötigt PHP 4 und MySQL-Datenbanken auf dem Server • http://typo3.org Joomla! ist eine Fortentwicklung des preisgekrönten CMS Mambo • http://www.joomla.de/ PHP-Download und Informationen • http://www.php.net/ MySQL Download und Informationen • http://dev.mysql.com/

Flash - Gute Flash-Sites • http://www.derbauer.de/ • http://www.fosterandpartners.com/

Klaus Gölker@ http://www.webweavers.de 2015