<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Borislav Rangelov</title>
	<atom:link href="http://www.borislav-rangelov.me/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.borislav-rangelov.me/blog</link>
	<description>Der Blog für Webdesigner und Grafiker</description>
	<lastBuildDate>Thu, 22 Sep 2011 08:55:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>CSS3 Selectors</title>
		<link>http://www.borislav-rangelov.me/blog/css3-selectors/</link>
		<comments>http://www.borislav-rangelov.me/blog/css3-selectors/#comments</comments>
		<pubDate>Thu, 22 Sep 2011 08:39:45 +0000</pubDate>
		<dc:creator>Borislav Rangelov</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[Module]]></category>
		<category><![CDATA[Selectors]]></category>

		<guid isPermaLink="false">http://www.borislav-rangelov.me/blog/?p=691</guid>
		<description><![CDATA[CSS3 wurde, wie schon zuvor erwähnt, in Module aufgeteilt, die bisherige bzw. in den früheren Versionen vorgestellte und neue Features beschreiben. Die Basis dafür ist CSS Layer 2 Revision 1. Dazu kommen sogenannte Profile, die für bestimmte Plattformen ausgewählte Eigenschaften zusammenfassen bzw. auflisten – z.B. „CSS TV Profile 1.0“ für Fernsehgeräte. Das vielleicht als am [...]]]></description>
			<content:encoded><![CDATA[<p>CSS3 wurde, <a title="CSS3 – ein neuer Anfang" href="http://www.borislav-rangelov.me/blog/css3-%e2%80%93-ein-neuer-anfang/">wie schon zuvor erwähnt</a>, in Module aufgeteilt, die bisherige bzw. in den früheren Versionen vorgestellte und neue Features beschreiben. Die Basis dafür ist CSS Layer 2 Revision 1. Dazu kommen sogenannte Profile, die für bestimmte Plattformen ausgewählte Eigenschaften zusammenfassen bzw. auflisten – z.B. „CSS TV Profile 1.0“ für Fernsehgeräte.</p>
<p>Das vielleicht als am stabilsten angesehene Modul ist „Selectors Level 3“. Das offizielle W3C-Dokument ist hier zu finden: <a href="http://www.w3.org/TR/css3-selectors/">http://www.w3.org/TR/css3-selectors/</a>. In seiner letzten offiziellen Veröffentlichung am 15. Dezember 2009 ist es als Proposed Recommendation gekennzeichnet. Es beinhaltet alle in CSS1 und CSS2 bzw. CSS 2.1 vorgestellten Auswähler – auch Selektoren genannt – und führt neue ein.</p>
<p><span id="more-691"></span></p>
<p>Durch Selektoren werden Elemente, Attribute oder Bereiche eines Dokuments ausgewählt, um sie dann zu verändern bzw. zu formatieren.</p>
<h3>Attribut-Selektoren</h3>
<p>Die Selektoren für Attribute erlauben das Auswählen von Elementen anhand ihrer Attribute und Attributwerte. Durch <code>h1[title]</code> werden alle <code>h1</code> mit einem <code>title</code> angesprochen. Bei <code>a[href="www.example.com"]</code> wird jedes a-Element mit genau „www.example.com“ als <code>href</code>-Wert, jedoch nicht z.B. mit „wwwexample.com/home“ ausgewählt. Durch <code>a[rel ~ ="foto"]</code> würde man ein <code>a</code>-Element mit <code>foto bild andere</code> als <code>rel</code>-Wert auswählen – die Zeichen „foto“ müssen im Wert enthalten sein.</p>
<p>Mit den neuen Selektoren kann man nach Teilen eines Attributwertes suchen:</p>
<ul>
<li><code>[att^="val"]</code> sucht nach Elementen mit <code>att</code> als Attribut, dessen Wert mit <code>val</code> beginnt.</li>
<li><code>[att$="val"]</code> sucht nach Elementen mit <code>att</code> als Attribut, dessen Wert mit <code>val</code> endet.</li>
<li><code>[att*="val"]</code> sucht nach Elementen mit <code>att</code> als Attribut, das die Zeichenkette <code>val</code> im Wert enthält.</li>
</ul>
<p>Folgende Beispiele verdeutlichen das:</p>
<p><code>object[type^="image/"]</code></p>
<p>Der Selektor repräsentiert alle object-Elemente, die auf Bilder verweisen.</p>
<p><code>a[href$=".html"]</code></p>
<p>Der Selektor repräsentiert alle a-Elemente, die auf HTML-Dateien verweisen.</p>
<p><code>p[title*="hello"]</code></p>
<p>Der Selektor repräsentiert alle Paragraphen, bei denen das Wort „hello“ im title vorkommt.</p>
<h3>Struktur-Pseudo-Klassen</h3>
<p>Das ist ein neuer Typ Selektoren – eine Untergruppe von den Pseudo-Selektoren. Er repräsentiert Elemente, die Teil eines Strukturbaumes im Dokument sind, aber nicht durch normale Selektoren oder durch Kombinationen von Selektoren ausgewählt werden können.</p>
<p>Struktur-Pseudo-Klassen sind:</p>
<ul>
<li><code>:root</code></li>
<li><code>:nth-child()</code></li>
<li><code>:nth-last-child()</code></li>
<li><code>:nth-of-type()</code></li>
<li><code>:nth-last-of-type()</code></li>
<li><code>:first-child</code></li>
<li><code>:last-child</code></li>
<li><code>:first-of-type</code></li>
<li><code>:last-of-type</code></li>
<li><code>:only-child</code></li>
<li><code>:only-of-type</code></li>
<li><code>:empty</code></li>
</ul>
<p><code>:root</code> repräsentiert das erste bzw. das Wurzelelement. In einem HTML-Dokument ist das z.B. <code>html</code>.</p>
<p>Mit <code>:nth-child()</code> kann die genaue Stelle eines Elements im Strukturbaum angesprochen werden. Es besteht auch die Möglichkeit, mehrere Elemente zu markieren. Vordefinierte Werte sind <code>odd</code> für ungerade und <code>even</code> für gerade – Anders ausgedrückt <code>2n+1</code> für <code>odd</code> und <code>2n</code> für <code>even</code>. Man kann jedes Kind-Element auswählen, wenn man die Reihenfolge und seinen Platz darin kennt:</p>
<p><code>tr:nth-child(2n+1) /* alle ungeraden Reihen einer Tabelle */<br />
tr:nth-child(odd)  /* wie oben */<br />
tr:nth-child(2n+0) /* alle geraden Reihen einer Tabelle */<br />
tr:nth-child(even) /* wie oben */<br />
</code></p>
<p>Die Zahl (ohne <code>n</code>) repräsentiert die Stelle des ersten Elements, das auszuwählen ist. Der Wert vor <code>n</code>, wobei <code>n = 1</code>, wird kontinuierlich dazuaddiert:</p>
<p><code>p:nth-child(4n+1) { color: navy; }   /* Paragraph 1, 5, 9, 13… */<br />
p:nth-child(4n+2) { color: green; }  /* Paragraph 2, 6, 10, 14… */<br />
p:nth-child(4n+3) { color: maroon; } /* Paragraph 3, 7, 11, 15… */<br />
</code></p>
<p>Man kann auch negative Zahlen verwenden:</p>
<p><code>:nth-child(10n-1)  /* Element 9, 19, 29…, da -1 + 10 */<br />
:nth-child(10n+9)  /* wie Oben */<br />
</code></p>
<p>Mit <code>:nth-child(5)</code> kann man z.B. nur ein Element auswählen – hier das fünfte.</p>
<p><code>n</code> kann auch ein negativer Wert sein:</p>
<p><code>tr:nth-child(-n+6)  /* die ersten 6 Reihen einer Tabelle */</code></p>
<p>Man muss beachten, dass keine negativen Werte bei der Berechnung entstehen, wie z.B. bei (<code>-10n+5</code>). Da es kein Element „-5“ geben kann, wird nur das fünfte Element ausgewählt.</p>
<p>Folgende Auswähler basieren auf <code>:nth-child()</code> und haben auch <code>odd</code> und <code>even</code> als vordefinierte Werte: <code>:nth-last-child()</code>, <code>:nth-of-type()</code>, und <code>:nth-last-of-type()</code>.</p>
<p><code>:nth-last-child()</code> funktioniert genau wie <code>:nth-child()</code>. Es wird nur die Reihenfolge beim Zählen vertauscht – vom letzten Element beginnend:</p>
<p><code>tr:nth-last-child(-n+6)  /* die letzten 6 Reihen einer Tabelle */</code></p>
<p><code>:nth-of-type()</code> bezieht sich auf Elementtypen, ohne sich auf ein bestimmtes Elternelement beschränken zu müssen:</p>
<p><code>img:nth-of-type(2n+1) { float: right; }<br />
img:nth-of-type(2n) { float: left; }<br />
</code></p>
<p>Hier wird die Position jedes <code>img</code>-Tags durch <code>float</code> bestimmt.</p>
<p><code>:nth-last-of-type()</code> funktioniert wie <code>:nth-of-type()</code> – das Zählen beginnt aber beim letzten Element:</p>
<p><code>h2:nth-of-type(n+2):nth-last-of-type(n+2)</code></p>
<p>Hier werden alle <code>h2</code>-Elemente markiert, außer das erste und das letzte.</p>
<p><code>:first-child</code> und <code>:last-child</code> sind identisch mit <code>:nth-child(1)</code> und <code>:nth-last-child(1)</code>.</p>
<p><code>:first-of-type</code> und <code>:last-of-type</code> sind identisch mit <code>:nth-of-type(1)</code> und <code>:nth-last-of-type(1)</code>.</p>
<p><code>:only-child</code> wählt das einzige Kind-Element eines Elternelements aus. Es ist identisch mit <code>:first-child:last-child</code> oder <code>:nth-child(1):nth-last-child(1)</code>.</p>
<p><code>:only-of-type</code> wählt das einzige Element eines bestimmten Typs aus. Es ist identisch mit <code>:first-of-type:last-of-type</code> oder <code>:nth-of-type(1):nth-last-of-type(1)</code>.</p>
<p>Mit <code>:empty</code> werden Elemente ohne Kind-Elemente und ohne Inhalt ausgewählt. <code>p:empty</code> funktioniert z.B. bei: <code>&lt;p&gt;&lt;/p&gt;</code>. Es ist jedoch ungültig bei: <code>&lt;p&gt;text&lt;/p&gt;</code> oder <code>&lt;p&gt;text und &lt;b&gt;mehr&lt;/b&gt; text&lt;/p&gt;</code>.</p>
<h3>Andere Pseudo-Klassen</h3>
<p>Neu sind:</p>
<ul>
<li><code>:not()</code></li>
<li><code>:target</code></li>
<li><code>:enabled</code></li>
<li><code>:disabled</code></li>
<li><code>:checked</code></li>
</ul>
<p><code>:not()</code> repräsentiert eine Verneinung und funktioniert nur bei einfachen Selektoren. Das würde Kombinationen, wie <code>:not(h1, p)</code> ausschließen. Zugelassen sind Typ-Selektoren (<code>h1</code>), universale Selektoren (<code>*</code>),  Attribut-Selektoren (<code>[title]</code>), Klassen (<code>.box</code>), IDs (<code>#box_1</code>) und Pseudo-Klassen (<code>:first-of-type</code>).</p>
<p>Mit <code>button:not([DISABLED])</code> wählt man alle Elemente des Typs <code>button</code> aus, die nicht <code>disabled</code> sind. Und <code>*:not(h1)</code> würde alle Elemente auswählen, die keine Überschrift erster Ebene sind.</p>
<p><code>h2:not(:first-of-type):not(:last-of-type)</code></p>
<p>ist z.B. identisch mit:</p>
<p><code>h2:nth-of-type(n+2):nth-last-of-type(n+2)</code></p>
<p><code>:target</code> wurde eingeführt, um Verweise innerhalb eines Dokuments formatieren und so besser identifizieren zu können. Es repräsentiert das Ziel-Element eines Anker-Links:</p>
<p><code>*:target { color: red }<br />
*:target::before { content: url(target.png) }<br />
</code></p>
<p>Hier werden alle Ziel-Elemente angesprochen und formatiert. Die Formatierung tritt ein, nachdem der Link bzw. die Sprungmarke zum Element angeklickt wurde. Es muss also zuerst eine Interaktion stattfinden, wie z.B. bei <code>:hover</code>.</p>
<p>Mit <code>:enabled</code> und <code>:disabled</code> werden Elemente, die sich im Zustand <code>enabled</code> bzw. <code>disabled</code> befinden, z.B. Formularfelder, ausgewählt.</p>
<p>Mit <code>:checked</code> lassen sich markierte Checkboxen und Radio-Buttons ansprechen.</p>
<h3>Allgemeiner Geschwister-Kombinator</h3>
<p>Zusätzlich wird ein neuer Kombinator eingeführt – der Allgemeine Geschwister-Kombinator. Die Schreibweise ist <code>E ~ F</code>. Es wird ein <code>F</code>-Element, das nach einem <code>E</code>-Element kommt, ausgewählt. Dabei müssen diese Elemente (<code>E</code> und <code>F</code>) demselben Elternelement angehören. Zwischenelemente sind erlaubt – wie bei <code>E F</code>.</p>
<p><code>&lt;p&gt;Der &lt;i&gt;neue Kombinator&lt;/i&gt; in &lt;b&gt;CSS3&lt;/b&gt; wird mit einem &lt;i&gt;Tilde-Zeichen&lt;/i&gt; geschrieben. Es gibt jetzt insgesamt &lt;i&gt;vier Kombinatoren&lt;/i&gt; in &lt;b&gt;CSS&lt;/b&gt;&lt;/p&gt;</code></p>
<p>Mit <code>b~i</code> würde man die zwei <code>i</code>-Elemente, die nach <code>b</code> kommen, auswählen. Und mit <code>i~b</code> jedes <code>b</code>-Element, jeweils nach <code>i</code>.</p>
<p><code>E+F</code> und <code>E&gt;F</code> erlauben keine Zwischenelemente – der Pfad muss genau stimmen. Somit ist der neue Kombinator mehr mit <code>E F</code> verwandt.</p>
<p>Eine neue Schreibweise gibt es bei den Pseudo-Elementen. Sie werden jetzt mit zwei Doppelpunkten davor geschrieben – von <code>:first-line</code>, <code>:first-letter</code>, <code>:before</code> und <code>:after</code> wird <code>::first-line</code>, <code>::first-letter</code>, <code>::before</code> und <code>::after</code>. So sind sie besser von den Pseudo-Klassen zu unterscheiden. Pseudo-Elemente dürfen nur einmal pro Auswähler verwendet werden. <code>p::after::before</code> wäre also ungültig.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.borislav-rangelov.me/blog/css3-selectors/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS3 – ein neuer Anfang</title>
		<link>http://www.borislav-rangelov.me/blog/css3-%e2%80%93-ein-neuer-anfang/</link>
		<comments>http://www.borislav-rangelov.me/blog/css3-%e2%80%93-ein-neuer-anfang/#comments</comments>
		<pubDate>Thu, 04 Aug 2011 16:01:52 +0000</pubDate>
		<dc:creator>Borislav Rangelov</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Anfang]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[Geschichte]]></category>
		<category><![CDATA[Weiterentwicklung]]></category>

		<guid isPermaLink="false">http://www.borislav-rangelov.me/blog/?p=461</guid>
		<description><![CDATA[Dieser Artikel befasst sich mit der Weiterentwicklung von CSS als modulbasiertes CSS3. Es werden kurz die Anfänge sowie der Stand der Entwicklung dargestellt. Modularisierung Das W3C begann 1999 mit der Modularisierung von XHTML. Kurzer Zeit später wurde auch CSS davon „betroffen“. Am 14. April 2000 veröffentlichte man ein Working Draft – der erste offizielle – [...]]]></description>
			<content:encoded><![CDATA[<p>Dieser Artikel befasst sich mit der Weiterentwicklung von CSS als modulbasiertes CSS3. Es werden kurz die Anfänge sowie der Stand der Entwicklung dargestellt.</p>
<h3>Modularisierung</h3>
<p>Das W3C begann 1999 mit der Modularisierung von XHTML. Kurzer Zeit später wurde auch CSS davon „betroffen“. Am 14. April 2000 veröffentlichte man ein Working Draft – der erste offizielle – mit dem Titel <a href="http://www.w3.org/TR/2000/WD-css3-roadmap-20000414">CSS3 Introduction</a>. Darin wurde mitgeteilt, dass die CSS Working Group die CSS-Spezifikation in Module aufteilen wird.</p>
<p><span id="more-461"></span></p>
<p>Und warum gerade Module? Die Erklärung des Konsortiums: Da die Popularität von CSS und somit das Interesse an Erweiterungen wachse, wolle man, anstatt mehrere Ergänzungen in ein einziges, monolithisches Dokument zu zwingen, die Spezifikation in individuelle Stücke aufteilen. Module erlaubten eine schnellere und präzisere Aktualisierung von CSS. Das Resultat würde eine sichtbar schnellere und flexiblere Weiterentwicklung der Spezifikation sein.</p>
<p>Wie jede CSS-Spezifikation zuvor, basiert auch CSS3 auf seinen Vorgänger. Cascading Style Sheets Level 3 verwendet die Spezifikation CSS 2.1 als Kern. Alle neuen Features sollen Erweiterung dieses Kerns darstellen. Jedes Modul kann theoretisch Funktionen hinzufügen oder auch ersetzen. CSS3 soll dabei keine Widersprüche zu CSS 2.1 erzeugen, sondern neue oder überarbeitete Funktionen definieren.</p>
<p>Die neue CSS-Spezifikation war anfangs für 1999 geplant. CSS 2.1, der Übergang zwischen CSS2 und CSS3, ist selbst gerade fertig geworden und bekam am 07. Juni 2011 den <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">Recommendation-Status</a>.</p>
<h3>Status der CSS3-Module</h3>
<p>Cascading Style Sheets Level 3 hat sich mit der Zeit sehr verändert. Neue Module kamen dazu, einige wurden entfernt, aufgeteilt oder sind Teil eines anderen geworden. Ein Beispiel ist CSS Web Fonts, das angeblich seit 2002 im Last-Call-Status verweilt. Tatsächlich wird es nicht mehr als selbstständiges Modul weiterentwickelt – es ist ein Teil von CSS Fonts.</p>
<p>Die Anzahl der Module ist inzwischen stark gewachsen – etwa 50 (vgl. Bos, 2010), CSS 2.1 mitgezählt, da es als Kern der neuen Spezifikation dient und ein Basis-Modul darstellt. Es ist durchaus möglich, dass sich die Anzahl auch in Zukunft verändert. Am 20. März 2009 kamen z.B. 4 neue Module hinzu – <a href="http://www.w3.org/Style/CSS/specs#animations">Animations</a>, <a href="http://www.w3.org/Style/CSS/specs#transitions">Transitions</a>, <a href="http://www.w3.org/Style/CSS/specs#transform2d">2d-Transforms</a>, <a href="http://www.w3.org/Style/CSS/specs#transform3d">3d-Transforms</a> (vorgeschlagen von Apple). Alle vier befinden sich noch im Working-Draft-Stadium.</p>
<p>Alle Module sind nach Priorität sortiert – hoch, medium, niedrig. Momentan haben die Module CSS Namespaces, CSS Backgrounds and Borders, CSS Multi-column Layout und Media Queries Vorrang bzw. sind mit der Priorität hoch eingestuft.</p>
<p>Priorität, Status und viele weitere Informationen bezüglich CSS können hier eingesehen werden: <a href="http://www.w3.org/Style/CSS/current-work">http://www.w3.org/Style/CSS/current-work</a>.</p>
<p>Ich arbeite momentan an einer Timeline von CSS3, wo alle Entwicklungsstufen und der aktuelle Stand der Module angegeben sind. Sobald sie fertig ist, wird sie hier veröffentlicht. Interessant dabei ist, die Entwicklung von CSS 2.1 – aber dazu später mehr.</p>
<p>Viele der Module sind leider noch im Working-Draft- oder Last-Call-Status. CSS Basic User Interface ist seit 2004 eine Candidate Recommendation, CSS Hyperlink Presentation ist seit 2004 ein Working Draft (es wurde nur ein Entwurf veröffentlicht). CSS Line Layout und CSS Lists sind seit 2002 im Entwurfsstadium. Und bei CSS Math z.B. steht nur ein Fragezeichen – kein Working Draft, kein veröffentlichtes Dokument. Somit hat man Module, die seit 6 bis 8 Jahren nicht weiterentwickelt worden sind. Ein positives Beispiel ist das Modul Selectors: es ist stabil und bereits in einige Browser vollständig implementiert.</p>
<p>Unzählige Websites zeigen die neuen Funktionen von CSS3. Ein bekanntes Beispiel ist http://www.css3.info. Dort findet man einen CSS Selectors Test und ein Preview einiger neuer Features und CSS-Eigenschaften. Man kann sagen, dass Module mit dem Status Candidate Recommendation oder höher schon heute in vielen Browsern implementiert sind.</p>
<p>Ob Ihr Browser CSS3 unterstützt und falls ja, welche Module genau, können Sie mit Hilfe des folgenden Tests herausfinden (momentan nur in einer Vorabversion vorhanden):</p>
<p><a title="Browsertest CSS3 (beta)" href="http://www.borislav-rangelov.me/html5-und-css3/browsertest.html#css3">Browsertest CSS3 (beta)</a></p>
<p>Trotz vorhandener Unterstützung einiger Teilbereiche von CSS Layer 3 ist unumstritten, dass der zukünftige Standard nur sehr langsame Fortschritte macht. Es ist schwer oder gar unmöglich einzuschätzen, wann CSS3 fertig sein wird. Man bedenke, dass die Entwicklung von CSS 2.1 gerade abgeschlossen wurde. Mit diesem Problem und die möglichen Ursachen werden ich in einem späteren Artikel beschäftigen.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.borislav-rangelov.me/blog/css3-%e2%80%93-ein-neuer-anfang/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iPhone Icons (PNG &amp; PSD)</title>
		<link>http://www.borislav-rangelov.me/blog/iphone-pngs/</link>
		<comments>http://www.borislav-rangelov.me/blog/iphone-pngs/#comments</comments>
		<pubDate>Mon, 01 Aug 2011 14:53:34 +0000</pubDate>
		<dc:creator>Borislav Rangelov</dc:creator>
				<category><![CDATA[Downlaods]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[kostenlos]]></category>
		<category><![CDATA[png]]></category>
		<category><![CDATA[psd]]></category>

		<guid isPermaLink="false">http://localhost/blog/?p=166</guid>
		<description><![CDATA[Der erste kostenlose Download ist eine kleine Icon-Sammlung, die ich vor einigen Jahren gemacht habe. Sie besteht aus etwa 50 PNG-Dateien und die PSD-Datei – die Quelldatei szsg. Somit kann jeder seine eigenen Icons erstellen bzw. die vorhandenen bearbeiten. Die Icons sind kostenlos und dürfen sowohl für private als auch für kommerzielle Zwecke verwendet werden. [...]]]></description>
			<content:encoded><![CDATA[<p>Der erste kostenlose Download ist eine kleine Icon-Sammlung, die ich vor einigen Jahren gemacht habe. Sie besteht aus etwa 50 PNG-Dateien und die PSD-Datei – die Quelldatei szsg. Somit kann jeder seine eigenen Icons erstellen bzw. die vorhandenen bearbeiten.</p>
<p><img class="alignnone size-full wp-image-321" title="iPhone PNGs" src="http://www.borislav-rangelov.me/blog/wp-content/uploads/2011/08/portfolio_img_i.jpg" alt="" width="580" height="300" /></p>
<p><span id="more-166"></span></p>
<p>Die Icons sind kostenlos und dürfen sowohl für private als auch für kommerzielle Zwecke verwendet werden. Ein Link zu meiner Website oder zum Artikel sind nicht erforderlich, sind aber selbstverständlich willkommen.</p>
<a href="http://www.borislav-rangelov.me/blog/wp-content/plugins/download-monitor/download.php?id=1" title="Download iPhone PNGs">Download iPhone PNGs (2.06 MB)</a>
]]></content:encoded>
			<wfw:commentRss>http://www.borislav-rangelov.me/blog/iphone-pngs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Begriffe und Definitionen</title>
		<link>http://www.borislav-rangelov.me/blog/begriffe-und-definitionen/</link>
		<comments>http://www.borislav-rangelov.me/blog/begriffe-und-definitionen/#comments</comments>
		<pubDate>Sat, 30 Jul 2011 07:46:06 +0000</pubDate>
		<dc:creator>Borislav Rangelov</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[WWW]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[W3C Standard]]></category>
		<category><![CDATA[W3C Working Group]]></category>
		<category><![CDATA[XHTML]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://www.cold-design.com/blog/?p=81</guid>
		<description><![CDATA[Hier würde ich gerne einige Begriffe und Definitionen erläutern. Sie stammen, wie der vorherige Beitrag, auch aus meiner Diplomarbeit. Meine Quellen sind am Ende des Beitrags zu finden. HTML HTML (Hypertext Markup Language) ist eine Auszeichnungssprache, die die Struktur einer Webseite beschreibt. Dabei werden verschiedene Bereiche des Inhalts, wie Paragraphen, Listen, Tabellen und mehr definiert [...]]]></description>
			<content:encoded><![CDATA[<p>Hier würde ich gerne einige Begriffe und Definitionen erläutern. Sie stammen, wie <a title="Aktueller Entwicklungsstand der Grundsteine vom World Wide Web" href="http://www.cold-design.com/blog/?p=51">der vorherige Beitrag</a>, auch aus meiner Diplomarbeit. Meine Quellen sind am Ende des Beitrags zu finden.</p>
<h3>HTML</h3>
<p>HTML (Hypertext Markup Language) ist eine Auszeichnungssprache, die die Struktur einer Webseite beschreibt. Dabei werden verschiedene Bereiche des Inhalts, wie Paragraphen, Listen, Tabellen und mehr definiert bzw. ausgezeichnet. (vgl. W3C, o.J.a)</p>
<p><span id="more-251"></span>HTML ist eine der Kerntechnologien, die benötigt werden, um eine Webseite aufzubauen. Durch sie ist es möglich, plattformunabhängige Hypertext-Dokumente, die aus Text, Tabellen, Listen, Fotos usw. bestehen, zu erstellen und online zu veröffentlichen. Mit Hilfe von Hypertext-Links, kurz Links genannt, werden solche Dokumente miteinander verknüpft. HTML bietet die Möglichkeit, auch sogenannte Formen (Formularfelder) in Webseiten zu integrieren, wodurch eine Transaktion mit Servern stattfindet. Des Weiteren können Video, Audio und Anwendungen eingebunden werden. (vgl. W3C, o.J.a)</p>
<h3>XHTML und XML</h3>
<p>XHTML (Extensible Hypertext Markup Language) ist eine Variante von HTML, die auf einer anderen Syntax basiert – auf der von XML. Sie hat dieselben Elemente wie HTML, doch leicht unterschiedliche und allgemein strengere Syntaxregeln. Da XHTML eine XML-Anwendung ist, kann sie mit anderen XML-Programmen verwendet werden. (vgl. W3C, o.J.a)</p>
<p>XML (Extensible Markup Language) ist eine einfache textbasierte Sprache, die die Struktur eines Dokuments repräsentiert (vgl. W3C, o.J.b).</p>
<h3>CSS</h3>
<p>CSS (Cascading Style Sheets) beschreibt das Aussehen einer Internetseite – z.B. Layout, Positionierung, Schriften, Farben. Die Sprache erlaubt und ermöglicht die Anpassung an verschiedene Ausgabegeräte – z.B. große oder kleine Monitore, Monitore von mobilen Geräten, Drucker. Alle Angaben werden in einem Stylesheet gemacht – es bildet eine Art Formatvorlage. (vgl. W3C, o.J.a)</p>
<p>Die Aufteilung von Inhalt, Struktur (HTML) und Design (CSS) erleichtert die Wartung von Websites. Stylesheets können von mehreren Unterseiten gleichzeitig verwendet werden. Es besteht auch die Möglichkeit, sie für unterschiedliche Umgebungen zu optimieren. (vgl. W3C, o.J.a)</p>
<p>CSS ist eine weitere Kerntechnologie zur Erstellung von Webseiten. Sie kann aber unabhängig von HTML agieren, z.B. zusammen mit XML-basierten Auszeichnungssprachen (vgl. W3C, o.J.a).</p>
<h3>World Wide Web</h3>
<p>Das World Wide Web (WWW) ist ein über das Internet erreichbares System aus miteinander verlinkten Hypertext-Dokumenten. Die Dokumente können mit Hilfe eines Browsers abgerufen und angezeigt werden (vgl. Berners-Lee, 1991). Der Erfinder ist der englische Ingenieur Tim Berners-Lee, der sein Werk so beschreibt: “distributed heterogeneous collaborative multimedia information system” (Berners-Lee, 1991).</p>
<h3>W3C</h3>
<p>Das W3C (World Wide Web Consortium) ist eine internationale Organisation, in der Mitgliederorganisationen, Vollzeitarbeiter und auch die Öffentlichkeit gemeinsam neue Standards für das World Wide Web entwickeln (vgl. W3C, o.J.c). Es werden Protokolle und Richtlinien erstellt, die das Wachstum des Webs garantieren sollen (vgl. W3C, o.J.d). Die W3C-Standards sind die Grundsteine eines funktionierenden World Wide Web. Leiter ist Tim Berners-Lee, Erfinder des World Wide Web. Geschäftsführer ist Jeffrey Jaffe (vgl. W3C, o.J.c).</p>
<h3>W3C Working Group</h3>
<p>Die W3C-Working-Gruppen bestehen aus Mitgliedern, Experten oder auch Arbeitern des W3-Konsortiums, die sich auf ein bestimmtes Thema (z.B. Webservices) konzentrieren. Solche Themen könnten z.B. CSS, HTML oder ein anderer Webservice sein. Die Kernaufgabe ist das Erbringen von Dienstleistungen (z.B. Erstellung, Wartung und Aktualisierung fachlicher Berichte, Software und Testumgebungen sowie Unterstützung anderer Gruppen). (vgl. Jacobs, 2005)</p>
<p>Für diese Diplomarbeit relevante W3C-Gruppen sind die HTML Working Group und die CSS Working Group.</p>
<h3>W3C-Entwicklungsstufen eines Standards</h3>
<p>Die W3C Working Groups erstellen, bearbeiten und aktualisieren fachliche Berichte, die Spezifikationen und Richtlinien beinhalten. Der Prozess, bis diese Dokumente ein Standard werden, basiert auf sich ständig wiederholender Überarbeitung und Überprüfung. Aktuell muss eine als Idee vorgestellte Spezifikation (ein Proposal), bis sie zu einem Standard wird, folgende Schritte bzw. Entwicklungsetappen durchlaufen (vgl. Jacobs, 2005):</p>
<ul>
<li>First Public Working Draft (FPWD): erste offizielle Veröffentlichung.</li>
<li>Working Draft (WD): Entwurf.</li>
<li>Last Call (LC): letzte Möglichkeit für größere Änderungen.</li>
<li>Candidate Recommendation (CR): Kandidat bzw. fertig für eine Standardisierung.</li>
<li>Proposed Recommendation (PR): vorgeschlagen für einen Standard.</li>
<li>Recommendation (REC): Standard.</li>
</ul>
<p>Um den Proposed-Recommendation-Status zu erreichen, sind zwei vollständige und voneinander unabhängige Implementierungen des Entwurfs vorzuweisen.</p>
<p>Dabei ist zu beachten, dass ein als Standard gekennzeichnetes Dokument nicht verpflichtend bzw. nicht normgebend ist, daher auch der Name „Recommendation“ – Empfehlung.</p>
<h3>Quellen:</h3>
<p>Berners-Lee, Tim, 1991<em>.<br />
World Wide Web: An Illustrated Seminar</em>.<br />
URL: http://www.w3.org/Talks/General.html [Stand 2010-05-30].</p>
<p>Jacobs, Ian, 2005<em>.<br />
World Wide Web Consortium Process Document</em>.<br />
URL: http://www.w3.org/Consortium/Process/ [Stand 2010-05-30].</p>
<p>W3C, o.J.a<em>.<br />
HTML &amp; CSS</em>.<br />
URL: http://www.w3.org/standards/webdesign/htmlcss [Stand 2010-05-31].</p>
<p>W3C, o.J.b<em>.<br />
XML Essentials &#8211; W3C</em>.<br />
URL: http://www.w3.org/standards/xml/core [Stand 2010-07-23].</p>
<p>W3C, o.J.c<em>.<br />
About W3C</em>.<br />
URL: http://www.w3.org/Consortium/.</p>
<p>W3C, o.J.d<em>.<br />
Help and FAQ &#8211; W3C</em>.<br />
URL: http://www.w3.org/Help/.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.borislav-rangelov.me/blog/begriffe-und-definitionen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Aktueller Entwicklungsstand der Grundsteine vom World Wide Web</title>
		<link>http://www.borislav-rangelov.me/blog/aktueller-entwicklungsstand-der-grundsteine-vom-world-wide-web/</link>
		<comments>http://www.borislav-rangelov.me/blog/aktueller-entwicklungsstand-der-grundsteine-vom-world-wide-web/#comments</comments>
		<pubDate>Fri, 29 Jul 2011 07:47:07 +0000</pubDate>
		<dc:creator>Borislav Rangelov</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[WWW]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://www.cold-design.com/blog/?p=51</guid>
		<description><![CDATA[Mein erster Beitrag stammt aus der Einleitung meiner Diplomarbeit – mit dem Thema „HTML5 und CSS3“. Ich denke, man hat so eine sehr gute Einführung in die Thematik des Blogs und der Diplomarbeit selbst. Das World Wide Web, entwickelt Ende der 1980er und gestartet Anfang der 1990er Jahre, ist inzwischen ein unersetzbarer Teil des täglichen [...]]]></description>
			<content:encoded><![CDATA[<p>Mein erster Beitrag stammt aus der Einleitung meiner Diplomarbeit – mit dem Thema „HTML5 und CSS3“. Ich denke, man hat so eine sehr gute Einführung in die Thematik des Blogs und der Diplomarbeit selbst.</p>
<p>Das World Wide Web, entwickelt Ende der 1980er und gestartet Anfang der 1990er Jahre, ist inzwischen ein unersetzbarer Teil des täglichen Lebens geworden. Immer mehr Menschen haben die Möglichkeit, auf das Web zuzugreifen – im Web zu surfen. Das verdankt man der sich ständig weiterentwickelnden Technik und somit dem Zuwachs an Geräten, die Zugriff auf das WWW haben. Was früher nur auf einem Computer möglich gewesen ist, ist mittlerweile auf Smartphones, Pads, PDAs, Notebooks, Netbooks, Tablet-PCs selbstverständlich. Sogar Mobiltelefone und Fernsehgeräte können über einen vollwertigen Browser verfügen.</p>
<p><span id="more-65"></span>Das Netz ist darüber hinaus sozial geworden. Es ist keine reine Informationsquelle mehr, sondern ein Platz, um sich auszutauschen, miteinander zu kommunizieren, Freunde und Bekannte zu treffen, andere Menschen kennenzulernen. Es ist zum Teil Ersatz, zum Teil Erweiterung schon vorhandener Kommunikationstechnologien, wie Telefon, E-Mail oder Chatrooms.</p>
<p>Die neuen Kommunikations- und Interaktionsmöglichkeiten im Web erfordern neue und kompliziertere Technologien. Neue und mächtigere Webanwendungen werden benötigt. HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets), die zwei Grundsteine des Webs, sind dafür nicht ausreichend. Zum Einsatz kommen u.a. JavaScript, jQuery , AJAX, PHP, Adobe Flash. Mit Hilfe solcher Webtechnologien entstehen Blogs, Soziale Netzwerke, Wikis, Plattformen wie Flickr, Twitter oder Facebook. Reichhaltige Webanwendungen (erstellt auch mit solchen Technologien), die in Bezug auf ihrer Komplexität und Funktionsumfang mit Desktopanwendungen konkurrieren können, sind heutzutage fast zu einer Selbstverständlichkeit geworden. Diese neuen Plattformen und Anwendungstypen und die dadurch entstehenden neuen Kommunikations- und Interaktionsmöglichkeiten sollen ein neues World Wide Web formiert haben – ein Web 2.0.</p>
<p>Ein neues World Wide Web braucht neue Standards, die universell und interoperabel angewendet werden können. Um sie zu definieren, wurden Organisationen, wie das World Wide Web Consortium (W3C) und die Web Hypertext Application Technology Working Group (WHATWG) gegründet. Sie entwickeln neue und aktualisieren und erweitern alte Webtechnologien und Standards.</p>
<p>HTML (aktuell in der Version 4.01) und CSS (aktuell in der Version 2.1) waren schon immer die Grundsteine des World Wide Web, sozusagen das Fundament jeder Webseite. Diese Webtechnologien, diese zwei Standards entwickeln sich, wie auch das WWW, fortwährend weiter bzw. werden weiterentwickelt. HTML5 und CSS3 sind die zukünftigen und aktuell sich noch in der Entwicklung befindenden Versionen der zwei Standards. Wie jede vorherige Version eines Standards bzw. einer Webtechnologie sollen auch sie neue Funktionen zur Anwendung bringen. Die Frage, die sich dabei stellt ist: Welche Features sind das und wie neu sind sie eigentlich? Können sie das Web verändern – ein neues World Wide Web definieren?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.borislav-rangelov.me/blog/aktueller-entwicklungsstand-der-grundsteine-vom-world-wide-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Willkommen!</title>
		<link>http://www.borislav-rangelov.me/blog/willkommen/</link>
		<comments>http://www.borislav-rangelov.me/blog/willkommen/#comments</comments>
		<pubDate>Fri, 29 Jul 2011 07:00:36 +0000</pubDate>
		<dc:creator>Borislav Rangelov</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Willkommen]]></category>

		<guid isPermaLink="false">http://www.cold-design.com/blog/?p=1</guid>
		<description><![CDATA[Herzlich Willkommen! Ich möchte mich zuerst kurz vorstellen. Mein Name ist Borislav Rangelov, geboren und aufgewachsen in Montana/Bulgarien. Etwa im Alter von 16 Jahren – es könnte auch früher gewesen sein – habe ich angefangen, mich für HTML und allgemein für die Möglichkeiten und Techniken der Gestaltung von Webseiten zu interessieren. Damals noch mit dem [...]]]></description>
			<content:encoded><![CDATA[<p>Herzlich Willkommen!</p>
<p>Ich möchte mich zuerst kurz vorstellen. Mein Name ist Borislav Rangelov, geboren und aufgewachsen in Montana/Bulgarien. Etwa im Alter von 16 Jahren – es könnte auch früher gewesen sein – habe ich angefangen, mich für HTML und allgemein für die Möglichkeiten und Techniken der Gestaltung von Webseiten zu interessieren. Damals noch mit dem Netscape Communicator bzw. mit dem Netscape Composer. Heute bin ich als freiberuflicher Webdesigner/Grafiker tätig.</p>
<p>Ende 2010 habe ich mein Studium als Medientechniker (Schwerpunkt Webdesign) an der HTWK Leipzig (Hochschule für Technik, Wirtschaft und Kultur Leipzig) abgeschlossen. Meine Diplomarbeit trug das Thema „HTML5 und CSS3“. Somit konnte ich meine Kenntnisse in HTML und CSS erweitern und vertiefen.</p>
<p>Ich interessiere mich für Technik (Hardware), Software und eigentlich alles, was mit dem Wort Design endet. Nur um Einiges zu nennen: Computerhardware, Gadgets, HTML, CSS, Webdesign, Screendesign, Adobe Photoshop. Inzwischen, in der Zeit von Web 2.0, bin ich von den Möglichkeiten, die JavaScript, Ajax und PHP bieten, fasziniert und begeistert.</p>
<p>Sie können Sich also vorstellen, was die Themen meiner Beiträge sein werden. Ich habe vor, so oft wie möglich neue Artikel zu veröffentlichen. Meine Diplomarbeit war etwa 200 Seiten lang, es ist also genug Material für „einige“ Monate vorhanden.</p>
<p>Es erwarten Sie interessante Beiträge, Tutorials, News usw. Ich freue mich auf Kommentare, Meinungen und Feedback.</p>
<p>Viele Grüße und viel Spaß!<br />
Borislav Rangelov</p>
]]></content:encoded>
			<wfw:commentRss>http://www.borislav-rangelov.me/blog/willkommen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

