Issues:
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
3<head>
4<title>Webdesign aus Potsdam - Ingo Pahl - Barrierefreies Webdesign</title>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<meta name="author" content="Ingo Pahl - Potsdam" />
7<meta name="copyright" content="Ingo Pahl - Webdesign 4u" />
8<meta name="description" content="Webdesign aus Potsdam - Barrierefreies Webdesign von Ingo Pahl 4u. Optimiert für Suchmaschinen und neue Medien. Design für Digital und Print." />
9<meta name="keywords" content="Webdesign Potsdam, barrierefreies Webdesign, Potsdam, barrierefrei" />
10<meta name="robots" content="index, follow, noodp, noydir" />
11<meta name="language" content="de" />
12<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
JavaScript changes: changed to rel='publisher' changed to title=''
JavaScript changes: changed to rel='author' changed to title='Impressum'
13<link rel="author" title="Impressum" href="http://www.pahl-4u.de/impressum.html" />
14<link rel="publisher" href="http://www.pahl-4u.de/impressum.html" />
15<link rel="og:image" href="http://www.pahl-4u.de/img/vcard.gif" />
16<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
17<link rel="P3Pv1" href="http://www.pahl-4u.de/w3c/p3p.xml" />
18<link rel="canonical" href="http://www.pahl-4u.de/" />
19<link rel="apple-touch-icon" href="http://www.pahl-4u.de/img/iphoneicon.png" />
20<link rel="stylesheet" type="text/css" href="styles/mobile.css" media="handheld" />
21<link rel="stylesheet" type="text/css" href="styles/spirits.css" media="screen, projection and (min-device-width: 480px)" />
22<link rel="stylesheet" type="text/css" href="styles/print.css" media="print" />
23<link rel="alternate" type="application/rss+xml" title="Pahl 4u - Barrierefreies Webdesign aus Potsdam" href="http://www.pahl-4u.de/news.rss" />
24<link rel="alternate" type="application/rss+xml" title="Digital und Print - von A bis Z" href="http://www.pahl-4u.de/glossar/medien.rss" />
JavaScript added element:
<script type="text/javascript" async="-1" src="styles/spirits.js"></script>
25</head>
26
27<body>
28<div id="big">
29<div id="jump"><ol><li><a href="#jump" title="Navigation mit Tasten" rel="nofollow">Weiter mit Tasten » Tab</a></li></ol>
30<ol><li><a href="#content" title="Zum Text" rel="nofollow">Zum Text » Enter</a></li>
31<li><a href="sitemap/sitemap.html" title="Zum Menü">Zum Inhaltsverzeichnis » Enter</a></li>
32<li><a href="#navi2" title="Zur Fußleiste" rel="nofollow">Zur Fußleiste » Enter</a></li>
33<li><a href="#jump" title="Noch einmal beginnen" rel="nofollow">Noch einmal beginnen » Enter</a></li></ol></div>
34<div class="clear"></div>
35 <div id="oben">
36 <div id="logo"> </div>
37 <div id="headline"><h1>Pahl 4u</h1><h2>Webdesign aus Potsdam</h2></div></div>
38<div id="breadcrumb"><p class="crumb"><a href="index.html" title="Barrierefreies Webdesign aus Potsdam">Startseite </a> >> Sie befinden sich zurzeit hier: >> </p>
39<p class="crumb">Pahl 4u - Barrierefreies Webdesign aus Potsdam</p></div>
40<div id="content">
41<div id="navi1">
42<ul id="MenuBar1" class="MenuBarHorizontal">
JavaScript changes: added class='MenuBarItemIE'
43<li><a href="index.html" title="Pahl 4u - Barrierefreies Webdesign" class="MenuBarItemSubmenu" accesskey="1">Start</a>
44<ul>
45
JavaScript changes: added class='MenuBarItemIE'
<li>
JavaScript changes: added tabindex='-1'
<a href="profil/aktuell.html" title="Nachrichten aus Potsdam" accesskey="2">Aktuelles</a></li>
46
JavaScript changes: added class='MenuBarItemIE'
<li>
JavaScript changes: added tabindex='-1'
<a href="start/hilfe.html" title="Webdesign ohne Barrieren" accesskey="3">Tipps und Hilfe</a></li>
47
JavaScript changes: added class='MenuBarItemIE'
<li>
JavaScript changes: added tabindex='-1'
<a href="glossar/glossar.html" title="Artikel und Glossar - Mediengestaltung von A bis Z" accesskey="4">Digital und Print</a></li>
48</ul>
49</li>
JavaScript changes: added class='MenuBarItemIE'
50<li>
JavaScript changes: added tabindex='-1'
<a href="profil.html" class="MenuBarItemSubmenu" title="Ingo Pahl - Profil">Profil</a>
51<ul>
52
JavaScript changes: added class='MenuBarItemIE'
<li>
JavaScript changes: added tabindex='-1'
<a href="profil/stein1.html" title="Steinmetz in Potsdam und Berlin">Meilensteine</a></li>
53
JavaScript changes: added class='MenuBarItemIE'
<li>
JavaScript changes: added tabindex='-1'
<a href="comments/gast.php" title="Shoutbox - Nachrichten - Neuigkeiten - Kommentare">Kommentare</a></li>
54</ul>
55</li>
JavaScript changes: added class='MenuBarItemIE'
56<li>
JavaScript changes: added class='MenuBarItemSubmenu' added tabindex='-1'
<a href="web.html" title="Web- und Screendesign">Web</a>
57 <ul>
JavaScript changes: added class='MenuBarItemIE'
58<li>
JavaScript changes: added tabindex='-1'
<a href="web/seo.html" title="Suchmaschinenoptimierung - SEO - Marketing im Webdesign">Optimierung</a></li>
JavaScript changes: added class='MenuBarItemIE'
59<li>
JavaScript changes: added tabindex='-1'
<a href="start/wall.html" title="Barrieren im Internet">Die Barrieren</a></li>
JavaScript changes: added class='MenuBarItemIE'
60<li>
JavaScript changes: added tabindex='-1'
<a href="quiz/frage.php" title="Digital und Print - Test für Mediengestalter">Nachgefragt</a></li>
61</ul>
62</li>
JavaScript changes: added class='MenuBarItemIE'
63<li>
JavaScript changes: added tabindex='-1'
<a href="pixel.html" title="Bildbearbeitung - Digital und Print" class="MenuBarItemSubmenu">Pixel</a>
64<ul>
65
JavaScript changes: added class='MenuBarItemIE'
<li>
JavaScript changes: added tabindex='-1'
<a href="web/flash2.html" title="Urlaub im Kalender - 365 Tage Urlaub">Kalenderblätter</a></li>
66</ul>
67</li>
JavaScript changes: added class='MenuBarItemIE'
68<li>
JavaScript changes: added tabindex='-1'
<a href="vektor.html" title="Grafik- und Logodesign" class="MenuBarItemSubmenu">Grafik</a>
69 <ul>
70
JavaScript changes: added class='MenuBarItemIE'
<li>
JavaScript changes: added tabindex='-1'
<a href="web/flash1.html" title="Flash - Grafiken und Bilder animieren">Bewegte Grafiken</a></li>
71 </ul>
72</li>
JavaScript changes: added class='MenuBarItemIE'
73<li>
JavaScript changes: added tabindex='-1'
<a href="sitemap/sitemap.html" title="Sitemap - Übersicht" accesskey="5">Inhalt</a></li></ul></div>
74<div class="clear"></div>
75<div id="suche1" class="rechts"><form action="http://www.google.de/search" method="get" accept-charset="utf-8">
76<div class="suche1">
77<label for="suchfeld">Suchen: </label><input id="suchfeld" class="suchfeld" type="text" name="q" value="Suchbegriff" onfocus="this.value=''" size="25" maxlength="150" title="Suchbegriff eingeben" />
78<input class="suchfeld" type="hidden" name="q" value="site:www.pahl-4u.de" />
79<input class="suche" type="submit" name="suchen" value="Senden" title="Diese Domain mit Google durchsuchen" />
80</div></form></div>
81<p class="img"> </p><div class="clear2"></div>
82<p class="top"><a href="#copy" title="Seitenende - Navigation - Fußleiste"> ⇓</a></p>
83<h3>Barrierefreies Webdesign aus Potsdam</h3>
84<h4>Webseiten ohne Barrieren sind zugänglich für alle.</h4>
85<noscript><p class="info">Sie haben JavaScript deaktiviert. Für Hilfe oder Informationen klicken Sie bitte auf das Fragezeichen in der Menüleiste.</p></noscript>
86<p>Auf den folgenden Seiten können Sie sich näher über mich, Ingo Pahl, sowie zu Fragen der Mediengestaltung für digital und Print informieren. Ich wohne in Potsdam und absolvierte in Berlin die Ausbildung als Mediengestalter für Digital- und Printmedien.</p>
87<p>Barrierefreies Webdesign, Suchmaschinenoptimierung - als Marketing im Internet sowie die Optimierung für Neue Medien spielten während dieser Ausbildung eine ebenso wichtige Rolle, wie die digitale Bildbearbeitung und das Erstellen von Vektorgrafiken.</p>
88<p>Bis zu meiner Ausbildung zum Mediengestalter arbeitete ich viele Jahre als Steinmetz in Potsdam und Umgebung. In dieser Zeit habe ich an zahlreichen Potsdamer- und Berliner Bauwerken meine Spuren hinterlassen.</p>
89<p>Webseiten ohne Barrieren erstellen, ein anderer Weg, dauerhaft qualitativ hochwertige Spuren zu hinterlassen. Meine speziellen Kenntnisse über die professionelle Optimierung für alle Suchmaschinen ermöglichen, dass die barrierefreien Webseiten von allen Suchmaschinen gut platziert werden.</p>
90<p>Sie möchten <strong>ohne Barrieren</strong> oder mit der Tastatur navigieren? Drücken Sie bitte die <strong>Tabulator-Taste</strong>, bis neben dem Logo die <strong>Informationsleiste</strong> erscheint. Folgen Sie bitte der <strong>Anleitung, um mit der Tastatur zu navigieren.</strong> Weitere Tipps für die Bedienung von Webseiten ohne Barrieren, sowie <em class="acronym" title="engl. = Tastaturkürzel">Accesskeys</em> für diese Webseite finden Sie in der <a href="start/hilfe.html" title="Hilfe zur Barrierefreiheit" class="text">Hilfe</a>.</p>
91 <hr /><h4>Mediengestaltung von Digital- und Printmedien</h4>
92<p>In Berlin erhielt ich das nötige Rüstzeug für ein barrierefreies Webdesign, der Optimierung für Neue Medien und Suchmaschinen, dem Erstellen barrierefreier Formulare, <a href="glossar/x/xml.html" class="text" title="XML-Daten für digital und Print">XML-Daten</a> sowie zur Bildbearbeitung für Digital- und Printmedien.</p>
93<p>Wie wichtig es ist barrierefrei zu arbeiten, das konnte ich, bei der Vorführung eines Bildschirmlesegeräts, eindrucksvoll erleben. Eine Hürde von vielen, die ein guter Webdesigner meistern muss.</p>
94<p>Wer möglichst viele Menschen aus jeder Generation ansprechen möchte, sollte seine Webseiten ohne Barrieren betreiben. Insbesondere die Webseiten von Behörden, Seiten, die das öffentliche Leben betreffen, große Firmenauftritte und Verkaufsportale haben einen großen Nachholbedarf.</p>
95<p>Barrierefreie Webseiten sind, neben vielen anderen Kriterien, schnell und gut zugänglich. So optimiert werden diese auch von Suchmaschinen bevorzugt.</p>
96 <hr /><h4>Validität - Design - Webdesign</h4>
97<p>Grundlage jeder guten Webseite ist eine exakte Analyse der Zielgruppe sowie ein exzellentes, der Zielgruppe entsprechendes, Konzept. Nach dem Konzept wird das Design dieser Webseite erstellt und gestaltet. Achten Sie unbedingt darauf, dass die <a href="glossar/s/schrift.html" class="text" title="Schriftmerkmale - Bestandteile und Merkmale der Schrift">Typografie</a> skalierbar und gut lesbar ist.</p>
98<p>Nach der Gestaltung erfolgt die technische Umsetzung. In diesem Schritt wird ein fehlerfreier Code der HTML- und CSS-Dateien erstellt und auf die Validität, gemäß den Regeln des <a href="http://jigsaw.w3.org/css-validator" title="Externer Link - zum W3C-CSS-Validator" class="extern">» W3C-Konsortiums</a>, überprüft.</p>
99<p>Zur Kontrolle des <em>HTML-Codes</em> empfehle ich die Webseite der <a href="http://www.htmlhelp.com/tools/validator/" title="Externer Link - zum WDG-HTML-Validator" class="extern" rel="nofollow">» WDG.</a> Hier erfolgt die Validierung Ihres HTML-Codes ebenfalls nach den Regeln des W3C-Konsortiums mit dem Vorteil, dass hier nicht nur die Index-, sondern gleichzeitig auch sämtliche Unterseiten überprüft werden können.<br />
100 </p>
101<p>Um die gesamte Webseite beim WDG zu überprüfen, müssen Sie die zu prüfende URL eingeben und die Option <em class="acronym" title="fr. = Bestätigen für gesamte Website">"Validate entire site"</em> aktivieren. Nach kurzer Zeit werden sämtliche Seiten, inklusive Fehler, aufgelistet.</p>
102<p>Ist Ihre Webseite technisch perfekt und hat ein, der Zielgruppe entsprechendes Design? Beseitigen Sie alle Barrieren und verringern Sie die <a href="glossar/p/pagespeed.html" class="text" title="Pagespeed - Webseite optimieren - Webdesign barrierefrei">Ladezeit</a>, ein wichtiges Merkmal für barrierefreie Webseiten und optimieren Sie Ihre Webseite so auch für die Nutzer Neuer Medien.<br />
103 </p>
104<h4>Suchmaschinenoptimierung - SEO</h4>
105<p>Für das Marketing im Internet, als Suchmaschinenoptimierung oder kurz als SEO bezeichnet, ist nun lediglich noch etwas Feinarbeit notwendig. Bei der <a href="web/seo.html" class="text" title="Optimierung - Webseiten für Suchmaschinen optimieren">Suchmaschinenoptimierung</a> legt der Webdesigner fest ob die Seite regional, z.B. in Potsdam, Berlin, oder weltweit gefunden werden soll.</p>
106<p>Eine technisch perfekte Webseite kann problemlos mit alten Domains und Webseiten mit hohen <a href="glossar/p/pr-update.html" class="text" title="PageRank™ Update - Backlink Update">PageRank</a>™ konkurrieren.</p>
107 <hr /><h4>Druckprodukte</h4>
108<p>Um Druckprodukte erfolgreich umzusetzen, ist es ebenso wie beim Webdesign, wichtig neben der Zielgruppenanalyse über eine gute Konzeption und das entsprechende Fachwissen zu verfügen.</p>
109<p>In der Ausbildung zum Mediengestalter in Berlin erwirbt man dieses umfangreiche Wissen. Es umfasst, unter anderen, die Grundlagen der Gestaltung, Kenntnisse über die visuelle Wahrnehmung, Typografie und Mikrotypografie sowie die psychologische Wirkung von <a href="glossar/f/farbmischung.html" class="text" title="Farbmischung - additive Farben und subtraktive Farben">Farben</a> und Farbkontrasten.</p>
110<p>Beim Erstellen von Druckprodukten werden Bilder, Grafiken und Texte in einem Programm zusammengeführt. Der Designer bestimmt das Layout, fertigt Vektorgrafiken an, trifft die Bildauswahl und bearbeitet die Bilder.</p>
111<p>Die Bildbearbeitung, das Anfertigen von Grafiken und die Entwicklung von Logos gehören dabei ebenso zu den Aufgaben des Designers wie das Erstellen von Briefpapier, Broschüren, Flyer, Urkunden sowie die Gestaltung von CD- und DVD-Covern.</p>
112 <hr /><h4>Digitale Bildbearbeitung</h4>
113<p>Für Druckprodukte, aber auch für Webseiten, werden Bilder benötigt. Um den verschiedenen Medien gerecht zu werden, werden unterschiedliche Auflösungen und Dateiformate benötigt.</p>
114<p>Wann und welches Dateiformat im Einzelnen anzuwenden ist, dass gehört dabei ebenso zum Grundwissen des Mediengestalters wie die Auflösung, die für das jeweilige Medium benötigt wird.</p>
115<p> Aufgaben für die <a href="glossar/s/smartobjekt.html" class="text" title="Vorteile von Smart-Objekten bei der Bildbearbeitung">digitale Bildbearbeitung</a> sind vielseitig. Farbkorrekturen, Fehler retuschieren oder die Kolorierung alter Schwarz/Weiß Fotos - alles ist möglich.</p>
116 <hr /><h4>Grafikdesign</h4>
117<p>Für Printprodukte werden häufig Grafiken benötigt. Insbesondere <em>das Logo muss immer eine Vektorgrafik sein</em>, Vektorgrafiken sind ohne Qualitätsverlust skalierbar.</p>
118<p>Im Internet sind Grafiken zumeist in Form von Flashanimationen zu finden. Inzwischen haben sich noch weitere Dateiformate, welche Vektorgrafiken mit all ihren Vorzügen darstellen können, durchgesetzt.</p>
119 <hr /><h4>Logodesign</h4>
120<p>2011 nahm ich an einer weltweiten Initiative teil, ein globales Logo für die Menschenrechte zu gestalten. Das Logo konnte als Zeichnung, in den Sand gemalt, oder auch als Geste dargestellt und fotografiert, einreicht werden.</p>
121<p>Ein tolles Projekt, bei dem Ich Designer auf der ganzen Welt kennenlernte. Bei dem weltweiten Austausch mit anderen Designern habe ich nützliche Erfahrungen gesammelt und eine gute Platzierung meines Logos erreicht.</p>
122<p>Aus 15375 Logos wurden, am 20. August 2011, die besten Zehn Logos, zu denen auch der Entwurf eines Potsdamer Designers gehörte, gewählt. Am 28. August 2011 wurde das Siegerlogo gekürt, welches seitdem weltweit für die Menschenrechte steht.</p>
123 <p class="linie2"></p><h4>Digital und Print von A bis Z</h4>
124<div id="glossar"><ul><li><a href="glossar/a/a-glossar.html" title="Artikel mit A" class="text">A</a></li>
125<li><a href="glossar/b/b-glossar.html" title="Artikel mit B" class="text">B</a></li>
126<li><a href="glossar/c/c-glossar.html" title="Artikel mit C" class="text">C</a></li>
127<li><a href="glossar/d/d-glossar.html" title="Artikel mit D" class="text">D</a></li>
128<li><a href="glossar/e/e-glossar.html" title="Artikel mit E" class="text">E</a></li>
129<li><a href="glossar/f/f-glossar.html" title="Artikel mit F" class="text">F</a></li>
130<li><a href="glossar/g/g-glossar.html" title="Artikel mit G" class="text">G</a></li>
131<li><a href="glossar/h/h-glossar.html" title="Artikel mit H" class="text">H</a></li>
132<li><a href="glossar/i/i-glossar.html" title="Artikel mit I" class="text">I</a></li>
133<li><a href="glossar/j/j-glossar.html" title="Artikel mit J" class="text">J</a></li>
134<li><a href="glossar/k/k-glossar.html" title="Artikel mit K" class="text">K</a></li>
135<li><a href="glossar/l/l-glossar.html" title="Artikel mit L" class="text">L</a></li>
136<li><a href="glossar/m/m-glossar.html" title="Artikel mit M" class="text">M</a></li>
137<li><a href="glossar/n/n-glossar.html" title="Artikel mit N" class="text">N</a></li>
138<li><a href="glossar/o/o-glossar.html" title="Artikel mit O" class="text">O</a></li>
139<li><a href="glossar/p/p-glossar.html" title="Artikel mit P" class="text">P</a></li>
140<li><a href="glossar/q/q-glossar.html" title="Artikel mit Q" class="text">Q</a></li>
141<li><a href="glossar/r/r-glossar.html" title="Artikel mit R" class="text">R</a></li>
142<li><a href="glossar/s/s-glossar.html" title="Artikel mit S" class="text">S</a></li>
143<li><a href="glossar/t/t-glossar.html" title="Artikel mit T" class="text">T</a></li>
144<li><a href="glossar/u/u-glossar.html" title="Artikel mit U" class="text">U</a></li>
145<li><a href="glossar/v/v-glossar.html" title="Artikel mit V" class="text">V</a></li>
146<li><a href="glossar/w/w-glossar.html" title="Artikel mit W" class="text">W</a></li>
147<li><a href="glossar/x/x-glossar.html" title="Artikel mit X" class="text">X</a></li>
148<li><a href="glossar/y/y-glossar.html" title="Artikel mit Y" class="text">Y</a></li>
149<li><a href="glossar/z/z-glossar.html" title="Artikel mit Z" class="text">Z</a></li></ul></div>
150 <p class="linie2"><br /> <br /></p>
151<p>Haben Sie weitere Fragen über barrierefreies Webdesign, Optimierung, Mediengestaltung oder meiner Person, zögern Sie nicht mit mir Kontakt aufnehmen.<br /> </p>
152<p>Ich freue mich auf Ihre Anfrage.<br />Mit freundlichen Grüßen aus Potsdam<br /> <br /><em>Ingo Pahl</em></p>
153<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
154</div><div class="clear"></div>
155<div id="footer">
156<div id="navi2"><ul><li><a href="kontakt.php" title="Kontakt per E-Mail" accesskey="6">| Kontakt</a></li>
157<li><a href="impressum.html" title="Autor und Ansprechpartner" accesskey="7">| Impressum</a></li>
158<li><a href="privacy.html" title="Ihre Daten bei mir" accesskey="8">| Datenschutz</a></li>
159<li><a href="nutzung.html" title="Was es zu beachten gibt" accesskey="9">| Nutzungsbedingungen</a></li>
160<li><a href="profil/newsletter.php" title="Neuigkeiten beim Datenschutz">| Newsletter</a></li>
161<li><a href="links.html" title="Andere interessante Seiten">| Links</a></li></ul></div><div class="clear"></div>
162<div id="copy"><ul class="copy"><li><a href="humans.txt" class="text" title="I'm a human">Humanstext</a></li>
163<li><a href="news.rss" class="text" title="Barrierefreies Webdesign - News | RSS-Feed">RSS</a></li>
164<li><a href="glossar/medien.rss" class="text" title="Digital und Print | RSS-Feed">A bis Z</a></li>
165<li> </li>
166<li><span title="Zuletzt aktualisiert">Aktualisiert am: <!-- #BeginDate format:Ge1 -->20.10.2015<!-- #EndDate --></span></li>
167<li class="rechts">© by Ingo Pahl</li></ul></div><div class="clear"></div>
168<div id="analyse"><ul class="analyse"><li> </li>
169<li> </li>
170<li> </li>
171<li> </li></ul></div><div class="clear"></div>
172 </div>
173 </div>
174<script type="text/javascript"> (function () {var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'styles/spirits.js'; (document.getElementsByTagName('head')[0] || document.body).appendChild(script);})();</script>
175<script type="text/javascript" src="styles/spirits.js"></script>
176<script type="text/javascript">var MenuBar1=new Spry.Widget.MenuBar("MenuBar1");</script>
177</body>
178</html>