Issues:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Webdesign aus Potsdam - Ingo Pahl - Barrierefreies Webdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Ingo Pahl - Potsdam" />
<meta name="copyright" content="Ingo Pahl - Webdesign 4u" />
<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." />
<meta name="keywords" content="Webdesign Potsdam, barrierefrei, Webdesign, Potsdam, barrierefreies Webdesign, Ingo Pahl" />
<meta name="robots" content="index, follow, noodp, noydir" />
<meta name="language" content="de" />
<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'
<link rel="author" title="Impressum" href="http://www.pahl-4u.de/impressum.html" />
<link rel="publisher" href="http://www.pahl-4u.de/impressum.html" />
<link rel="og:image" href="http://www.pahl-4u.de/img/vcard.gif" />
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="P3Pv1" href="http://www.pahl-4u.de/w3c/p3p.xml" />
<link rel="canonical" href="http://www.pahl-4u.de/" />
<link rel="apple-touch-icon" href="http://www.pahl-4u.de/img/iphoneicon.png" />
<link rel="stylesheet" type="text/css" href="styles/mobile.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen, projection and (min-device-width: 480px)" />
<link rel="stylesheet" type="text/css" href="styles/print.css" media="print" />
<link rel="alternate" type="application/rss+xml" title="Pahl 4u - Barrierefreies Webdesign aus Potsdam" href="http://www.pahl-4u.de/news.rss" />
<link rel="alternate" type="application/rss+xml" title="Digital und Print - von A bis Z" href="http://www.pahl-4u.de/glossar/medien.rss" />
<script type="text/javascript" src="styles/x_tra.js"></script>
<script type="text/javascript" src="styles/menue.js"></script>
</head>
<body>
<div id="jump"><ol><li><a href="#jump" title="Navigation mit Tasten" rel="nofollow">Weiter mit Tasten » Tab</a></li></ol>
<ol><li><a href="#content" title="Zum Text" rel="nofollow">Zum Text » Enter</a></li>
<li><a href="sitemap/sitemap.html" title="Zum Menü">Zum Inhaltsverzeichnis » Enter</a></li>
<li><a href="#navi_2" title="Zur Fußleiste" rel="nofollow">Zur Fußleiste » Enter</a></li>
<li><a href="#jump" title="Noch einmal beginnen" rel="nofollow">Noch einmal beginnen » Enter</a></li></ol>
</div><div class="clear"></div>
<div id="big">
<div id="oben">
<div id="logo"><img src="http://www.pahl-4u.de/img/4u.gif" width="100" height="100" alt="Logo - Pahl 4u - Webdesign Potsdam" title="Logo | Pahl 4u | Webdesign Potsdam" /></div>
<div id="head"><h1>Pahl 4u</h1><h2>Webdesign aus Potsdam</h2></div>
</div>
<div id="breadcrumb">
<p class="crumb"><a href="index.html" title="Webdesign aus Potsdam">| Startseite</a> >> Sie befinden sich hier >> </p>
<p class="crumb">Webdesign aus Potsdam - Ingo Pahl - Barrierefreies Webdesign</p></div>
<div id="navi1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" title="Pahl 4u" class="MenuBarItemSubmenu" accesskey="1">| Start</a>
<ul>
<li><a href="profil/aktuell.html" title="Nachrichten aus Potsdam" accesskey="2"> Aktuelles</a></li>
<li><a href="start/hilfe.html" title="Webdesign ohne Barrieren" accesskey="3"> Tipps und Hilfe</a></li>
<li><a href="glossar/glossar.html" title="Artikel und Glossar - Mediengestaltung von A bis Z" accesskey="4"> Digital und Print</a></li>
</ul>
</li>
<li><a href="profil.html" class="MenuBarItemSubmenu" title="Ingo Pahl - Profil">| Profil</a>
<ul>
<li><a href="profil/stein1.html" title="Steinmetz in Potsdam und Berlin"> Meilensteine</a></li>
<li><a href="comments/gast.php" title="Shoutbox - Nachrichten - Neuigkeiten - Kommentare"> Kommentare</a></li>
</ul>
</li>
<li><a href="web.html" title="Web- und Screendesign">| Web</a>
<ul>
<li><a href="web/seo.html" title="Suchmaschinenoptimierung - SEO - Marketing im Webdesign"> Optimierung</a></li>
<li><a href="start/wall.html" title="Barrieren im Internet"> Die Barrieren</a></li>
<li><a href="quiz/frage.php" title="Digital und Print - Test für Mediengestalter"> Nachgefragt</a></li>
</ul>
</li>
<li><a href="pixel.html" title="Bildbearbeitung - Digital und Print" class="MenuBarItemSubmenu">| Pixel</a>
<ul>
<li><a href="web/flash2.html" title="Urlaub im Kalender - 365 Tage Urlaub"> Kalenderblätter</a></li>
</ul>
</li>
<li><a href="vektor.html" title="Grafik- und Logodesign" class="MenuBarItemSubmenu">| Grafik</a>
<ul>
<li><a href="web/flash1.html" title="Flash - Grafiken animieren"> Bewegte Grafiken</a></li>
</ul>
</li>
<li><a href="sitemap/sitemap.html" title="Sitemap - Übersicht" accesskey="5">| Inhalt</a></li>
<li><a href="start/hilfe.html" title="Hilfe zur Barrierefreiheit">| ?</a></li></ul></div>
<div id="big2">
<div id="bild1"><form action="http://www.google.de/search" method="get" accept-charset="utf-8">
<div id="suche1">
<label for="suchfeld">Suche: </label><input id="suchfeld" class="suchfeld" type="text" name="q" value=" Suchbegriff" onfocus="this.value=''" size="25" maxlength="150" title="Suchbegriff eingeben" />
<input class="suchfeld" type="hidden" name="q" value="site:www.pahl-4u.de" />
<input class="suche" type="submit" name="suchen" value="Suchen" title="Diese Domain mit Google durchsuchen" />
</div></form>
</div>
<div id="content">
<p class="top"><a href="#copy" title="Seitenende - Navigation - Fußleiste"> ⇓</a></p>
<h3>Barrierefreies Webdesign aus Potsdam</h3>
<h4>Der Versuch, möglichst jedem Anspruch gerecht zu werden</h4>
<noscript><p class="info">ACHTUNG - Sie haben JavaScript deaktiviert. Für Hilfe oder Infor­mationen klicken Sie bitte auf das Fragezeichen in der Menüleiste.</p></noscript>
<p>Auf den folgenden Seiten können Sie sich näher über mich, Ingo Pahl, und meinen Werdegang zum Mediengestalter für Digital und Print informieren.</p>
<p>Ich wohne in Potsdam und absolvierte im Berufsförderungswerk Berlin die Ausbildung zum Mediengestalter für Digital- und Printmedien.</p>
<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>
<p>Bis zu meiner Ausbildung zum Mediengestalter arbeitete ich viele Jahre als Steinmetz in Potsdam und Umgebung. In dieser Zeit habe ich an zahl­reichen Potsdamer- und Berliner Bauwerken meine Spuren hinterlassen.</p>
<p>Webseiten ohne Barrieren erstellen, ein anderer Weg, dauerhaft qualitativ hochwertige Spuren zu hinterlassen. Suchmaschinen finden, selbst ohne spezielle Suchmaschinenoptimierung, jede Webseite. </p>
<p>Ich möchte diese Plattform nutzen, um Ihnen einen Einblick in meine bis­herigen Arbeiten zu ermöglichen. Hier finden Sie Projekte aus der Berufs­schule und Arbeiten, die ich im privaten Umfeld umgesetzt habe.</p>
<p>Sie möchten gerne <span class="fliess_b">ohne Barrieren</span> weiterkommen? Drücken Sie bitte die <span class="fliess_b">Tabulator-Taste</span>, bis oben neben dem Logo die <span class="fliess_b">Informationsleiste</span> erscheint. Folgen Sie dort bitte den Anweisungen. Weitere Informationen zur Bedienung von Webseiten ohne Barrieren, sowie <acronym title="engl. = Tastaturkürzel">Accesskeys</acronym> für diese Webseite finden Sie auch in der <a href="start/hilfe.html" class="text" title="Hilfe - Fragen und Antworten">Hilfe</a>. </p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Mediengestaltung von Digital- und Printmedien</h4>
<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 im PDF-Format sowie zur Bildbearbeitung für Digital- und Printmedien.</p>
<p>Wie wichtig es ist barrierefrei zu arbeiten, das konnte ich durch eine de­monstrative Vorführung eines Bildschirmlesegeräts, eindrucksvoll er­leben. Eine Hürde von vielen, die ein guter Webdesigner meistern muss.</p>
<p>Wer möglichst viele Menschen, aus jeder Generation ansprechen möchte, sollte seine Webseiten ohne Barrieren betreiben. Insbesondere die Web­seiten von <span class="fliess_i">Behörden, Seiten die das öffentliche Leben betreffen, große Firmenauftritte und Verkaufsportale</span> haben einen großen Nachholbedarf.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Webdesign - Design</h4>
<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="quiz/kg_u5.html" class="text" title="Typografie - Lesbarkeit am Bildschirm">Typografie</a> skalierbar und gut lesbar ist.</p>
<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 W3C-Konsortiums, überprüft.<br /> </p><h4>Validität</h4>
<p>Zur Kontrolle des <em>HTML-Codes</em> empfehle ich die Webseite der <a href="http://www.htmlhelp.com/tools/validator/" class="extern" title="Externer Link - zum WDG-HTML-Validator" rel="external nofollow">» WDG.</a><img src="img/ext.gif" width="19" height="20" alt="externer Link 1" title="Kennzeichen - externer Link 1" />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 /> </p>
<p>Um die gesamte Webseite beim WDG zu überprüfen, müssen Sie die zu prüfende URL eingeben und die Option <acronym title="fr = Bestätigen für gesamte Website">"Validate entire site"</acronym> aktivieren. Nach kurzer Zeit werden sämtliche Seiten, inklusive Fehler, aufgelistet.</p>
<p><em>CSS-Codes</em> können Sie auf der Webseite des <a href="http://jigsaw.w3.org/css-validator" class="extern" title="Externer Link - zum W3C-CSS-Validator" rel="external follow">» W3C.</a><img src="img/ext.gif" width="19" height="20" alt="externer Link 2" title="Kennzeichen - externer Link 2" />validieren lassen.</p>
<p>Ist Ihre Webseite technisch perfekt und hat ein gutes, der Zielgruppe entsprechendes Design? Sehr gut, dann kann es richtig losgehen. Finden Sie alle Barrieren in Ihrer Webseite und beseitigen Sie diese. Zum Teil wird damit Ihre Webseite bereits für die Nutzer neuer Medien optimiert.<br /> </p>
<h4>Suchmaschinenoptimierung - SEO</h4>
<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="Webseiten für Suchmaschinen optimieren">Suchmaschinenoptimierung</a> legt der Webdesigner fest ob die Seite regional
, <abbr title="Zum Beispiel">z.B.</abbr> in Potsdam, Berlin, oder weltweit gefunden werden soll.</p>
No tooltip will appear for the abbreviation in older versions of Internet Explorer.
, <abbr title="Zum Beispiel">z.B.</abbr> in Potsdam, Berlin, oder weltweit gefunden werden soll.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Drucksachen</h4>
<p>Um Druckprodukte erfolgreich umzusetzen ist es, ebenso wie beim Web­design, wichtig neben der Zielgruppenanalyse über eine gute Konzeption und über das entsprechende Fachwissen zu verfügen.</p>
<p>In der Ausbildung zum Mediengestalter im
<abbr title="Berufsförderungswerk">BFW</abbr> in Berlin erwirbt man dieses umfangreiche Wissen. Es umfasst, unter anderen, die Grundlagen der Gestaltung, visuelle Wahrnehmung, Kenntnisse über Typografie und Mikrotypografie sowie die psychologische Wirkung von Farben und Farbkontrasten.<br /> </p>
No tooltip will appear for the abbreviation in older versions of Internet Explorer.
<abbr title="Berufsförderungswerk">BFW</abbr> in Berlin erwirbt man dieses umfangreiche Wissen. Es umfasst, unter anderen, die Grundlagen der Gestaltung, visuelle Wahrnehmung, Kenntnisse über Typografie und Mikrotypografie sowie die psychologische Wirkung von Farben und Farbkontrasten.<br /> </p>
<p>Beim Erstellen von Druckprodukten wie z.B. Briefpapier, Broschüren usw. werden Bilder, Grafiken und Texte in einem Programm zusammengeführt.</p>
<p>Zuvor müssen, sofern nicht vorhanden, die entsprechenden Grafiken an­gefertigt, Bilder ausgewählt und bearbeitet sowie Texte verfasst werden.</p>
<p>Die Bildbearbeitung, das Anfertigen von Grafiken und die Entwicklung von Logos gehören dabei ebenso zu meinem Aufgabenbereich wie das Er­stellen von Broschüren, Flyer, Urkunden, Beschriftungen für Autos und Planen sowie die Gestaltung von CD- und DVD-Covern.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Digitale Bildbearbeitung</h4>
<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>
<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>
<p>Die Aufgaben bei der digitalen <a href="pixel.html" class="text" title="Bildbearbeitung - Das sollten Sie wissen">Bildbearbeitung</a> sind sehr vielseitig und interessant. Ob rote Augen, Farbkorrekturen, Fehler retuschieren oder die Kolorierung von alten Schwarz/Weiß Fotos - alles ist möglich.<br /> </p>
<p>Ein Bild hat einen schiefen Horizont oder die Perspektive stimmt nicht? Sie haben einen Pickel auf der Nase oder der Bräutigam hat nicht gelächelt? Fast alle Probleme können in der "Schönheitschirurgie", von Fachleuten auch als Retusche bezeichnet, gelöst werden.</p>
<p>Selbst verschwundene Trauzeugen konnten, der digitalen Bildbearbeitung sei Dank, auf dem Gruppenfoto, vor einer Kirche in Potsdam-Babelsberg erscheinen.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Grafik</h4>
<p>Für Printprodukte werden häufig Grafiken benötigt. Insbesondere Logos müssen als <a href="vektor.html" class="text" title="Vorteile von Vektorgrafiken">Vektorgrafik</a> angefertigt werden. Vektorgrafiken sind bis ins unendliche ohne Qualitätsverlust skalierbar.</p>
<p>Den Möglichkeiten von Grafiken scheinen kaum Grenzen gesetzt zu sein und selbst das Internet haben sie schon lange erobert.</p>
<p>Im Internet sind Grafiken zumeist in Form von <a href="web/flash1.html" class="text" title="Grafiken und Bilder animieren">Flashanimationen</a> zu finden. Inzwischen haben sich noch weitere Dateiformate, welche Vektorgrafiken mit all ihren Vorzügen darstellen können, durchgesetzt. Bisher werden diese Formate noch nicht von jedem Dienstleister unterstützt.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Logodesign</h4>
<p>2011 nahm ich an einer Initiative teil, ein globales <a href="quiz/mp_u8.html" class="text" title="Merkmale eines guten Logos">Logo</a> für die Menschen­rechte zu erstellen. An dieser öffentlichen Ausschreibung durfte weltweit jeder teilnehmen und sein Logo als Zeichnung, in den Sand gemalt oder auch als Geste dargestellt und fotografiert, einreichen.</p>
<p>Jeder Teilnehmer durfte 1-5 Logos entwerfen. Es war ein tolles Projekt. Ich lernte viele Menschen auf der ganzen Welt durch die Community kennen. Die gute Platzierung meines Logos zeigte sehr großes Potential und durch den weltweiten Austausch mit anderen Designern, konnte ich in dem Wett­streit viele gute Erfahrungen sammeln.</p>
<p>Aus insgesamt 15375 Logos wurden, am 20. August 2011, die besten Zehn Logos, zu denen auch der Entwurf eines Potsdamer Designers ge­hörte, gewählt. Am 28. August 2011 wurde das Siegerlogo gekürt, welches seit­dem weltweit für die Menschenrechte steht.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p><p class="linie2"></p>
<h4>Digital und Print von A bis Z</h4>
<div id="glossar"><ul><li><a href="glossar/a/a-glossar.html" title="Artikel mit A">A</a></li>
<li><a href="glossar/b/b-glossar.html" title="Artikel mit B">B</a></li>
<li><a href="glossar/c/c-glossar.html" title="Artikel mit C">C</a></li>
<li><a href="glossar/d/d-glossar.html" title="Artikel mit D">D</a></li>
<li><a href="glossar/e/e-glossar.html" title="Artikel mit E">E</a></li>
<li><a href="glossar/f/f-glossar.html" title="Artikel mit F">F</a></li>
<li><a href="glossar/g/g-glossar.html" title="Artikel mit G">G</a></li>
<li><a href="glossar/h/h-glossar.html" title="Artikel mit H">H</a></li>
<li><a href="glossar/i/i-glossar.html" title="Artikel mit I">I</a></li>
<li><a href="glossar/j/j-glossar.html" title="Artikel mit J">J</a></li>
<li><a href="glossar/k/k-glossar.html" title="Artikel mit K">K</a></li>
<li><a href="glossar/l/l-glossar.html" title="Artikel mit L">L</a></li>
<li><a href="glossar/m/m-glossar.html" title="Artikel mit M">M</a></li></ul>
<ul><li><a href="glossar/n/n-glossar.html" title="Artikel mit N">N</a></li>
<li><a href="glossar/o/o-glossar.html" title="Artikel mit O">O</a></li>
<li><a href="glossar/p/p-glossar.html" title="Artikel mit P">P</a></li>
<li><a href="glossar/q/q-glossar.html" title="Artikel mit Q">Q</a></li>
<li><a href="glossar/r/r-glossar.html" title="Artikel mit R">R</a></li>
<li><a href="glossar/s/s-glossar.html" title="Artikel mit S">S</a></li>
<li><a href="glossar/t/t-glossar.html" title="Artikel mit T">T</a></li>
<li><a href="glossar/u/u-glossar.html" title="Artikel mit U">U</a></li>
<li><a href="glossar/v/v-glossar.html" title="Artikel mit V">V</a></li>
<li><a href="glossar/w/w-glossar.html" title="Artikel mit W">W</a></li>
<li><a href="glossar/x/x-glossar.html" title="Artikel mit X">X</a></li>
<li><a href="glossar/y/y-glossar.html" title="Artikel mit Y">Y</a></li>
<li><a href="glossar/z/z-glossar.html" title="Artikel mit Z">Z</a></li></ul></div>
<p>Haben Sie darüber hinaus weitere Fragen zum Webdesign, meinen Arbeiten oder meiner Person, zögern Sie nicht mit mir Kontakt aufnehmen.<br /> </p>
<p>Ich freue mich auf Ihre Anfrage<br />Mit freundlichen Grüßen aus Potsdam</p>
<p><em>Ingo Pahl</em></p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
</div>
</div><div class="clear"></div>
<div id="footer">
<div id="navi_2"><ul><li><a href="kontakt.php" title="Kontakt per E-Mail" accesskey="6">| Kontakt </a></li>
<li><a href="impressum.html" title="Autor und Ansprechpartner" accesskey="7">| Impressum </a></li>
<li><a href="privacy.html" title="Ihre Daten bei mir" accesskey="8">| Datenschutz </a></li>
<li><a href="nutzung.html" title="Was es zu beachten gibt" accesskey="9">| Nutzungsbedingungen </a></li>
<li><a href="profil/newsletter.php" title="Neuigkeiten beim Datenschutz">| Newsletter </a></li>
<li><a href="links.html" title="Andere interessante Seiten">| Links</a></li></ul></div>
<div id="qual">
<div class="qual1"><p class="abstand"> </p></div>
<div class="qual2"><p> </p><p> </p></div>
<div class="qual3"><p> </p><p> </p>
</div>
</div>
<div id="copy">
<p class="copy">© by Ingo Pahl » <a href="humans.txt" class="text" title="I'm a human" onclick="humanstxt();return false" onkeypress="humanstxt();return false">Humanstext</a> » <a href="news.rss" title="Pahl 4u - Webdesign aus Potsdam">
<abbr xml:lang="en" title="Really Simple Syndication" lang="en">RSS</abbr></a> » <a href="glossar/medien.rss" class="text" title="Digital und Print | RSS-Feed">A bis Z</a> <span title="Zuletzt aktualisiert">Aktualisiert am: <!-- #BeginDate format:Ge1 -->17.09.2013<!-- #EndDate --></span></p>
No tooltip will appear for the abbreviation in older versions of Internet Explorer.
<abbr xml:lang="en" title="Really Simple Syndication" lang="en">RSS</abbr></a> » <a href="glossar/medien.rss" class="text" title="Digital und Print | RSS-Feed">A bis Z</a> <span title="Zuletzt aktualisiert">Aktualisiert am: <!-- #BeginDate format:Ge1 -->17.09.2013<!-- #EndDate --></span></p>
</div><div class="clear"></div>
</div>
</div>
<script type="text/javascript">var MenuBar1=new Spry.Widget.MenuBar("MenuBar1");</script>
</body>
</html>