29.1.13
Auf Blogger nerven mich seit jeher ein paar Dinge und eins davon ist, dass Onkel Google uns bis jetzt kein richtiges Kontaktformular spendiert hat.
Das geht zwar irgendwie und irgendwo über Google Docs Formulare - wobei die Vorlagen dort meistens sehr seltsam ausschauen und nie zum Rest des Layouts passen.
Oder ihr holt euch ein Formular über's Internet ... inclusive nerviger Werbung und SPAM :(. Oder ihr gebt schlanke 50-70€ im Jahr für eigenen Serverspace mit PHP aus ...
... oder ihr seit schlau und schreibt euch so ein Teil selber und hostet das auf freien und kostenlosen Google Ressourcen - der Spass nennt sich Google App Engine [GAE] und ihr könnt dort dynamische Scripte bis zu 5.000k Seitenaufrufe im Monat ausführen.
Wer mal ein Blick auf mein erstes Testformular werfen will ... schaut mickrig ist, funktioniert aber schon, d.h. ihr könnt mir darüber Mitteilungen senden
27.1.13
Wie lautet in Google Drive eigentlich der webViewLink zu einem Ordner? Ist zwar im Prinzip trivial ... trotzdem manchmal nervige Rechnerei.
Um von einem Freigabe Link in Google Drive bequem auf den webViewLink zu kommen, habe ich einen kleinen Generator gebaut:
23.1.13
Nach dem gestrigen Ausflug in die Welt des personalen bloggens [1] - now to something completely different :).
Wenden wir uns einem spannendem Thema zu - und zwar, wie kann man eigentlich einen Post-Link vereinfachen? Beispielsweise möchte ich meinen berühmten berüchtigten Google-Friend-Connect-Post statt über diesen Monsterlink:
http://www.5202.de/2012/11/offiziell-google-friend-connect-wird.html
über so einen simplen und einfachen Link erreichbar machen:
www.5202.de/gfc
Probiert's aus - der Link www.5202.de/gfc führt zur 'echten' Post Seite:
Post Link
Das Konzept dahinter ist euch klar?
Ein Link mit vielen Zahlen, Buchstaben und Strichen ist nicht wirklich Nutzerfreundlich. Vielleicht habt ihr einen Lieblingspost oder Lieblingsseite, auf die ihr schnell mal irgendwo verlinken wollt und dann wäre ein 'einfacher' Link, den ihr euch merken könnt, von Vorteil, oder?
Ein Blogger Standard-Post-Link [Permalink] ist folgendermassen aufgebaut:
http://www.euerBlog.blogspot.com/year/month/DerAnfangVonEurerÜberschrift.html
So einen Permalink bekommt jeder Post von euch per Default zugeteilt.
Statt so einen automatischen Permalink, könnt ihr auch einen eigenen Permalink erstellen - dazu stellt ihr euren Post im Editor auf Entwurf und geht rechts auf den Reiter Permalink > Benutzerdefinierter Permalink.
Dort könnt ihr nun einen Link nach dem folgenden Muster erstellen:
http://www.euerBlog.blogspot.com/year/month/WasImmerIhrWollt
Falls ihr das macht muss ich klar sein, dass danach der ursprüngliche Post-Link auf eine 404 Fehlerseite führt.
Bei meinem Beispiel von oben - dem Google-Friend-Connect-Post - bin ich aber bestimmt schon auf über hundert Blogs verlinkt worden ... wäre irgendwie doof, wenn diese ganzen Links ins Leere führen würden, oder? Umleitung
Um solche toten Links zu verhindern, gibt es eine Umleitungsfunktion auf Blogger - kennt so gut wie niemand, ist aber wirklich mächtig!
Mithilfe dieser Funktion könnt ihr beliebige interne Links auf beliebige andere internen Links umleiten und zwar unabhängig davon, ob diese Links bisher existiert haben oder nicht.
Mit anderen Worten - ihr könnt dort komplett neue Link bauen ... yeah!
Falls ihr zufällig mal den Hilfstext zu dieser Funktion lest - ignoriert das einfach ... ist von vorne bis hinten Quatsch. Ich gebe euch mal ein Beispiel zum besseren Verständnis:
Ihr wollt euren Post-Link:
http://www.euerBlog.blogspot.com/2013/01/blabla-blabla.html
in:
http://www.euerBlog.blogspot.com/2013/01/bla.html
umbenennen. Das geht unter Editor > Permalink > Benutzerdefinierter Permalink
Ihr wollt außerdem, dass der Post unter seinem ursprünglichen Link erreichbar bleibt - dazu baut ihr eine Umleitung.
Dazu geht ihr zunächst unter Dashboard > Einstellungen > Sucheinstellungen > Benutzerdefinierte Weiterleitungen auf den Schalter 'Bearbeiten'.
Ihr wählt einen 'Neue Weiterleitung' und tragt bezogen auf das Beispiel folgende Wert ein:
Von: ... /blabla-blabla.html
An: ... /bla.html
Damit leitet ihr von dem alten Link (der ja nicht mehr existiert) auf den neuen Link um - falls dieser alte Link irgendwo verlinkt wäre, würde er damit weiterhin funktionieren. Advanced Using
Okay das ist nett ... aber irgendwie haut einem das noch nicht so richtig vom Stuhl, oder? Ihr wollt einen _coolen_ Link ... so was wie das:
http://www.euerBlog.blogspot.com/blub
Das geht und zwar nach der selben Methode - Benutzerdefinierte Weiterleitungen > Bearbeiten > Neue Weiterleitung und tragt folgende Werte ein:
Von: ... /blub
An: ... /bla.html
Und das war's - mission accomplished! Ihr habt nun einen neuen, coolen Post-Link, den ihr überall hinterlassen könnt. Bevor jemand fragt ...
... ihr ändert damit nicht die URL von eurem Post, sondern nur den Link. Sind zwei verschiedene Sachen.
Ach ja, damit könnt ihr auch bedingt Mist bauen, nämlich eure Seiten unerreichbar machen. Deswegen kontrolliert nach jeder Umleitung, ob ihr eure Besucher damit in's digitale Nirwana schickt .. zur Not nehmt sie wieder raus. Fragen, Anmerkungen
Wenn es Fragen dazu gibt - für so was sind die Kommentare gedacht!
[1] Ich bin von euren Reaktionen auf meinem '5202' Post a bisserl überwältigt und ich werde dazu sicher noch mal was schreiben - wenn es passt. Jetzt erst mal vielen Dank!
19.1.13
Ich habe gestern ja einen localStorage Counter beschrieben. Das war alles a bisserl theoretisch - heute möchte ich anhand eines Beispiels zeigen, wie ihr damit ganz konkret eine Aktion ausführen könnt.
In dieser Skizze gibt es einen rote Punkt in der Mitte. Das ist ein 'reset' für den localStorage. Klickt ihr diesen Punkt, wird der localStorage zurückgesetzt.
Nachdem ein simpler roter-Punkt-ohne-jede-weitere-Beschreibung möglicherweise a bisserl wenig intuitiv ist :), blende ich beim _ersten_ Seitenaufruf einen Hinweispfeil mit Waschzettel ein.
Ihr seht diesen Pfeil nur 6s lang, dann wird er ausgeblendet. Ruft ihr die Skizze ein weiteres mal auf, seht ihr nur einen roten Punkt - keinen Pfeil, keinen Waschzettel!
Der Sinn davon ist, das eure Besucher es vielleicht mögen, das erste oder zweite mal auf etwas hingewiesen zu werden ... aber bestimmt nicht dauernd mit dem immer gleichen Sermon zugetextet werden wollen :D.
Die Skizze ...
... ist komplex, weil sie auf eine 'echte' Frage einer Leserin zurückgeht - ich habe nur ein paar Dinge abstrahiert.
Fangen wir mit der HTML an - der rote Punkt ist ein simpler div Container:
<div class="pointer"></div>
Zum 'Punkt' wird der Container mit CSS:
.pointer {
display: block;
position: absolute;
height: 40px;
width: 40px;
background: #97234e;
border-radius: 50%;
}
Pseudoelemente ::before und ::after
Der Pfeil und der Text liegen in einem Pseudoelement - hier die CSS für den Pfeil:
.pointer::before {
content: url('https://lh4.googleusercontent.com/-NAq9Jp3Nk0g/UPh1pXs-_DI/AAAAAAAADRs/NNRNPDtzGAg/s800/zudenposts.png');
position: absolute;
top: -140px;
left: -340px;
}
und für den Waschzettel:
.pointer::after {
content: 'click the red point to reset localStorage';
font-size: 20px;
position: absolute;
top:-180px;
left: -450px;
border: 4px solid #97234e;
padding: 8px
}
Das Script
Bis jetzt war das alles noch klassische CSS - für den Rest brauchen wir Javascript. Das erste Problem dabei ist, dass Pseudoelemente kein Teil des DOM's sind und damit auch nicht direkt manipuliert werden können - wir müssen das indirekt über den div Container machen.
Fangen wir mit mit 'Zähler' an - das ist der Teil, den ich gestern schon kommentiert habe:
<script type="text/javascript">
$(document).ready(function(){
str_count = localStorage.getItem("count");
if (str_count == null || str_count == "null"){
count = 0;
} else {
count = parseInt(str_count);
}
count ++ ;
localStorage.setItem("count", count);
//
});
</script>
Mit dem Zähler bekommen wir eine numerische Variable count, über die wir eine if ... else ... Abfrage schreiben können. Wenn der Wert der Variablen kleiner 2 ist [=der erste Seitenaufruf], wird foo ausgeführt, ansonsten bar
<script type="text/javascript">
$(document).ready(function(){
//
if(count < 2) {
//foo
}
else {
//bar
}
});
</script>
Für Werte kleiner 2 wollen wir nun Pfeil + Waschzettel nach 6s ausblenden [foo] ... ansonsten soll es immer ausgeblendet werden ... dazu schreiben wir eine kleine Funktion:
<script type="text/javascript">
$(document).ready(function(){
//
if(count < 2) {
setTimeout(function(){
$('.pointer').addClass("hidden");
}, 6000);
}
else {
$('.pointer').addClass("hidden");
}
});
</script>
Das heißt im Klartext, wir geben dem div> Container eine neue Klasse hidden. Mit CSS blenden wir diese Klasse kurz und schmerzlos aus:
.pointer.hidden::before, .pointer.hidden::after {
display: none
}
That's all! So einfach und simpel wie nur möglich gemacht ...
Letzter Aufgabe - mit Klick auf den Punkt leere wir den localStorage:
<script type="text/javascript">
$(document).ready(function(){
//
if(count < 2) {
setTimeout(function(){
$('.pointer').addClass("hidden");
}, 6000);
}
else {
$('.pointer').addClass("hidden");
}
$(".pointer").click(function(){
localStorage.removeItem("count");
alert('localStorage erfolgreich entleert!')
});
});
</script>
Das ganze Script zusammen mit dem Zähler:
<script type="text/javascript">
$(document).ready(function(){
str_count = localStorage.getItem("count");
if (str_count == null || str_count == "null"){
count = 0;
} else {
count = parseInt(str_count);
}
count ++ ;
localStorage.setItem("count", count);
if(count < 2) {
setTimeout(function(){
$('.pointer').addClass("hidden");
}, 6000);
} else {
$('.pointer').addClass("hidden");
}
$(".pointer").click(function(){
localStorage.removeItem("count");
alert('localStorage erfolgreich entleert!')
});
});
</script>
Yeah ... so simpel so far! Für wen ist das?
Es ist natürlich nicht gaaaanz so einfach - ich sag mal, das hat schon 'ne mittelschwere Schwierigkeit :D. Als absolut blutige Anfänger in HTML & CSS solltet ihr euch an so was vielleicht noch nicht ranwagen ... aber ich denke es lohnt sich mit localStorage zu beschäftigen, weil ihr damit verblüffende [und sehr nutzerfreundliche] Gadgets in Blogger schreiben könntet.
Ich werde mit Sicherheit noch mal weitere Beispiele damit bringen. Die Skizze hier hat mich beschäftigt, weil dahinter ein reales Problem stand ... wenn ihr Ideen habt, was man damit anfangen könnte, immer her damit.
18.1.13
Ihr habt auf Blogger bekanntlich keinen Zugriff auf eine Server-Datenbank - wäre aber für manche Probleme sehr nützlich, oder?
Ihr wollte zB. ein Hinweis einblenden, den ein Besucher nach dem dritten Aufruf von eurem Blog nicht mehr zu sehen bekommt ... klingt cool ... aber dazu müsst ihr Userdaten irgendwo speichern können.
Um Daten Clientseitig zu speichern, könntet ihr nun entweder einen Cookie setzen ... oder ihr geht über die HTML5 API und speichert das ganze als WebStorage-Objekt. Klingt ziemlich kompliziert ... ist es aber nicht :).
Schaut euch mein Beispiel an - auf der Skizze läuft ein Counter, der bei jedem Seitenaufruf um 'eins' nach oben zählt ... ihr könnt euren Browser schließen und neu öffnen, der Zählerstand bleibt gespeichert.
Webstorage
Ich spiele zwar gerne den Erklärbär, aber in dem Fall könnt ihr euch anderswo mal schlau machen, was Webstorage überhaupt ist.
Vereinfacht gesagt, könnt ihr damit Daten direkt im Browser eurer Besucher speichern und zwar mit Javascript. Ihr braucht dazu im Grunde nur folgende drei Befehle:
localStorage.setItem(key, value) //Setzt einen Wert mit Schlüssel
localStorage.getItem(key, value) //Holt einen Wert mit Schlüssel
localStorage.removeItem(key) //Löscht den entsprechenden Schlüssel
Daraus habe ich nun eine kleinen Counter gebaut - das ganze erst mal 'pur', ohne Kommentare.
function counts(){
str_count = localStorage.getItem("count");
if (str_count == null || str_count == "null"){
count = 0;
} else {
count = parseInt(str_count);
}
count++;
Counter = document.getElementById("counter");
Counter.innerHTML = "Du warst " + count + " mal auf dieser Seite";
localStorage.setItem("count", count);
}
Und mit Kommentar:
function counts(){
//
//Ihr definiert eine Variable str_count als String [Zeichenkette]
//
str_count = localStorage.getItem("count");
//
//Ihr überprüft, ob die Variable einen Wert hat
//
if (str_count == null || str_count == "null"){
count = 0;
//
// Wenn 'Nein', setzt ihr einen numerischen Wert '0'
//
} else {
count = parseInt(str_count);
//
//Wenn 'Ja', gebt ihr den String als numerische Variable zurück
//
}
//
//Ihr erhöht die Variable um 1
//
count++;
//
//Ihr zeigt den Counter an
//
Counter = document.getElementById("counter");
Counter.innerHTML = "Du warst " + count + " mal auf dieser Seite";
//
//Ihr speichert die Variable als Webstorage Objekt
//
localStorage.setItem("count", count);
}
Das ist natives Javascript - man könnte es auch in jQuery schreiben, aber ich habe gerade mal wieder Lust, mich in Javascript zu üben. Ähm ... und was kann ich damit anfangen?
Wie ihr seht, funktioniert das Script - in der Skizze zählt der Counter fleißig vor sich hin.
Als Ergebnis gibt das Script nun eine numerische Variable 'count' zurück, das ihr in einer weiteren einfachen Schleife einsetzen könntet:
if(count > 4) {
//do something cool;
}
else if(count == 4) {
//do something cooler;
}
else {
//do the coolest thing;
}
Damit könntet ihr das Verhalten eurer Seite auf Besucher mit weniger als Besuche, 4 Besuche und mehr als 4 Besuche anpassen ... einfach und smart mit ein paar Zeilen Javascript! Anwendungsfall?
Was meint ihr dazu? Ich habe im Hinterkopf einen ganz konkreten Problem, wo ich das mal ausprobieren wollen würde ... habt ihr auch Ideen dazu? Oder ist das nur eine Spielerei?
15.1.13
Weil immer wieder alle möglichen Besucher daran scheitern - wie könnt ihr eigentlich HTML-Tags in Kommentare posten ... also diese Dinger in <spitzen Klammern>?
HTML-Entities
HTML ist ein Auszeichnungssprache und auf einer Web-Site wird Text in <spitzen Klammern> vom Browser interpretiert - ob das nun Sinn macht oder nicht.
Wollt ihr das verhindern, müsst ihr die Klammern <>maskieren und zwar mit sogenannten HTML-Entities.
Eine HTML-Entitäten beginnt mit einem Ampersand & und enden mit einem Semikolon ;. Dazwischen steht ein Code, der mehr oder weniger einprägsam ist.
Das ist etwa der Code für eine öffnende Klammer: < ... das für eine schließende spitze Klammer: >
Wenn ihr einen HTML Text in einem Kommentar veröffentlichen wollt, müsst ihr also 'nur' sämtliche Klammern durch die entsprechenden HTML-Entität ersetzen - was natürlich nervig und zeitaufwendig ist.
Um das ganze benutzerfreundlich zu gestalten, gibt es entsprechende Tools - ich benütze etwa immer das von Elliot Swann. Die Anwendung ist sehr einfach - ihr kopiert euren HTML Text in das Tool, klickt auf 'make it friendly' und das Ergebnis könnt ihr dann in Kommentare posten. Try it yourself!
Probiert's aus - nehmt ein HTML Snippet, maskiert es und postet es hier in den Kommentaren. Kann ja nix schief gehen ... im schlimmsten Fall passiert gar nix.
13.1.13
Ihr möchtet in eurem minimalistischem Layout kein ausgewachsenes Menü, aber trotzdem eine kleine Navigation haben? Ihr habt zuwenig Platz unterm Header? Ihr wollt ein noch reduzierteres Layout bauen?
Für alle solche Fälle könntet ihr euch mal meine Dropdown Liste anschauen - sozusagen die kleine Schwester von einem 'richtigem' Dropdown Menü.
proof of concept
Ich habe die Dropdown Liste mit reiner CSS in zwei Versionen gebaut - einmal mit einer transition [Demo1] und einmal mit einer keyframes animation [Demo2]. Beide Versionen laufen in allen richtigen Browsern und im IE ab Version 8+.
Beide Konzepte würden in Blogger Blogs prinzipiell funktionieren, wenn eine entsprechende Anpassung in der CSS gemacht wird. In der jetzigen Fassung ist das lediglich ein allgemeines Konzept.
Fall von eurer Seite Interesse besteht, würde ich noch einen Nachtrag für Dropdown Listen in Blogger schreiben ... oder ihr versucht euch mal selber dran, ist nicht schwierig! HTML
Ich wollte etwas sehr, sehr simples bauen - für beide Versionen der Dropdown Liste könnt ihr die gleiche HTML benützen.
Fangen wir mit einer unsortierten Liste in einem <div> Container an:
<div class="droplist">
<ul>
<li><span>Text1</span></li>
<li><span>Text2</span></li>
<li><span>Text3</span></li>
<li><span>text4</span></li>
</ul>
</div>
Der Inhalt der Listenpunkte sind in dem Fall <span> Container - es gingen natürlich auch Ankerelemente mit Links.
Als 'Trigger' zum klicken dient ein Input-Element mit dazugehörigem Label:
<div class="droplist">
<input id="trigger" type="checkbox">
<label for="trigger">click me!</label>
<ul>
<li><span>Text1</span></li>
<li><span>Text2</span></li>
<li><span>Text3</span></li>
<li><span>text4</span></li>
</ul>
</div>
An HTML ist das alles - mehr braucht ihr nicht. checkbox Hack für mobile Browser
Damit ihr ein ein input Element auch auf mobilen Browsern benützen könnt, braucht ihr einen kleinen Hack.
Mit dieser CSS wird das input Element auf 100% Breite und Höhe des umschließenden Containers gebracht - mit dem z-Index von 13 legt ihr es über alle anderen Elemente - mit opacity=0 wird das Element unsichtbar, ist aber nach wie vor vorhanden:
.droplist input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 13;
opacity: 0;
cursor: pointer;
}
Durch diesen Hack klickt ihr ab jetzt nicht mehr das Label (das auf mobilen Browsern nicht klickbar ist), sondern das input Element - mission accomplished! Demo1 mit transition
Ich habe die Skizze mit zwei verschiedenen CSS Techniken geschrieben - warum, dazu später mehr. Fangen wir mit der simpleren Version an.
Zuerst einmal gestalten wir denn 'sichtbaren' oberen Bereich der Liste:
.droplist {
width: 200px;
height: 60px;
position: relative;
text-align: center;
}
Der Container bekommt eine Höhe, Breite und wird zentriert.
Dann gestalten wir das Label, also den 'click me!' Text:
.droplist label {
position: relative;
display: block;
line-height: 60px;
z-index: 10;
background: rgb(255, 255, 255);
}
Für die vertikale Zentrierung benützen wir einen alten Trick, indem wir den Wert vom line-height gleich der Höhe des Containers setzen.
Der z-index: 10 ist nötig, damit das Label über den Listenpunkte, aber unter dem input Element bleibt - ihr erinnert euch? Das hatte einen z-index von 13.
Die <span> Container in den Listenpunkte bekommen nun eine Höhe und Breite und a bisserl Style:
.droplist span {
display: block;
height: 60px;
width: 200px;
line-height: 60px;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.01);
}
Als letztes gestalten wir die Listenpunkte für die _eingeklappte_ Liste:
.droplist li {
position: absolute;
top: 0;
left: 0;
list-style: none;
-webkit-transition: all 300ms ease 0ms;
-moz-transition: all 300ms ease 0ms;
-o-transition: all 300ms ease 0ms;
-ms-transition: all 300ms ease 0ms;
transition: all 300ms ease 0ms;
}
Damit kommen alle Listenpunkte unter die oberste Schicht zu liegen - geht, ist aber langweilig.
Damit das a bisserl interessanter und wie eine 'gestapelte' Liste ausschaut, verschieben wir jeden einzelnen Listenpunkt um ein paar Pixel:
.droplist li:nth-of-type(1) { top: 3px }
.droplist li:nth-of-type(2) {
top: 6px;
left: 2px;
}
.droplist li:nth-of-type(3) {
top: 9px;
left: 4px;
}
.droplist li:nth-of-type(4) {
top: 12px;
left: 6px;
}
Ausklappen
Ausgeklappt wird das Menü, indem die Checkbox geklickt und auf die Pseudoklasse :checked gesetzt wird ... dadurch wird die Positionen der einzelnen Listenpunkte geändert:
input[type="checkbox"]:checked ~ ul li:nth-of-type(1) {
top: 75px
}
input[type="checkbox"]:checked ~ ul li:nth-of-type(2) {
top: 135px
}
input[type="checkbox"]:checked ~ ul li:nth-of-type(3) {
top: 195px
}
input[type="checkbox"]:checked ~ ul li:nth-of-type(4) {
top: 255px
}
Jedes Element verschiebt sich dabei um 60px nach unten. Simpel, oder muss ich dazu noch mehr erklären?
Auf die Verschiebung legt ihr noch eine Transition, damit das ganze 'smoother' ausschaut.
input[type="checkbox"]:checked ~ ul li {
-webkit-transition: all 300ms ease 0ms;
-moz-transition: all 300ms ease 0ms;
-o-transition: all 300ms ease 0ms;
-ms-transition: all 300ms ease 0ms;
transition: all 300ms ease 0ms;
Das war's eigentlich schon .. schaut auf dem ersten Blick kompliziert aus, ist aber letztlich sehr einfach. Demo2 mit keyframes animation
Die 2. Version von dieser Dropdown Liste habe ich mit einem Keyframes Animation gebaut ... ist am Anfang praktisch erst mal gleich zur CSS von der 1. Version:
.droplist {
width: 200px;
height: 60px;
position: relative;
text-align: center;
background: yellow;
}
.droplist input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
tab-size: 0;
z-index: 13;
opacity: 0;
cursor: pointer;
}
.droplist label {
position: relative;
display: block;
line-height: 60px;
z-index: 10;
background: #fff;
}
.droplist span {
display: block;
height: 60px;
width: 200px;
line-height: 60px;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.01);
}
.droplist li {
position: absolute;
top: 0;
left: 0;
list-style: none;
}
.droplist li:nth-of-type(1) { top: 3px }
.droplist li:nth-of-type(2) {
top: 6px;
left: 2px;
}
.droplist li:nth-of-type(3) {
top: 9px;
left: 4px;
}
.droplist li:nth-of-type(4) {
top: 12px;
left: 6px;
}
Für die Animation müsst ihr zuerst einmal eine Keyframes Funktion definieren - beachtet bitte, das ich alles folgende ohne Vendor Prefix schreibe, die vollständige CSS findet ihr im Download.
Hier die Keyframes Funktion für das erste Listenelement:
@keyframes "move1" {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(0, 75px) rotate(4deg);
}
}
Die Funktion verschiebt das Element um 75px nach unten und verdreht es um 4° nach rechts.
Ausgeführt wird der Spaß über die animate Eigenschaft:
input[type="checkbox"]:checked ~ ul li:nth-of-type(1) {
animation: move1 .4s ease 1;
animation-fill-mode: forwards;
}
Auf Deutsch übersetzt steht da:
Ihr führt die Keyframes Funktion move1 in einer Zeitspanne von 1s und mit einer Verzögerung von 0,4s aus. Am Ende stoppt die Animation im letzten Zustand und springt nicht zurück [=animation-fill-mode: forwards].
Alles klar? Als nächstes braucht ihr eine Funktion für den umgekehrten Vorgang, also wenn die Dropdown Liste wieder einklappen soll - als erstes die Keyframes Funktion:
@keyframes "remove1" {
0% {
transform: translate(0, 75px) rotate(4deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}
Also das gleiche in Grün, nur umgekehrt. Die Animation ist die gleiche wie eben ... aber Moment mal, wie sagen wir einem Browser, das er nicht geklickt ist? Geht simpel mit einer weiteren Pseudoklasse, nämlich :not
input[type="checkbox"]:not(:checked) ~ ul li:nth-of-type(1) {
animation: remove1 .4s ease 1;
animation-fill-mode: forwards;
}
Für das zweite Element von oben, schreibt ihr ein zweit Funktion, mit einer Verschiebung von 135px:
@keyframes "move2" {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(0, 135px) rotate(3deg);
}
}
Dazu braucht ihr wieder eine dazugehörige Animation:
input[type="checkbox"]:checked ~ ul li:nth-of-type(2) {
animation: move2 .4s ease 1;
animation-fill-mode: forwards;
}
Und eine 'Remove2' Keyframes Animation und so weiter. Wenn ihr das Prinzip dahinter erst mal begriffen habt, dann ist das reine Fleißarbeit. Die Frage bleibt: Warum diese [relativ] komplizierte Keyframes Animation? Keyframes Animation vs. Transition
Ein bewegtes Element muss vom Browser dargestellt werden ... dazu werden die einzelnen Bewegungsphasen berechnet und nacheinander dargestellt, indem das Bild innerhalb des Browserfensters immer wieder neue aufgebaut wird. Das kennt ihr im Prinzip aus jedem Spiel.
Ihr merkt es vielleicht nicht, aber das alles kostet euch Ressourcen. Eine 2d Transition wird etwa über den CPU berechnet und bei großen Bewegungen von vielen Elementen kann euch durchaus mal eurer Rechner in die Knie gehen.
Keyframes Animation werden dagegen über die GPU [Grafikkarte] berechnet. Die Dinger sind dafür konstruiert, Bewegung darzustellen und in der Regel sind Keyframes viel 'smoother' als eine Transition. Ich sehe keinen Unterschied ...
Okay, ihr habt die Skizze auf eurem Quadcore Rechenmonster angeschaut und ihr seht keinen Unterschied ... dazu ist die animierte Fläche zu klein. Aber nehmt einmal - falls vorhanden - euer iPad zur Hand und schaut euch meine Skizze noch mal an.
Die Skizze1 läuft auf iOS ein ganz klein bisschen ruckeliger und nicht ganz so schön wie die Keyframes Skizze .. von jQuery ganz zu schweigen, das wäre im Vergleich dazu zäh wie Sirup. Spielt das überhaupt noch eine Rolle?
Heutzutage hat jedes popelige Handy mehr Rechenpower als noch ein Großrechner von vor ein paar Jahren - muss man da echt auf Ressourcen schauen? Ich denke ja!
Auf mobilen Websiten spielt vor allem das look & feel eine Rolle. Je sauberer, schneller und klarer eine Site auf dem mobilen Gerät läuft, desto eher wird euer Besucher auf eurer Site bleiben - Ruckelorgien finden die meisten nicht so prickelnd. Anmerkungen Fragen
Wenn's Fragen, Anmerkungen oder ein Fehlerreport gibt, immer her damit. Kann sein, dass ich nicht so super schnell reagieren kann wie ich eigentlich will - dazu werden's hier einfach zu viele Kommentare - aber nach wie vor bekommt hier jede Fragesteller eine Antwort!
8.1.13
Ein Plan B hat oft beruhigende Wirkung - wenn ihr irgendwann Onkel Google nicht mehr lieb habt und es mal mit Tante Wordpress probieren wollt, könnt ihr das look & feel von WP zuerst mal auf eurem eigenen Rechner ausprobieren.
Im dem Screencast zeige ich euch, wie ihr dazu weder Hoster noch teuren Serverspace braucht, sondern WP mitsamt Apache Server und MySQL lokal auf eurer Maschine zum laufen bringt [und damit das klar ist: Die Installation läuft nur da und sonst nirgends, also nicht im Internet!]
Wordpress
Ich komme ja von WP und bin ehrlich gesagt froh, das nicht mehr benützen zu müssen. Nichtsdestotrotz scheint's gerade mal wieder eine Migrationswelle Richtung WP zu geben und ich habe mir gedacht, vielleicht ist es nützlich zu wissen, wie man WP lokal in einer Testumgebung auf der eigenen Maschine zum laufen bringt.
Wenn ihr etwas tiefer in WP einsteigt, ist eine Testumgebung eh fast Pflicht - hier könnt ihr testen, ausprobieren und umbauen wie ihr lustig seid und passt alles, verschiebt ihr den Blog einfach auf euren Server und fertig. Einfacher geht's gar nicht. Windows/Linux
In dem Screencast benütze ich als Server-Sandboxmamp für OSX. Das Äquivalent unter Windows/Linux wäre xampp. Schaut von der Oberfläche praktisch identisch aus und auch die einzelnen Installationsschritte sind gleich.
Achtung: Ich bin mir nicht ganz sicher und ich kann es leider gerade nicht überprüfen - xampp könnte andere Ports benützen als mamp. Nehmt im Zweifelsfall den Port, mit dem ihr die PHP Konsole aufruft, das ist der richtige.
Rein theoretisch läuft unter der Haube von OSX ein Apple eigener Apache Server, den ihr dafür auch hernehmen könntet ... lasst die Finger davon! Im Fall das Falles könnt ihr euer OS komplett zerstören. Mamp und xampp sind sicher. Alles läuft in einer Sandbox, wenn was schief geht, löscht ihr das Programm und das war's.
PHP
Selbst wenn ihr WP nicht benützen wollt, ist es äußerst nützlich, einen eigenen PHP Server auf dem Rechner zu haben. Ihr könntet damit nämlich auch auf euren Blogger Blog zugreifen ... unter anderem, direkt über euren eigen lokalen Server bloggen.
Habt ihr Interesse an so was? Zugegeben, ist 'ne ziemlich nerdige Nerd Geschichte, aber ich MAG solche schrägen Sachen ... motiviert mich zum schreiben hier. Kommentare
Reisende soll man nicht aufhalten - wenn ihr mal die dunkle Seite der Macht erkunden wollt und Migrationshilfe braucht, dann fragt einfach nach - vielleicht kann ich was hilfreiches dazu beitragen By the way ...
... eine WP-Kopie von 5202 läuft seit September auf meinem Rechner ...
7.1.13
Nur 'ne kurze Umfrage:
Ich spiele immer mal wieder mit dem Gedanken an eine eigene Domain - und könnte aktuell die Adresse 5202.de kaufen. Ich hab hart verhandelt und den Verkäufer von €470.- auf schlanke €100.- runtergebracht.
Was denkt ihr? Yes or No? Ist eine eigene Domain wichtig, macht das für euch die Sache hier seriöser? Oder ist das einfach nur so 'nen Schönheitsding?
Eigene Domain ist natürlich schick und so weiter ... aber hundert Dübel ist natürlich 'ne ganz schöne Hausnummer ... bin gerade unschlüssig ... was meint ihr dazu?
6.1.13
Es wird immer mal wieder gefragt - hier die simpelste Möglichkeit, wie ihr in einem Blogger Standard-Layout ein Menü oberhalb vom Header bekommt.
Wie wird's gemacht
Das ganze funktioniert so - ihr sucht in eurem HTML-Text dieses Tag:
<header>
Direkt _darüber_ setzt ihr dieses Snippet ein:
<div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'/>
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol1' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol1-overflow' showaddelement='no'/>
</div>
</div>
<div class='tabs-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
Mit dem Schalter 'Auf Blog anwenden' sichert ihr den Spaß. Das war alles, work done!
Unter Dashboard > Layout habt ihr nun _über_ dem Header ein neues Feld, wo ihr euer Seiten Gadget oder ein Link Gadget whatever einfügen könnt. Diese Gadgets werden sich exakt gleich wie ein Gadget _unter_ dem Header vehalten.
Der Vorteil dieser Methode ist, ihr müsst keine neues Menü bauen oder eure CSS umschreiben - ihr legt euer Seiten Gadget von unten nach oben und das war's. Test-Blog
Probiert das bitte zuerst in einem Test- Blog aus. Macht außerdem eine Sicherung eures Blogs, bevor ihr in eurem Hauptblog irgendetwas verändert.Ein kurzer Gedanke
Der ein oder andere Leser wird vielleicht andere Methode kennen, wie er [scheinbar] ein Menü oberhalb vom Header bekommt ... alle gängigen Tuts laufen darauf hinaus, das Header-Gadget zu erweitern und dann rein mit dem Gadget.
Klar, kann man machen, warum nicht? Ihr solltet euch aber darüber klar sein, dass ihr damit kein Menü _über_ dem Header bekommt, sondern ein Menü _im_ Header. Nur halt ganz oben.
Was sich wie Haarspalterei anhört hat bei Abständen nach oben, Fixierungen et all große Auswirkungen. Ein Menü das wirklich über allen anderen Elementen liegt, ist anders und leichter zu kontrollieren, als eins das irgendwie und irgendwo noch mit allem anderen verwurtschtelt ist.
Probiert's aus - wenn es Fragen oder Probleme gibt - dafür sind die Kommentare da.
1.1.13
Allen Lesern, Besuchern und Freunde dieses Blogs zum Start des neuen [bürgerlichen] Jahres alles Gute!
Hier gibt's weder gute Vorsätze noch Änderungen :), sondern es geht wie gewohnt weiter und zwar mit einer spannenden Idee zu einer Bilder Galerie im Tumblr Style - wie bekommt ihr a bisserl mehr Pepp in die Präsentation eurer Bilder?
Seid ehrlich - auf den meisten Blogs gibt's halt ein Bild und dann noch ein Bild und darunter kommt ein weiteres Bild ... ist irgendwie nicht wirklich interessant, oder? Es geht auch anders.
Beachtet bitte, die Bildquelle von der Skizze stammt vom Blog Kreuz und Quer und steht unter © Christian Gruner. Es ist eine große Ehre, diese tollen Bilder verwenden zu dürfen - noch mal ein herzliches Dankeschön für die Erlaubnis!
Tumblr Style
Die Skizze ist meine Referenz an Tumblr, die bekanntlich durch die Präsentation von Fotos groß geworden sind. Die Jungs benützen dabei durchgehend einen sowohl einfachen als auch genialen Kniff, nämlich die Anordnung in senkrechten Kolumnen.
Der gesamte Inhalt oder nur Fotos stehen dabei in einem vierer oder fünfer Raster und das wirkt erstens geordnet, als auch durch die unterschiedliche Höhe der einzelnen Elemente interessant.
Dieser 'Tumblr-Style' wird inzwischen in vielen Layouts nachgeahmt und zwar meistens mit dem Masonry Plugin, beziehungsweise Nachbauten davon.CSS Variante von Masonry
Das alles ist spannend und ich habe mir vor einiger Zeit schon mal überlegt einen Post darüber zu machen - und bin doch wieder davon abgekommen. Für die Präsentation von Fotos braucht ihr nämlich kein Javascript, das geht auch mit purer CSS.
Über Inhalte in Kolumnen habe ich bereits an anderer Stelle geschrieben, heute gibt's sozusagen eine Sonderform dieses Spaltenlayouts. Das Layout - HTML
Ich beschreibe die einzelnen Schritte zu einer solchen Galerie - ihr könnt das in einem Post, auf einer Unterseite oder in einem HTML/Javascript Gadget bauen.
Die Struktur der Galerie ist dabei äußerst simpel - eine unsortierte Liste mit img Tags innerhalb der einzelnen Listenpunkte:
<div id="container">
<ul id="content">
<li><img src="http://beispiel1.jpg" alt=""/></li>
<li><img src="http://3eispiel2.jpg" alt=""/></li>
<li><img src="http://beispiel3.jpg" alt=""/></li>
....
</ul>
</div>
Ihr könnt so viele Bilder einfügen wie ihr wollt - die Anordnung in Kolumnen macht ihr später mit CSS. Der Bildlink
Ihr müsst euch beim Einbau der Bilder entscheiden, wie breit eure Kolumnen werden sollen - in meinem Beispiel verwende ich 200px breite Kolumnen, dementsprechend braucht ihr auch 200px breite Bilder. Einleuchtend, oder?
Bevor ihr jetzt eure Bildverarbeitung anwerft und eure Bilder dort zurechtschneidet - das geht einfacher und zwar über den Picasa Bildlink.
Ihr setzt das s-Attribut von Picasa auf s200 und schon sind alle eure Bilder 200px Breit. Beispiel:
https://lh4.googleusercontent.com/-WOPS7HqNdk8/UGivXwoQGjI/AAAAAAAAC5E/J2Eyl2R-fNY/s200/1280px-Die_Bauernhochzeit-2.jpeg
Die CSS
Weiter geht's mit der CSS für drei Kolumen - bei drei Kolumne à 200px bekommt die gesamte Galerie eine Breite von 600px. Damit das funktioniert, muss logischerweise euer Postbereich größer als 600px sein ... sonst passt so eine Galerie da nicht rein, okay?
Ich habe außerdem eine Anpassung für Blogger geschrieben, mit der ihr die Bloggereigene CSS überschreibt - ohne diese Anpassung würde die Galerie 'zerhaut' aussehen.
/* You have to overwrite some Blogger CSS */
.post-body #content img, .Image #content img {
border: 0;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
background: transparent !important;
padding: 2px;
}
#content img {
width: 200px
}
/* Columne Style */
#content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 4px;
-moz-column-gap: 4px;
column-gap: 4px;
width: 600px;
font-size: 0 !important;
line-height: 0 !important;
}
#container {
width: 600px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0 auto;
}
Als Ergebnis habt ihr nun 3 CSS-Kolumnen mit einem Abstand von jeweils 4px zwischen jeder einzelnen Spalte. Ihr könnt natürlich auch vier oder fünf Spalten nehmen - müsst dann aber die Gesamtbreite anpassen ... auf 800px beziehungsweise 1000px. Experimentell
Ich habe diese Galerie auf Blogger Postseiten, Blogger statischen Seiten und auf Google Drive zum laufen gebracht. Die Galerie funktioniert in Chrome, FF, Safari, Opera und IE10. In alten Versionen vom Internet Explorer wird nur eine Liste von Bildern angezeigt.
Obwohl das funktioniert ist das natürlich etwas sehr experimentelles - ich empfehle jedem, der sich dafür interessiert, das erst mal in einem Test-Blog auszuprobieren. Kommentare
Falls das jemand mal ausprobiert und es zu Fehler oder Problemen kommt würde mich das natürlich sehr interessieren - über einen kurzen Kommentar würde ich mich freuen.
Auch wenn alles klappt, dürft ihr natürlich gerne Lobeshymnen dichten :D!
27.12.12
Ich glaube die häufigste Suchanfrage für 5202 ist, wie man in Blogger zwei Bilder nebeneinander bekommt. Ein Post dazu ist also immer eine sichere Bank :D.
Heute eine ultra-einfache-Lösung für dieses Problem mit Hilfe von ein paar Zeilen Javascript - als Bonus spiele ich den Erklärbär in einem neuen Screencast.
Das Script
In dem Screencast verwende ich dieses Script:
<style>
.two {
display: block ;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
float: left;
padding: 10px 20px;
}
.two img {
width: 100%
}
.two:before,
.two:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.two:after {
clear: both;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('.two, .two a').removeAttr("style");
$('.two img').removeAttr("width height");
$('.two').next('br').remove();
});
</script>
Es gäbe sogar eine noch einfachere Lösung - aber die funktioniert im IE7 nicht und ich möchte niemand frustrieren ... also machen wir es mit float: left.
Ich habe das ganze in allen gängigen Browsern auf OSX getestet und da funktioniert es in allen Bloggervorlagen ohne Problem - wie es auf Windows aussieht, kann ich nicht sagen, weil ... hmhm ... ich gerade kein Windows zur Verfügung habe.
Ich hoffe ich kann daran nächste Woche wieder was ändern, bis dahin: Meldet euch, wenn es ein Problem gibt oder was nicht klappt!
27.12.12
Ich bin ein Blindtext. Von Geburt an. Es hat sehr lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Aber bin ich deswegen ein schlechter Text? Ich weiss, dass ich niemals die Chance habe in einer grossen Zeitung zu erscheinen. Aber bin ich deswegen weniger wichtig? Ich bin blind! Aber ich bin gerne ein Text.
Und sollten Sie mich jetzt dennoch zu ende lesen, dann habe ich etwas geschafft, was den meisten normalen Texten nicht geling
26.12.12
Wenn ihr bloggt, erzählt ihr immer auch eine Geschichte.
Meine heutige Geschichte ist ganz simpel. Ich bin auf der Suche nach beispielhaften Blogs auf den Pixar-Studio-Blog gestossen. Darin erklärt story artist Emma Coats, was eine gute Geschichte auszeichnet. Geschichten
Alle Antworten von Emma Coats finde ich äußerst hilfreich - Antwort No.4 geht etwa über die innere Struktur einer Geschichte: Once upon a time there was ___. Every day, ___. One day ___. Because of that, ___. Because of that, ___. Until finally ___.
Gute Geschichten besitzen also ein bestimmtes inneres Gefüge. Zufällig und chaotisch ablaufende Ereignisse ergeben noch keine Geschichte - erst wenn ihr als Erzähler den Ablauf von Ereignissen eine Struktur gebt, macht ihr es zur Geschichte.
Eure Geschichte muss natürlich noch niemand interessieren, nur weil ihr sie als Geschichte erzählt. Dazu gehört mehr, etwa ein Publikum, dass eure Geschichte überhaupt hören will.
Aber: Egal was ihr macht - ob ihr einen Blog Post schreibt, euren Freunden über den letzten Abend erzählt oder in der Schule ein Referat haltet - versucht es zu erzählen. Gebt dem, was ihr zu sagen habt, eine Struktur.
Es gibt wunderbare Beispiele, wie man eine Geschichte erzählen kann - aber so hoch hinaus will ich eigentlich gar nicht. Bilder
Im Blog-Zug gibt es einen Chat und dort unterhalte ich mich ab und zu mit Kreuz und Quer, einem Foto Blogger.
Foto-Blogs sind irgendwie alle gleich - ein Foto und noch ein Foto und bestenfalls mal ein paar (für mich) kryptischen technischen Erklärungen dazu. Interessiert mich in der Regel nicht wirklich.
Sein Blog ist anders. Was daran anders ist, konnte ich ich erst richtig fassen, als ich auf den Pixar Blog gestossen bin. Der Unterschied ist frapant: Kreuz und Quer bloggt nicht nur (sehr gute) Fotos, sondern erzählt die Geschichte dazu!
Ich bin ja kein so optischer Typ - für mich sagt ein Bild an sich noch gar nichts aus. Fünf Cent für jedes Sonnenuntergang mit Steg, das ich schon auf Blogs gesehen habe und ich könnte mir einen neuen 27'' iMac kaufen :D.
Wenn mir jemand aber eine Geschichte dazu erzählt ... was alles im Zusammenhang mit diesem Bild passiert - dann interessiere ich mich für diese Bilder. That's the difference, Dude! No work is ever wasted.
Abschließen möchte ich mit dem Gedanken No.17 von Emma Coats: No work is ever wasted. If it’s not working, let go and move on - it’ll come back around to be useful later.
Wenn ihr bloggt, gebt immer euer Bestes - postet nicht einfach nur fünf Fotos und schreibt Das war mein Tag, sondern macht euch die Mühe, eine Geschichte daraus zu organisieren.
Vielleicht funktioniert eure Geschichte nicht auf Anhieb oder ihr habt sie schlecht erzählt ... whatever! In-etwas-Mühe-reinstecken ist nie vergebens.
24.12.12
Ich mach ja kein großes Gewese drum, aber ich blogge hier aus einem sehr katholischem Hintergrund - Weihnachten steht vor der Tür und worum es dabei geht, wird leider immer tiefer versteckt.
To make a long story short - Gott ist Mensch geworden!
Allen meinen Leser, Verfolgern, Freunden whatever - ob ihr jetzt an diese Geschichte glaubt oder nicht - wünsche ich bei allem Trubel, Hektik, Freude (und vielleicht auch a bisserl Traurigkeit) der nächsten Tage Gottes Segen.
23.12.12
Es kommt immer mal wieder die Frage auf, wie ihr auf Blogger einen 'echten' Downloadbereich einrichten könnt - seit neuestem geht das sehr elegant mit den WebViewLinks von Google Drive.
In dem Post beschreibe ich Schritt für Schritt, wie ihr so einen Downloadbereich bauen könnt - so schaut das ganze am Ende aus:
Google Drive
Falls ihr's noch nicht wisst - Onkel Google hat euch 5GB Webspace spendiert und damit könnt ihr allerhand lustige Sachen anstellen, unter anderem einen Downloadbereich für Blogger bauen.
Um so einen Bereich einzurichten, geht ihr auf Google Drive und legt als erstes einen neuen Ordner an und nennt ihn super kreativ 'Download'.
Neue Ordner stehen standardmässig auf 'privat' und da ihr euer Zeug ja mit anderen teilen wollt, stellt ihr diesen Ordner zunächst auf 'öffentlich'.
Dann bekommt ihr einen 'Link für Freigabe' - schaut in meinem Beispiel so aus:
https://docs.google.com/folder/d/0B9jiMv20C91YSmFaMmxSTjVVbEE/edit
Der Mittelteil davon ist die eindeutige ID von diesem Ordner, also dieser Code hier:
0B9jiMv20C91YSmFaMmxSTjVVbEE
Um den Webviewlink von diesem Ordner zu bekommen, hängt ihr diese ID an den Host https://googledrive.com/host/ dran - also so:
https://googledrive.com/host/0B9jiMv20C91YSmFaMmxSTjVVbEE/
Und Fertig!
Ihr habt jetzt einen eigenständigen Webspace, den ihr über das Blogger Seitengadget oder in einem Post verlinken könnt. Ähm .. und was bringt mir das?
So Leute - ihr habt jetzt einen Downloadbereich, aber da ist natürlich noch nichts drin ... ihr könnt diesen Bereich mit allem füllen, was ihr so zur Hand habt ... Texte, .pdfs, Fotos whatever. Ihr zippt euer Material und legt es in den Ordner und das war's.
Falls ihr einen Downloadlink auf einen bestimmten Ordner innerhalb dieses Bereichs braucht, hängt ihr den Ordnername an den WebViewLink dran - so schaut etwa der direkte Link auf meinen Ordner Foolisch_Stuff.zip aus:
https://googledrive.com/host/0B9jiMv20C91YSmFaMmxSTjVVbEE/Foolish_Stuff.zip
Probiert's aus - der Link führt zum direkten Download.
Die Logik ist wie auf echtem Webspace - ihr könnt auch innerhalb des Downloadbereichs weitere Unterordner einrichten und in diese Ordner dann eure Dateien legen.
20.12.12
Der CSS Wettbewerb ...
... von letzter Woche hat heute Mitternacht geendet und unter allen richtigen (fünf sic!) Einsendungen habe ich jetzt mit einem Online Generator die Siegerin gezogen und es ist zoozee von Berlinstadtbaby - Gratuliere!
Der Amazon Gutschein geht heute noch raus (wenn ich kapiere, wie ich den Amazon Code umschreiben kann ... kriege ich aber hin!) Die Frage ...
Die Frage war ja, wie kann man nur mit CSS/HTML einen Begriff 'doppelt' durchstreichen ... ihr habt das mit verschiedene Ansätze gelöst - hier meine eigene Lösung, die mir nach wie vor am einfachsten vorkommt:
Das ist der Satz - das letzte Wort soll doppelt durchgestrichen werden:
Schreiben einfach durchgestrichen!
Wir setzen den Begriff durchgestrichen in eine Span-Container und geben ihm eine Klasse:
Schreiben einfach <span class="double">durchgestrichen</span>!
Den Rest machen wir mit CSS. Zuerst geben wir der Klasse double eine relative Position (das ist nötig, weil wir die Linie anschließend absolut positionieren):
.double{
position: relative
}
Die doppelte Linie selber bauen wir als Pseudoelement - wir brauchen dabei nur ein Element und nicht zwei:
.double::before {
content: "";
display: block;
border-top: double 6px #333;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: -1;
}
Der doppelte Unterstrich platzieren wir absolut mit top: 50% genau in der Mitte - der Strich geht mit width: 100% über die volle Länge des Elements ... schaut alles zusammen so aus:
Schreiben einfach durchgestrichen!
Man könnte es mit zwei Pseudoelemente lösen und einen Strich oben und einen Strich unten machen ... man könnte eine zusätzlichen Span Container nehmen und darüber ein Element einfügen ... vieles ist möglich, aber so kommt es mir am einfachsten vor. Danke an alle Teilnehmer
Noch mal vielen herzlichen Dank an alle Teilnehmer - wer sich auch immer an dem Problem versucht und jetzt entweder keine Lösung gefunden oder nicht gewonnen hat ... es war ja nur ein kleines Spiel! Mir hat's auf jeden Fall Spass gemacht und ich fand alle Ansätze spannend, weil ihr eben anders gedacht habt, als ich es vielleicht tun würde.
Es gibt in CSS für viele Problem ja kein 'richtig' und kein 'falsch', sondern verschieden Wege.
18.12.12
Ich hab's in meinem Leben ja zu keinem formalen Abschluss in rein gar nichts gebracht, noch nicht mal zum QA hat's gereicht :( --- mit anderen Worten, unter euch Leser gibt's bestimmt welche mit Bachelor oder Master in Gestaltung, Frontenddesign whatever und insofern lehne ich mich sehr weit aus dem Fenster, wenn ich da über die Leserlichkeit von Texte doziere ... dazu gibt's bestimmt von qualifizierterer Seite massig Zeug dazu.
Nuuuuur ... das schöne am Internet ist, jeder kann über alles schreiben, er muss es einfach nur machen, oder? Also schreibe ich jetzt einfach mal über die ein oder andere Beobachtung zum Thema Leserlichkeit von Text und damit das ganze nicht gar so fad wird, habe ich meine kleinen Anmerkungen mit a bisserl Form aufgepeppt - aber seht selbst.
Der Text ...
... ist aus meiner Erfahrung des letzten Jahres mit Schrift und Text im Internet entstanden. Ich bin weder Designer noch Gestalter und ich habe auch nicht wirklich Ahnung von der Sache, aber vielleicht gerade deswegen fallen mir ein paar Sachen auf.
Ich habe meiner Skizze die enorme Schrift-Größe von 25px gegeben - ist das zu groß? Um ehrlich zu sein, für mein Empfinden und selbst für einen längeren Text kommt mir die Schrift-Größe okay vor. Ich habe in einem Absatz ja mal einen Text in Blogger Standard Größe von 13px gesetzt. Vergleicht das mal!
Ich kenne sogar einige Blogs, die auf 11px oder 12px runter gehen ... und das macht einen Text nach meiner Wahrnehmung faktisch unlesbar. Das ist okay, wenn das die Absicht dahinter ist - aber ich befürchte, in den wenigsten Fällen ist das der Wunsch des Bloggers - keine Leser zu haben - sondern einfach so aus einer Laune heraus entstanden.
Design
Ich bin kein Designer. Punkt. Wäre ich einer, würde ich mich fragen, was ist eigentlich die Funktion eines Blogs? Antwort: In den meisten Fällen, dass meine seine Texte/Bilder whatever unter die Leute bringt.
Wenn dem so ist, dann muss das erste Anliegen jedes Design sein, diese Texte so gut, klar und leserlich wie nur irgend möglich darzustellen, oder? Sehe ich das falsch?
Fakt ist, Webdesign im allgemeinen und Blogdesign im besondern geht genau den umgekehrten Weg ... da wird alles mögliche gestaltet, gemacht und getan, nur der eigentliche Sinn und Zweck des Blogs, nämlich das eigene Geschreibsel, wird völlig nachrangig behandelt.
Macht mal den Test mit dem Viewport - wie viel Prozent eures sichtbaren Bereichs nimmt der Inhalt eures Blogs ein ... ich kenne Blogs, auf denen vor lauter Header, Bilder und Slider 0.0% vom Inhalt zu sehen sind. Der Besucher muss sich tod scrollen, bis er mal den Blog findet.
Just another brick in the wall ...
... sind Hintergrund, Kontrast, Schriftart, Veränderungen im Schriftbild und was man sonst noch so mit Schrift anstellen kann. Da gibt's gewaltige Möglichkeiten und oft werden die benutzt um was zu machen, weil man's halt kann.
Einfach-mal-so-was-machen ist meistens eine ganz schlecht Idee. Macht was ihr wollt, aber macht euch bewusst, was ihr tut. Wenn ihr die Leserlichkeit eines Textes einfach mal so in die Tonne tretet, weil ihr irgendwo eine super-schicke Idee gesehen habt und die ausprobieren wollt: Fail!
Es gibt 'en Menge Möglichkeiten, wie ihr eure Posts für normal Leser völlig unlesbar machen könnt und das traurige ist, ich sehe fast jeden Tag einen Blog, wo genau das passiert. Stay foolish!
Aber das heißt natürlich nicht, das ihr nichts ausprobieren und immer nur das gleiche machen sollt, im Gegenteil! Seid mutig, traut euch was, macht auch mal ungewöhnliche Sachen und wenn die nicht funktionieren, könnt ihr ja immer noch wieder zurück auf START und was neues anfangen.
Genau dazu sind ja Blogs da, weil sie ein hervorragendes Übungsfeld sind ... ist ja nur ein Blog, keine 100.000€ Site. And Now for Something Completely Different!
Mein kleiner CSS-Wettbewerb läuft übrigens noch bis Donnerstag Mitternacht ... herzliche Einladung an jeden, der sich bis hierhin durch die Bleiwüste durchgequält hat, daran teilzunehmen.
16.12.12
Heute mal wieder Zeit für eine Skizze - Thema: Bewegung!
Seid bei Bewegung auf Websites vorsichtig - unsere Wahrnehmung gibt Bewegung immer Priorität, insofern lenkt ihr mit dauerhaften Bewegung vom Inhalt ab (animierte .gifs sind etwa no-go > my oppinnion).
Die Idee hinter dieser Skizze ist einfach - beim öffnen der Seite wird durch das 'reinfliegen' der Tabs die Aufmerksamkeit auf das Menü gelenkt. Durch das klar definierte Anfang und Ende der Animation, wirkt das ganze trotzdem entspannt.
Was Neues
Ich habe mit dieser Skizze a bisserl was neues ausprobiert. Alle bisherigen Skizzen sind mit dem Smultron entstanden, hier habe ich zum ersten mal mit Coda2 gearbeitet, einem deutlich 'mächtigeren' Tool.
Den Editor zu wechseln war keine leichte Entscheidung für mich - ein Editor ist ein sehr persönliches Werkzeug und um damit effizient zu arbeiten, braucht's viel Übung. Ich bin mir noch nicht sicher, ob Coda2 wirklich mein neuer Editor wird, fremdle noch a bisserl :).
Zweitens ist das meine erste auf GoogleDrive gehostete Skizze - was ich jetzt schon sagen kann, es ist um Welten einfacher, da zu arbeiten, als auf Blogger - shame on you, Blogger! Die Skizze
Die Skizze selber ist denkbar simpel aufgebaut - die Navigation ist eine normale unsortierte Liste mit Anker Elememten drin:
<nav>
<ul>
<li>
<a href="index.html">Demo 1</a>
</li>
<li>
<a href="index2.html">Demo 2</a>
</li>
<li>
<a href="index3.html">Demo 3</a>
</li>
<li>
<a href="index4.html">Demo 4</a>
</li>
<li>
<a href="index5.html">Demo 5</a>
</li>
<li>
<a href="index6.html">Demo 6</a>
</li>
</ul>
</nav>
Mit CSS geben wir dem Menü ein kleines Grundstyling - wichtig ist, das die einzelnen Listenpunkt relativ positioniert werden und eine fixe Weite bekommen:
nav li {
display: inline-block;
width: 80px;
padding-top: 10px;
list-style: none;
position: relative;
}
Die Ankerelemente werden absolute positioniert und dann um 1000px nach links verschoben - damit liegen sie beim öffnen der Seite außerhalb des Blickfelds.
nav li a {
display: inline-block;
margin: 10px;
color: #666;
font-weight: 700;
line-height: 30px;
border-bottom: 4px solid transparent;
position: absolute;
left: -1000px;
}
Animation
So weit so unspektakulär - jetzt kommt der Trick an der Sache. Wir schreiben eine kleine Keyframe Funktion, die die einzelnen Listenpunkt in die Seite schiebt.
Beachtet bitte, dass ich hier alles _ohne_ Vendor Präfix schreibe. Für die vollständige CSS müsst ihr auf die Download Seite schauen:
@keyframes fly1 {
0% { left: -1000px }
100% { left: 0 }
}
Die Funktion ist super-simpel - muss ich dazu was erklären?
Zu dieser Funktion schreiben wir jetzt eine Animation - beginnen wir mit dem letzten (sechsten) Tab:
nav li:nth-of-type(6) a {
animation-name: fly1;
animation-delay: .5s;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-direction: alternate;
animation-fill-mode: forwards;
}
Die Animation hat beim Start eine Verzögerung von .5s, damit sich die Seite erst richtig aufbaut, bevor die Animation startet. Die Dauer ist .5s und das ganze läuft nur einmal ab. Wichtig ist der animation-fill-mode: forwards - damit springt die Animation nach dem Durchlauf nicht auf den Ausgangspunkt zurück.
Für den vorletzten (fünften) Listenpunkt schreiben wir die Animation so:
nav li:nth-of-type(5) a {
animation-name: fly1;
animation-delay: .7s;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-direction: alternate;
animation-fill-mode: forwards;
}
Exakt das gleich wie vorher, nur das wir hier eine Verzögerung um .7s geben, d.h. dieser Tab startet .2s nach dem ersten ... das ist der Effekt des 'eins-nach-dem-anderen-reinfliegen'.
Den vierten Tab bekommt dementsprechend diese Animation:
nav li:nth-of-type(4) a {
animation-name: fly1;
animation-delay: .9s;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-direction: alternate;
animation-fill-mode: forwards;
}
Verstanden? Klasse ... funktioniert das auch auf Blogger?
Antwort von Radio Eriwan: Im Prinzip ja :) ... nur müsst ihr dafür die Crosscoll-CSS von Blogger a bisserl umschreiben :(. ... war ich jetzt zu faul dafür.
Will das wirklich mal jemand ausprobieren, kann er ja sein Glück versuchen :D - klappt's nicht, einfach einen Kommentar hinterlassen, dann schaue ich's mir noch mal auf Blogger an. Und weiter?
Keyframe Animationen wirken frisch und unverbraucht, weil sie niemand benützt - that's the point! Alle Browser unterstützen inzwischen Keyframes - für Asbach Uralt Browser müsst ihr euch allerdings mit modernizr ein Fallback bauen.
Keyframes wirken ruhiger und sind weniger Ressourcenhungrig als Javascript. Ich denke es lohnt sich, mit der Technik a bisserl rumzuspielen. Wettbewerb bis 20. Dezember
Darf ich eure geschätzte Aufmerksamkeit noch mal an den kleinen CSS Wettbewerb bis zum 20.Dezember erinnern? Bis jetzt sind fünf richtige Antworten eingegangen, die Chancen auf den €20 Amazon Gutschein stehen also nicht schlecht.
15.12.12
Ein sehr erfreulicher Trend geht um - immer mehr Blogs beschäftigen sich mit der 'technischen' Seite von Blogger. Heute ist ein neuer IT-GemeinschaftsBlog an den Start gegangen, auf dem vier Bloggerinnen über Bildbearbeitung, HTML, Design whatever schreiben wollen.
Was die vier vorhaben klingt ziemlich ambitioniert ... GIMP, PhotoScape, paint.net, PhotoFiltre, Magix Grafik Designer, Photoshop, HTML ... von meiner Seite auf jeden Fall ein herzliches Willkommen in der Blogger-Blogosphäre :D.
Leute, schaut's doch mal bei Selfdesign vorbei und sagt 'Hallo' ... jeder Anfang ist schwer!
Neuere Posts
Ältere Posts