Pattern & Paletten

Als Webmaster oder Hobby Grafiker stolpert man früher oder später über die Begriffe "Pattern", "Platten" und "Shapes". Alles englische Begriffe, die du bestimmt schon einmal gehört hast. Aber was hat es mit diesen Begriffen auf sich? Genau darüber schreibe ich in dem heutigem Beitrag.

Patter -  Was ist das?

Den Begriff Pattern gibt es in der Musik, in der Programmierung und auch in Photoshop. Darum die Frage: Was sind "Pattern" eigentlich? 

Im Grafikbereich ist eine Patter (auf deutsch "Muster") ein Bild, das wiederholt oder gekachelt wird, wenn Sie damit eine Ebene oder eine Auswahl füllen.

Ein kleines Bild, was ständig wiederholt angezeigt wird. Das ist natürlich gerade für Hintergründe sehr praktisch, da es egal ist wie groß der Monitor ist und ob die Webseite mobil oder auf dem Rechner aufgerufen wird. Die Patter wiederholt sich bei größeren Monitoren einfach automatisch öfters. Praktisch, oder?

Downloadest du zum Beispiel diese Patter sieht sie so aus:

Patter von Skyblue2u 

Fügst du jetzt in deiner CSS folgendes ein:

body { background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/99/99015.png) repeat; }

Wiederholt sich dieses kleine Bild unendlich oft. Das sieht dann schließlich so aus. Cool, oder?
Pattern findet ihr übrigens auch auf vielen Mitglieder Seiten wie zum Beispiel PinkPearl, Depressionist, Alicante Design, The Seduction und Kuroi Inku.

Für Pattern braucht man übrigens nicht immer ein Bild. Mit CSS3 kann auch nur mithilfe von CSS Code (zum Beispiel gradial-gradient) eine Patter erstellt werden. Wie das aussehen kann und wie das funktioniert, kannst du in der Patterns Gallery nachschauen.

Paletten?

Einige Grafikseiten wie zum Beispiel PinkPearl haben unter "Ressourcen" den Punkt "Platten". Aber was ist damit gemeint?

"Paletten" helfen dir dabei, ein Design oder eine andere Grafik zu erstellen. Die Farben auf einer Palette sind abgestimmt und passend. Kopier dir die Palette in dein Grafikprogramm und verwendet für das Stylen deiner Grafik nur diese Farben (bei Designs z.B. in der style.css). Quelle: PinkPearl

Mit Paletten sind eigentlich "Farb Paletten" gemeint. Eine Palette besteht somit aus zwei oder mehr Farben. Diese Farben wurden vom Ersteller gewählt und passen seiner Meinung nach gut zusammen. Wenn du der gleichen Meinung bist, kannst du diese Farben nun für dein Design/deine Grafiken verwenden.

Eine Palette von PinkPearl

Mithilfe von Gimp oder Photoshop (oder auch Paint / Paint.Net) kannst du nun den Farbcode dieser Farben mit Hilfe des Farbauswahl Tools herausfinden:

Farbcode auswählen (Paint.Net)

In Photoshop, Gimp und Co. funktioniert das übrigens genau gleich (das Farbauswahl Tool sieht auch genauso aus).

Weiterlesen...

Tutorial: Cyberstamps erstellen

Viele Menschen sammeln im "richtigen Leben" Briefmarken.
Warum denn dann nicht auch online? Jede Briefmarke gibt es dabei nur in begrenzter Anzahl (einige sind auch einmalig).
Diese virtuellen Briefmarken (Cyberstamps) werden von unterschiedlichen Seiten angeboten und können von den Besuchern gesammelt und auf der eigenen Homepage ausgestellt
werden. Wie wärs zu Weihnachten mit einem "Weihnachts Set"?

Mit diesem Tutorial erkläre ich kurz, wie man Cyberstamps erstellt. Da nicht jeder Photoshop hat, erkläre ich es so, dass man sie auch z.B. mit Gimp erstellen kann.

Ein Cyberstamp Set kann aus einer verschiedenen Anzahl von Briefmarken bestehen.
Auf PinkPearl bestehen die meisten Sets aus 8 Karten und einer sogenannten "Full" Karte.

Diese "Full Card" kann nicht bestellt werden. Der Sammler bekommt diese nur, wenn er alle anderen Karten des Sets bestellt/gesammelt hat.

Die Größe deiner Briefmarken kannst du selbst bestimmen.
Das Tutorial habe ich bereits vor einiger Zeit auf meiner Grafikseite PinkPearl veröffentlicht.

Cyberstamp Templates

Einige Seiten bieten auch Cyberstamp Templates an (z.B. Jolly Manga).
Damit ihr aber nicht so lange suchen müsst, habe ich hier auch zwei Vorlagen für euch:

 

Los gehts

Zuerst einmal brauchen wir einige Bilder, aus denen die Cyberstamps erstellt werden. Diese Bilder öffnen wir in unserem Grafikprogramm (ich verwende Photoshop, es ist aber auch mit jedem anderen Programm möglich). Auch ein Cyberstamp Template öffnen wir in unserem Grafikprogramm. Ich habe das erste Template, dass ich oben zur Verfügung stelle, genommen und ein Inori (Guilty Crown) Bild.

Nun müssen wir das Template mit dem Bild befüllen. Auch das geht auf verschiedene Arten. In Photoshop mache ich es meistens so:
Ich verkleinere das Inori Bild auf die pixel Größe 256x160 (in Photoshop geht das, indem ihr im Menü "Bild" auswählt und dort auf "Bildgröße" klicke). Dann wähle ich das Zauberstab Werkzeug () aus und klicke damit auf die schwarze Fläche des Templates. Nun ziehe ich diese (auch mithilfe des Zauberstabs) auf das Inori Bild.

Nun kopieren wir das ausgewählte mit strg + c, klicken wieder auf das Template und fügen mit strg + v das Bild ein. Alternativ kann man natürlich auch eine neue Grafik (strg + n) erstellen und mit strg + v dort das Bild einfügen. Anschließend ergänzen wir den Cyberstamp noch mit Text. Auf einen Cyberstamp kommt der Name, der den Cybestamp erstellt hat, sowie das Datum, wann er vergeben wurde. Außerdem schreibe ich immer noch den Titel des Sets und die Nr des Cyberstamps drauf.

Fertiger Stamp

Nachdem ich den Text hinzufügt habe sieht mein Cyberstamp so aus:

Die .psd Vorlage könnt ihr übrigens auch gerne verwenden: PSD Vorlage downloaden.

Für die weiteren Stamps müsst ihr einfach immer nur das Inori Bild austauschen.
Viel Spass beim Cyberstamp erstellen <3

Und zum Schlus: 

HAPPY BIRTHDAY an meine Schwestern Lina T. und hanon_chan!!!! <3 <3 <3 

Weiterlesen...

Kostenloses Kontaktformular

Ein Kontaktformular kann mit PHP erstellt werden. Aber es gibt auch genug Anbieter im Netz, bei denen man kostenlose Formulare erstellen kann. Zwei diese Anbieter habe ich mir genauer angesehen.

FoxForm

Da ich auf PinkPearl Info selbst unter "Mitglied werden" dieses Kontaktformular verwende, fange ich einfach mal mit FoxForm an. Bei FoxForm kann man ein kostenloses Kontaktformular erstellen, ohne sich vorher anmelden zu müssen. Man wählt die entsprechenden Felder wie zum Beispiel Name und EMail aus, kann dann noch das Kontaktformular farbig anpassen und muss zum Schluss noch die EMail Adresse, an welche die EMails gesendet werden sollen, angeben. Nachdem man bestätigt hat, dass man kein Roboter ist, kommt man mit einem Klick auf "Create Formular" auch schon zum HTML Code, den man auf seiner Homepage an einen beliebigen Ort einfügen kann. Das tolle: das Formular hat sogar einen Spam Schutz!

Simpel und schnell

PRO:
+ Keine Anmeldung erforderlich
+ Schnell und einfach
+ Farben können angepasst werden
+ Spam Schutz
+ Vorschau des Formulars ist auf der Seite zu sehen

CONTRA: 
- Hintergrundfarbe muss angegeben werden (transparent geht nicht)
- Die erhaltene EMail sieht nicht so schön aus....

jotform

Bei jotform könnt ihr aus verschiedenen Templates euren Favorite wählen und diesen dann in einem WYSIWYG (What you see is what you get) Editor anpassen. Das tolle an solch einem Editor: Man braucht überhaupt keine Coding Kenntnisse und kann das Formular trotzdem nach den eigenen Vorstellungen gestalten. Nachdem ein Template ausgewählt wurde, können links Felder ausgewählt werden. Möchte man zum Beispiel ein "Homepage URL" Feld hinzufügen, klickt man links auf "Basic Fields" und zieht dann mithilfe von DragNDrop (Maustaste gedrückt halten, nach rechts fahren und loslassen) das Textfeld an die gewünschte Position. Mit einem doppel Klick auf den Text kann man die kompletten Text anpassen. Auf dem Zahnrad rechts oben können verschiedene Einstellungen zu den Feldern angegeben werden (zum Beispiel "Erforderlich" wenn der Besucher es auf jeden Fall ausfüllen muss). Auch bei diesem Editor kann ein Captcha (Spamschutz) verwendet werden. Nach dem Erstellen kommt man über "Veröffentlichen" an den Link zum Formular.
Ich muss gestehen, dass ich mich nicht registriert habe, aber es scheint auch komplett ohne zu gehen (auch wenn beim Speichern die Meldung kommt, dass man sich registrieren soll). Das ist mein Test Formular: https://form.jotformeu.com/62103496452352. Über weitere Erfahrungen zu diesem online Dienst würde ich mich sehr freuen.

Dank dem WYSIWYG Editor kann alles schnell bearbeitet werden

PRO:
+ Keine HTML Kenntnisse erforderlich
+ Es kann alles angepasst werden
+ Spam Schutz (Captcha)
+ Vorschau des Formulars ist auf der Seite zu sehen
+ Seite größtenteils auf Deutsch

CONTRA: 
- Ich bin mir nicht sicher, ob es komplett ohne Registrieren geht.
- Man muss sich ein wenig einarbeiten bis man den Dreh raus hat

Volle Kontrolle über das Formular

Nicht jeder möchte seine EMail Adresse auf einer fremden Webseite preisgeben. Die alternative: ein eigenes Formular. Auf PinkPearl biete ich den Code eines solchen Formulares kostenlos an. Nachteil: leider ist dieses Formular ohne captcha. Außerdem müssen Email Adresse, Server usw. eigenständig eingetragen werden...

Ein komplett eigenes Formular gibts auf PinkPearl

Weiterlesen...

Modalbox ohne Javascript

Das heutige Tutorial stammt von Annis6. Vielen Dank dafür!

Modalboxen gibt es in den unterschiedlichsten Variationen. Entweder sie werden als Hinweisboxen verwendet oder enthalten Daten von Charakteren oder zeigen ein bestimmtes Objekt genauer. Meist sorgt ein Javascriptcode für das auftauchen bzw. verschwinden der Box und das Aussehen bestimmt unser gutes CSS. Dank CSS3 jedoch haben wir die Möglichkeit eine Modalbox ohne die Verwendung von Javascript zu erstellen! Die Dateien und eine Vorschau zu diesem Tutorial findet ihr am Ende dieses Beitrages.

Das Hilfsmittel dazu ist der Selektor :target. Target kommt aus dem Englischen und bedeutet Ziel. Mit :target überprüft man einen Ankeridentifikator mtihilfe einer ID.

Als Beispiel:
Du hast eine Box mit der Klasse ‚box‘ und die ID ‚box_1‘. Der CSS Code sieht wie folgt aus:

.box {
    display: none;
    width: 250px;
    height: 150px;
 
    font-size: 0.85em;
    font-family: Verdana;
}

.box:target {
    display: block;
}

Hast du einen Link angeklickt, welcher folgendermaßen aussieht:

<a href=“#box_1“>Klick mich!</a>

So wird die Box durch die ID angesprochen und das display ist dann block! So wird auch die Modalbox durch dieses Prinzip erstellt!

Schritt 1: Die Box!

Zuerst machst du dir Gedanken darüber, wie die Box aussehen soll. Daher wäre es sinnvoll, sie sichtbar zu halten, solang du mit dem Design deiner Modalbox nicht zufrieden bist.
Ich habe mich für folgenden Stylesheet entschieden:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    opacity:1; /* Erst auf 1 um die Modalbox zu sehen und stylen zu müssen, später auf 0 setzen */
    pointer-events: none;
}

.modal_header {
    margin: auto;
    padding: 2px;
    text-transform: uppercase;
    background-color: #adadad;
}

.modal_container {
    position: relative;
    width: 60%;
    margin: 10% auto;
    padding: 1%;
    background-color: #fff;
}

Mein dazugehöriger HTML Code sieht so aus:

<div id="open" class="modalDialog">
    <div class="modal_container">
         <a href="#close" title="Close" class="close">X</a>
        <div class="modal_header">
            Überschrift
        </div>
        Hier kommt der Text in der Modalbox hinein. Lass dir was einfallen ;)
    </div>
</div>

2. Schritt der "Auftaucheffekt"!

Mit dem Befehl "display" kann man dies auch bewerkstelligen, aber mit einem übergleitenden Effekt benötigt man zum Beispiel opacity . Folgendes musst du in deinen Code einfügen:

Bei modalDialog das opacity auf 0, sodass die Box unsichtbar ist. Hinzu fügst du zu dem Code folgende Zeilen hinzu:

-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;

Dieser Code für den Übergangseffekt bezieht sich aber nur auf die Änderung in opacity. Möchtest du noch etwas hinzufügen oder ändern, ersetzt das opacity durch etwas anderes oder nutzt das all, sodass er auf alle Änderungen, die darin passieren, Rücksicht nimmt.

3. Schritt: Der Ausgang

Nun hast du in deiner Modalbox den Übergang, aber noch nicht das Ziel, wie es nach dem Klick aussehen sollte! Dafür erstellst du einen Code, welcher folgendermaßen lautet:

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

Zu guter Letzt noch einen Link um die Modalbox zu aktivieren:

<a href="#open">Open Modal</a>

4. Schritt: Close Button

Man möchte ja auch wieder die Modalbox schließen können dazu fügst du im CSS folgendes ein:

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover {
    background: #00d9ff;
}

So und nun nochmal der ganze Code als Abschluss! Der HTML-Code für die Modalbox:

<a href="#open">Open Modal</a>
<div id="open" class="modalDialog">
    <div class="modal_container">
        <a href="#close" title="Close" class="close">X</a>
        <div class="modal_header">
            Überschrift
        </div>
        Hier kommt der Text in der Modalbox hinein. Lass dir etwas einfallen ;)
    </div>
</div>

Der Style für deine .css:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    opacity:0; /* Erst auf 1 um die Modalbox zu sehen und stylen zu müssen, später auf 0 setzen */
    pointer-events: none; -webkit-transition:opacity 500ms ease-out;
    -moz-transition:opacity 500ms ease-out;
    -o-transition:opacity 500ms ease-out;
    transition:opacity 500ms ease-out;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modal_header {
    margin: auto;
    padding: 2px;
    text-transform: uppercase;
    background-color: #adadad;
}
.modal_container {
    position: relative;
    width: 60%;
    margin: 10% auto;
    padding: 1%;
    background-color: #fff;
}

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover {
     background: #00d9ff;
}

Fertig ist die Modalbox
Inspiration für dieses Skript ist dieser Code: http://jsfiddle.net/raving/1mhsynmw/

Fertiger Code downloaden

• Vorschau
• Dateien downloaden

Weiterlesen...

Cutenews

Vor langer  Zeit habe ich schon einmal über Alternativen für Cutenews geschrieben. Heute geht es allerdings nicht um Alternativen, sondern um Cutenews selbst.

Nochmal kurz zur Auffrischung: Cutenews ist ein kostenloses Tool, dass du installieren kannst, um deine News zu verwalten. Das Prinzip ist sehr einfach: du downloadest die benötigten Dateien, ladest diese auf deiner Homepage hoch und richtest CuteNews ein.

Hört sich einfach an. Ist aber oft mit Problemen verbunden. Meine liebe Yuki hat auf PinkPearl aus diesem Grund ein paar Tutorials geschrieben.

• Cutenews installieren
• Cutenews Design
• Cutenews Einstellungen / Smileys

Im zweiten Teil des Tutorials (Cutenews Design) erklärt Yuki, wie du News Skins verwenden kannst. Diese gibt es unter anderem auf 

• PinkPearl
• Alicante Design
• Noch mehr? Dann hinterlasse einen Kommentar, damit ich die Liste ergänzen kann :)

Im dritten Teil des Tutorials (Cutenews Einstellugnen/Smileys) erklärt Yuki, wie du Smileys einbinden kannst. Diese findest du unter anderem auf

• PinkPearl
• Chibi Graphics
• Alice-Grafixx
• Alicante Design
• Kizuna Graphics
• The Peril
• Noch mehr? Dann hinterlasse einen Kommentar, damit ich die Liste ergänzen kann :)

Doch was ist mit Cutenews eigentlich alles möglich? Ich habe mich unter den Mitgliedern umgesehen und habe heute für euch ein paar Cutenews Designs. Lass dich inspirieren <3

Cutenews Design von Yuki/Mirrored

Cutenews Design von Reika/Alunaria

Cutenews Design von Yuki/Prism Breaker

Cutenews Design von Lini/Lini-Graphics

Cutenews Design von Seth/Antiheroes

Cutenews Design von Yuki/Mengjian

Cutenews Design von Satsuki/Erdbeerkirsch

Cutenews Design von Reika/Auroria

Cutenews Design von Jasper/Amortentia

Weiterlesen...

Entwicklertools

Es tut mir wirklich leid, dass momentan nicht so viele Beiträge online kommen wie gewohnt. Ich fliege am Samstag für 3 Wochen in die USA und das bedarf sehr viel Vorbereitung und Planung. Und so kurz vor knapp gibt es dann doch noch mehr zu tun, wie erwartet.

Aber kommen wir zum heutigen Thema.

Immer wieder erhalte ich einen Hilfeschrei, dass ein Objekt auf der Website nicht richtig positioniert ist. Nach wenigen Minuten habe ich das Problem dann gelöst und die Frage, die sich einigen stellt ist folgende: Wie macht die lulu das?

Die Antworte möchte ich heute geben: Ich verwende die Entwicklertools meines Browsers.

Firefox, Google Chrome und ja, sogar der Internet Explorer (bzw. Edge) haben sogenannte "Entwicklerstools". Die Tools vereinfachen es, Webseiten zu erstellen und Elemente richtig zu positionieren.

Da ich am Liebsten den Google Chrome verwende basiert dieses Beispiel auf dem Chrome. In Firefox und IE bzw. Edge ist das aber ganz ähnlich.

Wie kann ich die Entwicklerstools aufrufen?

Öffne deine Homepage in deinem Browser. Bei mir wäre das http://thepinkpearl.de.

Drücke dann F12 auf deiner Tastatur. Alternativ kannst du auch auf die 3 Striche oben recht: Weitere Tools und Entwicklertools klicken.

Was können diese Tools?

Unter "Elements" sehen wir den kompletten HTML Code der Website. Indem wir auf einen Pfeil klicken, öffnet sich das jeweilige Element und die Unterelemente werden sichtbar. Links sehen wir den Style dieses Elements und in welcher Datei (z.B. style.css) er steht.

Wechseln wir von "Elements" auf "Console" sehen wir Ausgaben von unserem Code. Auch Fehler werden hier angezeigt.

Und wie hilft mir das jetzt weiter?

Hast du nun ein Element auf deiner Website, bei dem du nicht weist, wie viele Pixel es nach rechts, links, oben oder unten muss, kannst du folgendes tun:

Ruf deine Website im Browser auf und mache einen Rechtsklick auf das Element, das du positionieren willst. Dort klickst du nun auf "Untersuchen".

Die Entwicklertools haben sich nun geöffnet und sich automatisch auf dem Element positioniert, auf dem du einen Rechtsklick ausgeführt hast. In meinem Fall ist es das Element:  <img src="/Teamicons/4.jpg" border="0" class="newsava">

Rechts sehe ich nun den Style von diesem Bild. Das tolle an den Entwicklertools: ich kann diesen Style jetzt auch bearbeiten.

Mit einem Klick auf z.B. die 100px von Width kann ich hier auch 150px eintagen.

Man kann auch einen kompletten neuen Befehl hinzufügen. Klicke hierzu einfach (in diesem Beispiel) hinter die letzte Zeile (margin-bottom: 10px;) und darunter wird automatisch eine neue Zeile eingefügt.

Anmerkung: Die Änderungen die du hier vornimmst sind nur lokal und nur der jetzigen "Sitzung". Sobald du deine Seite aktualisierst, sind die Änderungen wieder weg. Wenn du sie übernehmen willst, musst du diese manuell in deine .css Datei eintragen und diese hochladen. 

Vorteil davon ist, dass du nicht ständig in einer Datei was anpassen und diese hochladen musst um zu schauen, wie es aussieht. Hiermit kannst du einfach und schnell schauen, wie deine Befehle sich auswirken und sobald du mit deinem Ergebnis zufrieden bist, kannst du die Datei ändern und einmal hochladen. Das spart Zeit und Nerven.

Nicht nur Styles können verändert werden...

... auch der Design Code, den du auf dem Tab "Elements" angezeigt bekommst, kann editiert werden.

Um den Quelltext zu editieren, kannst du entweder ein Doppelklick auf das jeweilige Element machen (Achtung: hier kann immer nur ein Teil der Zeile bearbeitet werden) oder ab Rechtsklick: "Edit as HTML" (hier kann die komplette Zeile bzw. ein komplettes Div oder auch der gesamte Code bearbeitet werden, je nachdem auf welchem Element du stehst).

Weiterlesen...

Der Einstieg/Rückstieg in die dt. AniMa Webszene

Dies tolle Idee zu diesem Beitrag hatte Foxy, die sich momentan überlegt ihre alten Seite Rainbow Quest wieder aufzubauen. Worauf muss man beim Erstellen einer Website achten?  Was hat sich geändert (auch vom Gesetz her). Was für Möglichkeiten habe ich, meine Website publik zu machen? Über all das möchte ich in diesem Beitrag schreiben. Wenn starkes Interesse besteht, wird es eventuell auch noch einen zweiten Teil geben.

Ich möchte eine Website erstellen - wo fange ich an?

Die Idee steht, Zeit und Lust sind vorhanden. Aber wie erstelle ich jetzt eigentlich meine eigene Webseite?  Genau darüber habe ich schon einmal ein-zwei-drei-vier Artikel geschrieben :D

• Die erste eigene Homepage: #1 Die Idee
• Die erste eigene Homepage: #2 Hoster
• Mein erstes eigenes Design #1
• Mein erstes eigenes Design #2 (PHP)

Design & Hoster stehen jetzt also. Worauf muss ich jetzt noch achten?

Rechtliches

Wichtig für deine Website: das Impressum. Seit Anfang 2016 gibt es ein neues Datenschutzgesetz, mit welchem fast jeder Seitenbetreiber (auch von privaten Seiten) abgemahnt werden kann, wenn keine Datenschutzerklärung auf der Seite zu finden ist. Auch darüber gab es dieses Jahr bereits einen Beitrag von mir. Das Impressum selbst ist aber natürlich für mehr als nur die Datenschutzerklärung da. Auch darüber gab es auf PinkPearl Info bereits einen Beitrag:

• einen Beitrag (neues Datenschutzgestzt 2016)
• Impressum unnötig oder unerlasslich

Im oberen Beitrag du auch den Link, um dir schnell ein sicheres Impressum zu erstellen.

Ebenfalls unerlässlich ist eine Credit Seite. Werden Bilder, Codestücke, Ideen oder sonstiges von anderen Leuten verwendet, musst du das auf deiner Seite notieren. Hier auf PinkPearl Info gab es vor zwei Jahren schon einmal mehrere Beiträge zu den Credits... Das ganze ist nämlich um einiges Komplizierter wie es sich zuerst anhört.

• Einen Beitrag dazu findet ihr ebenfalls hier,

Wie werde ich gefunden?

Man hat zwar eine eigene Homepage, aber keine Besucher. Nicht gerade motivierend, oder? Damit möglichst viele Leute von der neuen/alten Website "hören", bietet sich Twitter an. Beiträge dazu gibt es ebenfalls auf PinkPearl Info:

• Hashtag #ppiupdate
• 10 Jahre Twitter

Eine andere Möglichkeit ist, sich in Netzwerken wie 

• PinkPearl Info, 
• Eterna, 
• Dont Go, 
• Mirei prism power oder
• Paxikon 

anzumelden.

Auch Toplisten wie zum Beispiel

• Animexx
• Gallery Yuri
• Dark Passion GFX
• Depressionist

können dabei helfen, die Besucher auf die eigene Seite zu locken. Außerdem solltet ihr euch Partner / Affis suchen. Einen kleinen Beitrag dazu findet ihr

• hier (Gedanken)

Habt ihr noch Tipps oder Fragen? Dann hinterlasst einen Kommentar oder schreibt mir eine EMail.


"Rechtliches" wurde am 06.05.2016 13:45 Uhr um den allgemeinen Impressums Link erweitert.

Weiterlesen...

Stylesheets - Was ist das und wie verwende ich es?

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 :)

Weiterlesen...

Design in Responsive Design verwandeln

Nachdem Delite diese Woche schon einmal einen sehr interessanten Gastpost geschrieben hat, folgt nun auch schon der Nächste von ihr! Wieder über ein sehr interessantes Thema, welches uns alle betrifft: Responsive Design. An dieser Stelle möchte ich dir Delite nochmal für die wirklich tollen Beiträge danken *_* Viel Spass beim Lesen!


In diesem Tutorial zeige ich euch wie ihr aus einem normalen Design ein schickes Responsive-Design hinkriegt. Das Layout was ich dazu verwende habe ich vollkommen zufällig gewählt. Als Beispiel nehme ich ein schönes Design von Pink Pearl: Fairy Tail Lucy Style.

Gemacht mit&nbspplaceit

1. Variable Breite setzen

<meta name="viewport" content="width=device-width, initial-scale=1">

Damit eure Seite überhaupt flexibel ist, müsst ihr diesen Code in den head-Bereich eurer Seite ablegen.

2. Mobile Ansicht in Chrome

Damit ihr euer Layout aus mobiler Ansicht sehen könnt, gibt es ein Tool, dass euch z.B. Chrome bereitstellt (andere Browser wie Firefox können das auch). Damit ihr nicht jedes Mal euer Handy benutzen müsst, geht in Chrome auf:

• View > Developer > Developer Tools (englisch) 
• Einstellungen > Weitere Tools > Entwickler Tools (deutsch)

Dort ist links ein Symbol, das wie ein Tablet und ein Handy aussieht (im Screenshot blau). Aktiviert diese Ansicht und ihr könnt verschiedene Geräte ausprobieren. Für meine Tests verwende ich z.B. das iPhone5.

3. Headerbild anpassen

Da ich von oben anfange ist unsere erste Baustelle der Header. Das Layout umschließt außerdem den Wrapper. Dieser hat bereits eine max-width, welche dafür sorgt, dass er nicht größer als das Headerbild wird. Damit er fluider ist, braucht er nur eine Breite von 100%.

#wrapper {
  width: 100%;
}

Gleiches müssen wir auch für den Header machen, welcher auch bereits eine max-width von 1000px hat.

Allerdings haben wir jetzt das Problem, dass die Höhe nicht mehr im Verhältnis zum Headerbild steht. Um das zu erreichen gibt es einen kleinen Trick. Zuerst müssen wir das Verhältnis zwischen Höhe und Breite berechnen: (366/1000) ~ 36%. Dafür erstellen wir jetzt ein Pseudo-Element (:before), das dafür sorgt, dass die Höhe immer zur Breite passt.

Desweiteren müssen wir das Bild natürlich auch noch resizen. Das können wir mit der CSS3 Property background-size tun. Neben prozentualen oder Pixelwerten können wir hier einfach cover eingeben, welche unser Bild automatisch an die Größe anpasst. Cool.

#header {
  background-image: url(images/header.png);
  background-position: right;
  background-size: cover;
  max-width: 1000px;
  width: 100%;
  position: relative;
}

#header:before {
  content: "";
  display: block;
  padding-top: 36%;
}

Das sieht dann schon mal so aus:

4. Content und Newsbox anpassen

Der Content brauch auch eine max-width und eine Breite von 100%. Außerdem brauch er ein anderes Box-Layout, da er ein padding definiert hat. Das normale Box-Model, das wir benutzen, würde eine Breite von 100% nehmen und obendrauf noch 20px von padding schlagen. Was wir aber wollen ist, dass in den 100% bereits dieses padding eingeschlossen ist. Das erreichen wir durch box-sizing: border-box:

#content {
  max-width: 760px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;

  height: 100%;
  background-color: #ffffff;
  float: left;
  padding: 20px;
  font-family: Helvetica, Verdana;
  font-size: 13px;
  letter-spacing: 150%;
  line-height: 150%;
  color: #0c0c0c;
}

Darüber hinaus haben wir noch ein blockquote-Element, welches eine fixe Breite hat. Dies müssen wir ändern und da es auch ein Padding hat müssen wir box-sizing: border-box verwenden:

blockquote {
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;

  padding: 20px;
  background-color: #c1d7ed;
  border: 1px solid #c0c0c0;
  margin: 0 auto;
  margin-bottom: 15px;
}

Das ist aber noch nicht alles. Desweiteren haben wir noch einen Banner in unserem Content, den Banner. Wir möchten, dass der Banner kleiner gemacht wird, wenn er zu groß ist. Dafür definiere ich eine neue CSS-Klasse:

.img-fluid {
  max-width: 100%;
  height: auto;
}

und weise sie im HTML-Code zu:

<img src="images/banner.png" class="img-fluid" />

Als nächstes ist die Newsbox dran:

#newsskin {
  max-width: 640px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;

  background-color: #c1d7ed;
  border: 1px solid #c0c0c0;
  margin: 0 auto;
  margin-bottom: 15px;
}

Jetzt haben wir allerdings noch das Problem, dass das Updateicon und die Updatebox nebeneinander sind. Für die mobile Ansicht wollen wir sie untereinander haben. Diese spezielle Ausnahme erstellen wir mit einem media-Query:

@media (max-width: 620px) {
  #newsicon {
    float: none;
  }
  #newsupdate {
    float: none;
    width: auto;
    display: block;
    height: auto;
  }
  #newsupdate:before {
    content: '';
    display: block;
    clear: both;
  }
  #newscontent{
    margin-top: 10px;
  }
}

Wenn das Gerät kleiner als 620px ist, floaten wir den Avatar und die Updatebox nicht. Stattdessen fügen wir noch ein wenig Abstand hinzu.

Das Ganze sieht dann so aus:

5. Footer anpassen

Im Footer haben wir zwei Spalten, eine für die Partner und eine für die Shoutbox. Auf der mobilen Ansicht wäre es super, wenn die zwei Spalten untereinander erscheinen. Dazu setze ich die Spalten erstmal auf 50% statt einem festen Pixelwert:

#footerlinks, #footershouti {
  width: 50%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Für Mobile erstelle ich dann wieder einen Media-Query und setze die Breite auf 100%:

@media (max-width: 620px) {
  #footershouti, #footerlinks {
    width: 100%;
  }
}

Das Ergebnis sieht dann so aus:

6. Navigation anpassen

Als erstes wollen wir die Navigation benutzbar machen. Dazu machen wir sie auf die volle Breite auf der mobilen Ansicht, die Abstände größer und setzen sie von der Reihenfolge nach oben (im HTML einfach die Navigation ausschneiden und vor dem content plazieren):

@media (max-width: 800px) {
  #navigation {
    width: 100%;
  }
  #navigation #newsbox li a {
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

->

6. Navigation togglen lassen

Viele Websites verstecken das Menü auf der mobilen Ansicht, da es sehr viel Platz wegnimmt. Das können wir auch machen, indem wir einfach einfach eine Checkbox als toggle benutzen.

Dazu setzen wir eine Checkbox zwischen Header und Navigation:

<div id="header"></div>

<input type="checkbox" id="mobile_nav_toggle" />

<div id="navigation">
  ...
</div>

Durch den Pseudo-Selektor :checked können wir jetzt die Navigation an und Ausschalten. Auf der Desktop-Größe verstecken wir einfach den toggle:

#mobile_nav_toggle {
  display: none;
}
@media (max-width: 800px) {
  #navigation {
    width: 100%;
    display: none;
  }
  #navigation #newsbox li a {
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #mobile_nav_toggle {
    display: block;
  }
  #mobile_nav_toggle:checked + #navigation {
    display: block;
  }
}

Das sieht natürlich noch nicht schön aus, ist aber funktional ;)

7. Toggle stylen

Dazu müssen wir ein label-Tag erstellen, welches auf den Toggle verweist. Dieses Label setzen wir unterhalb der Checkbox im HTML:

<div id="header"></div>

<input type="checkbox" id="mobile_nav_toggle" />

<label for="mobile_nav_toggle" id="mobile_nav_toggle_label">
  Menü
</label>

<div id="navigation">
  ...
</div>

Im CSS machen wir jetzt unsere eigentliche Checkbox unsichtbar. Außerdem stylen wir unser Label und fügen einen Pfeil hinzu, der nach oben zeigt, falls das Menü schon geöffnet ist.

#mobile_nav_toggle {
  display: none;
  width: 1px;
  height: 1px;
  opacity: 0;
}
#mobile_nav_toggle_label {
  display: none;
}
@media (max-width: 800px) {
  #navigation {
    width: 100%;
    display: none;
  }
  #navigation #newsbox li a {
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #mobile_nav_toggle {
    display: block;
  }
  #mobile_nav_toggle_label {
    display: block;
    text-align: center;
    background: #255da4;
    font-family: Helvetica, Verdana;
    text-transform: uppercase;
    color: #fff;
    padding: 10px;
  }
  #mobile_nav_toggle_label:after {
    content: '↓';
  }
  #mobile_nav_toggle:checked ~ #navigation {
    display: block;
  }
  #mobile_nav_toggle:checked ~ #mobile_nav_toggle_label:after {
    content: '↑';
  }
}

Schlusswort

Das Ergebnis:

Alle Änderungen im Vergleich könnt ihr hier sehen.

Das Endergebnis könnt ihr hier als ZIP herunterladen oder hier einfach mal ansehen.

Weiterlesen...