Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Freitag, 29. April 2016

Stylesheets - Was ist das und wie verwende ich es?

lulu
Das Wort "Stylesheets", "style" oder "style.css" wird im täglichen Verbrauch verwendet. Doch was sind diese Stylesheets eigentlich?

Stylesheet-Sprachen [ˈstaɪlʃiːt] sind formale Sprachen in der Informationstechnik, um das Erscheinungsbild von Dokumenten bzw. Benutzeroberflächen festzulegen. wikipedia

Stylesheets besteht aus dem Wort "style" (auf deutsch Stil, Ausdrucksweise, Formatvorlage) und dem Wort "sheet" (Blatt, Platte, Sammlung). Man könnte es also als "Stil Sammlung" übersetzen. In dieser Sammlung stehen verschiedene Ausdrücke, die als Formatvorlage unserer Website dienen.

Fassen wir zusammen: Stylesheets bestehen aus Ausdrücken die dem Browser sagen, wie unsere Homepage aussehen soll. Mit ihnen können wir die Schriftfarbe, die Schriftgröße oder die Hintergrundfarbe der Homepage festlegen.

Für diese Ausdrücke gibt es übrigens verschiedene Sprachen. Die uns wohl bekannteste ist CSS (Cascading Style Sheets). CSS wurde entwickelt, um Inhalt und Design zu trennen. Meistens erstellt man dafür eine eigene css Datei (z.B. style.css).

HTML Code = Inhalt
CSS = Beschreibung des Aussehens dieses Inhalts.

Viele Webmaster schreiben ihre CSS direkt in den HTML Code (z.B. so: <div style="color: #fff">Ich bin weiß</div>). Von dieser Vorgehensweise ist abzuraten! Sollte das Design einmal geändert werden, muss bei dieser Variante jede Unterseite durchgegangen und überarbeitet werden.
Besser ist, alles in eine separate CSS Datei (z.B. style.css) zu schreiben und diese einzubinden. So muss nur diese eine Datei geändert werden.

Das sieht in der HTML (oder PHP Datei) dann so aus:
<div class="weiß">Ich bin weiß </div>

Und in der CSS Datei so:
.weiß{color: #fff;}

Man unterscheidet hier übrigens zwischen class und id. Eine id wird nur verwendet, wenn etwas einmalig ist bzw. nur einmal im ganzen Code gebraucht wird. Wie zum Beispiel bei einem header div..
<div id="header">Ich bin der Header</div>
In der CSS Datei hat wird die id Beschreibung mit einer Raute (#) begonnen:
#header{background-color: #000;}
Im Unterschied dazu wird eine Klasse (class) öfters im HTML Code verwendet.
<div class="weiß">Ich bin weiß </div>
<div class="weiß">Ich bin auch weiß </div> 

In der CSS Datei werden Klassen mit einem Punk (.) begonnen:
.weiß{color: #fff;}

Stylesheets verwenden

Zuerst wird eine CSS Datei erstellt (z.B. style.css). In diese Datei beschreiben wir nun, wie unsere Website aussehen soll. Dafür gibt es verschiedene Befehle, die verwendet werden können. Eine Übersicht gibt es unter anderem auf CSS4you oder W3Schools

Unsere style.css könnte zum Beispiel so aussehen:

body{
    background: blue;
    color: #000;
}
h1{
   font-size: 28px;
   color: #c27ba0;
}

Hiermit machen wir den Hintergrund der Website blau, die normale Schriftfarbe schwarz und sagen, dass die h1 Überschrift 28px groß und pink ist.


Damit der Browser von unserer CSS Datei weiß, müssen wir die Datei im Header (<head>) unseres Webseitencodes einbinden:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Jetzt läd der Browser die ganzen Styles, die wir in der CSS Datei stehen haben. Er weiß nun wie unser Hintergrund und unsere h1 Überschrift aussehen.

Innerhalb deiner PHP oder HTML Datei kannst du nun deine definierten Styles verwenden.
Zum Beispiel so
<h1>Überschrift</h1>

Du hast noch fragen? Dann schreib mir eine EMail oder hinterlasse einen Kommentar :)

Mittwoch, 27. April 2016

Urheberrecht - Bilder suchen/finden/verwenden

lulu
So ein wichtiges Thema, auch wenn viele es für mehr als nervig halten.
Das Urheberrecht. Leider liegen die meisten Bilder unter diesem Recht.
Schon vor 3-4 Jahren wurde hier auf PinkPearl Info fleissig diskutiert und nun wurde ich noch einmal gebeten, dass Thema aufzurollen.

Alte Beiträge zum Thema "Credits" sind:

Bevor ich allerdings starte möchte ich darauf hinweisen, dass ich niemandem die Lust am Hobby verderben möchte und auch wirklich hoffe, dass nicht noch mehr Seiten schließen. Die Credit Sache ist bei diesem Hobby schon immer ein sehr heikles Thema und es wurde schon so viel diskutiert...
Ich möchte mit diesem Post einfach nur Möglichkeiten aufzeigen, um an Bilder zu kommen, die auch verwendet werden dürfen.

Unerlässlich für jede Webseite, die fremde Bilder. Ressourcen, Texte oder sonstiges verwendet, ist eine Credit Seite. Werden Bilder, Codestücke, Ideen oder sonstiges von anderen Leuten verwendet, muss das auf dieser Seite notiert werden.  Und das ist um einiges Komplizierter wie es sich zuerst anhört.

Denn eigentlich musst du, bevor du ein Bild verwendest, den Zeichner erst um Erlaubnis bitten. Bei Anime Bildern ist das aber gar nicht so einfach. Eigentlich ist das bei ziemlich vielen Bildern gar nicht so einfach. Was also tun? Meistens steht auf den Seiten, ob die Bilder verwendet werden dürfen (oft muss den Uhrheber/Besitzer des Bildes nur auf der Seite verlinken).

Möglichkeiten: Was für Bilder darf ich verwenden?


# 1 Was für Bilder darf ich verwenden und welche nicht? Eine Möglichkeit wäre, im Internet nach Anime Stock Bildern zu suchen. Diese dürfen oft (mit Creditlink) verwendet werden.

#2 Was ist zum Beispiel bis vor kurzem nicht wusste: Manche Mangakas haben ihre Werke komplett freigegeben, wie zum Beispiel Shuho Sato. Diese Werke dürfen also ohne Probleme verwendet werden.

#3 Ein Tipp von meiner Seite: Sucht im Internet Bilder mit der "CC: BY-SA Lizenz". Diese Lizenz erlaubt euch, das Bild zu verwenden und mit ihm zu tun, was immer ihr wollt. Voraussetzung dafür ist, dass ihr den originalen Zeichner in euren Credits erwähnt und eure Grafik, die ihr mithilfe des Bildes erstellt habt, der gleichen Lizenz unterstellt. (Quelle: hubpages)


Wie kann ich vor gehen?


Zuerst schaust du dich auf der Seite um, von der das originale Bild stammt. Hier solltest du in den meisten Fällen mehr oder weniger schnell herausfinden können, ob das Bild  "copyright-frei" ist oder nicht.

Bilder dürfen nicht verwenden werden, wenn die Worte "all rights reserved" irgendwo vermerkt sind oder du keinen Text findest, der darauf hinweist, dass die Bilder verwendet werden dürfen. In diesen Fällen kann man natürlich den Besitzer der Homepage anschreiben und lieb fragen, ob das Bild verwendet werden darf.

Bilder dürfen verwendet werden, wenn sie auf einer öffentlichen Domain sind oder die "Creative Commons License" haben. Steht das Bild unter der "Creative Commons License" solltest du übrigens den ursprünglichen Besitzer des Bildes in deinen Credits verlinken.
Die Creative Commons Licence ist ein Überbegriff und enthält viele kleinere Lizenzen. Eine Auflistung dieser findet ihr zum Beispiel auf CreativeCommons.org oder Hubpages.


Wie finde ich schnell solche Bilder?


Eine Möglichkeit ist es, die Google Bilder Suche zu verwenden. Gebe auf Google Bilder zum Beispiel "Anime Girl" ein und löse die Suche aus. Rechts oben befindet sich nun ein kleines Zahnrad. Wenn du hier drauf gehst und auf "erweiterte Suche" klickst, wirst du auf eine neue Seite weitergleitet.

Erweiterte Suche auswählen



Hier kannst du nun zusätzlich zu deinem Suchbegriff auf alles weitere Eingrenzen. Uns interessiert jetzt aber nur die Lizenz. Wenn du ganz runter scrollst steht da: "Nutzungsrechte". Dort kannst du auswählen, was für eine Lizenz die Bilder haben sollen.

"frei zu nutzen, weiterzugeben oder zu verändern"
In unserem Fall wähle ich "frei zu nutzen, weiterzugeben oder zu verändern" aus und klicke dann auf den blauen Button mit der Aufschrift "Erweiterte Suche".
Achtung: Nicht alle Bilder die hier angezeigt werden sind auch wirklich lizenzfrei. Um 100%ig sicher zu gehen, solltest du trotzdem vor dem Verwenden auf das Bild klicken und dir die Lizenz nochmal anschauen.


Ich weiß nicht mehr woher ich mein Bild habe


Du verwendest bereits Bilder, würdest auch sehr gerne die Lizenz überprüfen oder den Urheber in den Credits aufführen aber weißt nicht mehr, woher das Bild stammt? Saucenao ist genau für diese Fälle! Hier kannst du dein Bild hochladen und die Website sucht im Internet nach der Herkunft dieses Bildes.

Fazit

Vor über 10 Jahren hat sich kein Mensch um den Urheberschutz im Internet gekümmert. Heute wird er allerdings immer wichtiger. Ich kenne übrigens keine einzige deutsche Anime Seite, die wegen Urheberrechtsverletzung abgemahnt wurde. Was jetzt nicht heißen soll, dass wir das Thema einfach vergessen können. Aber jetzt Panik zu schieben wäre vermutlich auch übertrieben.

Minitokyo oder Zerochan sind übrigens immer gute Anlaufstellen für Bilder, allerdings sollte auch hier auf die Lizenz der einzelnen Bilder und die Regeln der verschiedene Nutzer geachtet werden.

Vor 4 Jahren wurde außerdem von einem anonymen Leser der Vorschlag gemacht, eine "Empfehlungsliste" zu erstellen, in der Links aufgelistet werden von Sachen, die verwendet werden dürfen. Wenn ihr also solche Links habt, dann immer her damit :) Hinterlasse einen Kommentar und ich werde diesen Beitrag um den Link erweitern.


Edit 01.05.16: Nach einem Hinweis habe ich den Satz mit den öffentlichen Domains verändert. Vielen Dank für die Info. Leider kann ich auf deine EMail nicht antworten (Delivery to the following recipient failed), aber ich bin dir sehr dankbar für den Hinweis und deine Gedankengänge  ^-^

Dienstag, 26. April 2016

Scrollbalken im Content Bereich - Warum?

lulu
Es war einmal.. normalerweise fangen so Märchen an. In diesem Fall ist es allerdings alles andere als ein Märchen. Vor mehr als 10 Jahren, als die WWW Welt noch kein PHP kannte bzw. es noch nicht genutzt wurde, verwendeten Webmaster IFrames um ihre Textseiten/Unterseiten im Design einzubinden.

Ein Nebeneffekt von diesen IFrames war unter anderem, dass der Content Bereich zu einem eigenen "Fenster" wurde, in dem man scrollen kann. Viele Seiten hatten so zwei Scrollbalken - einer für die gesamte Website und einen für den Content Bereich.



Ziemlich nervig für die Besucher, denn zum Scrollen muss sich die Maus innerhalb des Content befinden. Auch nervig, weil egal wie groß der Monitor ist nur ein kleiner Teil des Inhaltes angezeigt wird. Zudem nimmt der Scrollbalken noch weiteren Platz Weg und gut aussehen tut es auch nicht.

Seien wir ehrlich, die meisten von uns waren froh, als diese Zeit vorbei war.
Doch ist sie wirklich vorbei?
Eine gute Freundin von mir bemerkte es letzte Woche: Ist dir auch aufgefallen, dass immer mehr Seiten wieder einen extra Scrollbalken im Content haben?
Und ja, mir ist es auf verschiedenen Seiten aufgefallen und da ich es nicht verstehe jetzt die Frage an dich: Findest du einen extra Scrollbalken im Inhaltsbereich gut?  Hast du vielleicht sogar einen auf deiner Website? Was findest du daran gut und was nicht?

Ich muss ehrlich gestehen, dass ich noch keine Vorteile von dieser extra Scrollleiste gefunden habe. Aber vielleicht kann mich jemand aufklären?

Noch nerviger finde ich es übrigens, wenn es dann innerhalb des Contents nochmal etwas zum Scrollen gibt (z.B. die Shoutbox). Dann muss der Besucher schauen, dass die Maus innerhalb der Shoutbox ist, ansonsten bewegt sich der Content sobald man scrollt und die Shoutbox ist weg vom Blickfeld.

Du merkst, ich bin gar kein Fan von diesen Scrolleisten. Aber ich lasse mich sehr gerne vom Gegenteil überzeugen. Ich bin sehr gespannt auf deine Meinung :) Eventuell ist es auch reine Geschmacksache?

Alternativen

Was ist die Alternative zu solch einem Scrollbalken? Nach ein paar Minuten nachdenken gibt es nicht nur eine Alternative, sondern gleich mehrere.

Wenn man zum Beispiel nicht möchte, dass der Content ewig lang ist, könnte man den Inhalt der Seite entweder auf mehrere Unterseiten oder in mehrere Tab Register aufteilen, so wie es schon sehr viele Staffelpages mit der Charakterbeschreibungen machen.

Charakterbeschreibung auf Living Legend

Eine weitere Alternative wäre, die Navigation mitscrollen zu lassen, so wie zum Beispiel auf http://www.thepinkpearl.de/lulu/



Eine noch simplere Möglichkeit wäre,  einen "Scroll to top" Button einzubauen, wie es zum Beispiel Yuki auf ihrer Staffelpage Mirrored gemacht hat (Tutorial dazu findet ihr zum Beispiel hier).





Du weißt nicht, wie einer der Alternativen funktioniert? Dann hinterlasse einen Kommentar, bei Interesse kann ich gerne ein Tutorial dazu veröffentlichten.


IMHO: in my honest opinion (meiner ehrlichen Meinung nach - dieser Post ist meine persönliche Meinung)

Montag, 25. April 2016

Inspirations-Kiste

lulu
Ich fand sie früher richtig, richtig klasse! Die Inspirations-Kiste der Grafik Seite  Rainbow Quest. Leider gibt es Rainbow Quest schon eine ganze Weile nicht mehr, aber ich persönlich liebe es, mich durch Ideen von anderen Pages inspirieren zu lassen. Kennst du es, wenn man etwas sieht und es dann in den Fingern (oder im Bauch xD) kitzelt und man sofort was an seiner Page machen möchte?

Was inspiriert dich oder hat dich schon einmal inspiriert? Oder bei was für Ideen/Bildern kribbelt es bei dir so sehr, dass du am Liebsten gleich was auf deiner Page machen willst? Schreib mir doch ein Kommentar, dann können wir eine kleine Auflistung machen und vielleicht haben wir ja zusammen so viele Ideen, dass unsere persönliche, kleine Inspirations-Kiste dabei entsteht!? Das würde mich rießig freuen!




Designs



Frühlings Design von Jolly Manga

Design von Shizoo

Design von Mirrored (wobei mich hier alles inspiriert xDD)

Design von Alunaria


Design von Cherry in the air


Stil von Fall of en Empire (gibt es leider nicht mehr :( )





Tutorials

Tutorials von Codedrop

Blogger Tutorials von CopyPasteLove



Sonstiges


Ich weiß gar nicht mehr von dem dieser Vorschlag kam, aber vielen Dank ^////^
PinkPearl Info Ihr steht nach Rückschlägen
immer wieder auf und macht so viel für die Szene

Shojo Senshu hat immer wieder tolle Aktionen & Events


Samstag, 23. April 2016

Ressourcen für dich: #Frühling

lulu
Es war so ein schönes Wetter letzte Woche (wir hatten einmal sogar 22 Grad!!!) da kamen richtige Frühlingsgefühle in mir auf ^///^ Aus diesem Grund habe ich mich auf die Suche nach frühlinghaften Ressourcen gemacht und bin auch fündig geworden. Meine Ausbeute findet ihr in diesem Post.
Bitte denkt daran, die jeweiligen Ersteller zu verlinken wenn ihr etwas verwendet <3


Texturen

Texturen von Summer-to-the-spring


Texturen von huruekrn-ackles


Texturen von huruekrn-ackles

Texturen von missesglass

Texturen von missesglass

Texturen von yunyunsarang

Icon Texuren

Icon Texturen von CLaudiaGraphic

Icon Texturen von Missesglass


Icon Texturen von Missesglass - Weitere Texturen von Missesglass

Icon Texturen von obscene-bunny

Icon Texturen von ransie3


Brushes


Brushes von Aka-Joe

Brushes von coby17

Brushes von gvalkyrie

Brushes von coby17

Brushes von differentxdreamz

Icon Bases


Von PinkPearl
                                                                                 

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates