Alle all-inkl Seiten inkl. der eigenen Hoster Seite geht seit mehr als einer Stunde gar nichts mehr. Leider informiert der Hoster weder auf Facebook noch auf einer Ausfallseite über den Ausfall. Bleibt zu hoffen dass demnächst alles wieder geht.
Diese Fragen haben sich wohl einige von Intel gestellt. Was dabei herauskam zeigt diese Infografik:
Eine Minute im Internet
die t3n hat 10 kostenlose Icon Fonts zusammen gestellt. Die Icons machen soweit einen ordentlichen Eindruck: http://t3n.de/news/10-kostenlose-icon-fonts-450651/
Eigentlich halte ich ja nicht viel von Importen/Exporten mit phpMyAdmin. Hier ist allerdings für Notfälle ein kleiner Interessanter Artikel wo ein Tool vorgestellt wird welches große Dumps ohne Probleme aufsplitten kann. Vielleicht kann es der eine oder andere benötigen :-)
Für eine Form Validierung gibt es viele Methoden. parsley.js ist eine Möglichkeit. Die Stärken von parsley.js sind in der einfachen Einbindung und Nutzung zu erkennen. Für die Einbindung reicht es aus nach dem einbinden von jQuery das parsley.js einzubinden. Nach belieben kann auch zuvor eine der vielen Lokalisierungen eingebunden werden. Die Validierung selbst findet in dem Form Element bei den einzelnen Felder über data Attribute statt. Hier gibt es auf der Projektseite eine Umfangreiche Dokumentation. Neben verschiedenen eingebauten Feldvalidatoren wie Inhaltsprüfung, Längenprüfung oder auch Vergleichsprüfung von zwei Feldern, stehen auch Validatoren für Emailadressen und URL sowie viele andere zur Verfügung. Hier ein kleines Beispiel wie das ganze genutzt werden kann (Codequelle: parsleyjs.org)
Einbinden des JavaScripts:
|
1 2 |
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="parsley.js"></script> |
Und so wird das Form aufgebaut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form id="demo-form" data-validate="parsley"> <label for="fullname">Full Name * :</label> <input type="text" id="fullname" name="fullname" data-required="true" /> <label for="email">Email * :</label> <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" /> <label for="website">Website :</label> <input type="text" id="website" name="website" data-trigger="change" data-type="url" /> <label for="message">Message (20 chars min, 200 max) :</label> <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea> </form> |
Auf den ersten Blick ist das alles sehr simpel gehalten. Auf den zweiten Blick übrigens auch :-)
Hier noch ein paar wichtige weiterführende Links:
Auch nicht schlecht. Eventuell kann das jemand gebrauchen. Das interessante daran ist wohl die MIT-Lizenz mit der das ganze auch ohne Probleme kommerziell benutzt werden darf.
Adaptive Images in TYPO3. Ein kleiner Workarround für gute Ergebnisse.
Responsive ist gut und schön, allerdings sollte nicht nur die Darstellung des HTML und CSS bei der Umsetzung einer Seite bedacht werden sondern auch die Größe der Bilder die auf dem mobilen Endgerät herunter geladen werden müssen. Nun gibt es ja viele Wege die nach Rom führen, bekanntermaßen. Hier möchte ich einen Weg vorstellen der mit einfachsten Mitteln umzusetzen ist und im Prinzip noch nicht mal etwas mit TYPO3 zu tun. Es geht dabei um das PHP Script von adaptive-images.com. Hier eine Infografik was sich damit erzielen lässt:
Wirkungsgrad adaptive-images.com
Der Einbau dieser Adaptive Images Technik ist denkbar Einfach. Unter dem Downloadlink http://adaptive-images.com/download.htm die letzte Version des Scripts herunterladen. Das Archiv wird nun entpackt. Die Datei adaptive-image.php wird auf den Server geladen. Die Datei wird direkt im Document Root abgelegt. Danach wird ein Verzeichnis mit dem Namen “ai-cache” in dem die Adaptive Images abgelegt werden im Document Root erstellt.
Im nächsten Schritt muss ein kleines JavaScript in den “Head” Bereich der Seite eingebaut werden. Am besten gleich am Anfang.
|
1 |
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> |
Um dieses JavaScript in TYPO3 gleich nach dem Head Tag zu plazieren kannst Du in Deinem Haupt Template im Setup folgenden Code nutzen:
|
1 2 3 4 5 6 |
page = PAGE page.headTag ( <head> <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> ) |
Mit dem JavaScript wird die Auflösung des Clients für die Auslieferung der Adaptive Images bestimmt.
Auf diese Weise wird der Head Tag von TYPO3 überschrieben und danach sofort das JavaScript eingebunden. Als letzte Maßnahme muss noch die .htaccess Datei im Document Root angepasst werden. Dieser Code muss eingebunden werden:
|
1 2 3 4 5 6 7 8 9 10 11 |
# Adaptive Images ----------------------------------------------------------------------------------- # Add any directories you wish to omit from the Adaptive-Images process on a new RewriteCond %{REQUEST_URI} !typo3 # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above # to adaptive-images.php so we can select appropriately sized versions RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php # END Adaptive Images ------------------------------------------------------------------------------- |
Wichtig hierbei ist, das dieser Code sehr weit am Anfang der .htaccess Datei steht. Kommt dieser Code zu spät funktioniert das ganze nicht mehr. Am besten also nach
|
1 2 3 4 5 |
# Enable URL rewriting RewriteEngine On # Change this path, if your TYPO3 installation is located in a subdirectory of the website root. #RewriteBase / |
suchen und direkt danach einfügen.
Konfiguration der Breakpoints für Adaptive Images
Zusätzlich können die Breakpoints nach belieben verändert werden. Das Script ist bereits vorkonfiguriert. In der Datei adaptive-image.php finden sich ab Zeile 15 ein paar Konfigurationsparameter:
|
1 2 3 4 5 6 |
$resolutions = array(1382, 992, 768, 480); // Auflösung und Breakpoints $cache_path = "ai-cache"; // Verzeichnis für Bildercache $jpg_quality = 75; // Bildqualität $sharpen = TRUE; // Bilder zusätzlich nach verkleinern nachschärfen lassen $watch_cache = TRUE; // überwacht den Cache und erzeugt bei Änderungen am originalen Bild ein neues $browser_cache = 60*60*24*7; // Wie lange die Bilder im Browsercache liegen sollen |
Nachdem das ganze umgesetzt wurde kannst Du mit einem Tablet oder einem Smartphone die Webseite Besuchen. Du wirst sehen dass im ai-cache Verzeichnis neue Unterverzeichnisse mit den entsprechenden Breakpoints angelegt werden. Darin wird die normale Ordnerstruktur der Dateien wie in TYPO3 selbst erzeugt, und darin liegen die verkleinerten Bilddaten.
Wie funktioniert das nun genau?
Der Ablauf für die Generierung von Adaptive Images ist relativ simpel:
- Beim laden der Seite wird die aktuelle Auflösung mit dem JavaScript in ein Cookie gespeichert
- Der Browser stellt für jedes Bild dass im Quelltext vorkommt eine Anfrage zum laden an den Webserver
- Der Webserver checkt die Anfrage gegen das htaccess File und schaut ob es bestimmte Anweisungen für Bildmaterial gibt
- Diese gibt es und die Anweisung lautet dass die Anfrage nun an die adaptive-images.php Datei weitergeleitet werden soll
- Die PHP Datei prüft nun ob ein Cookie existiert und holt sich da die Auflösung des Browsers heraus
- Die nun bekannte Auflösung wird gegen die oben definierten Breakpoints verglichen und der am besten passende Breakpoint wird gewählt
- Es wird geprüft ob für diesen Breakpoint bereits eine Grafik im ai-cache Verzeichnis liegt
- Wenn nicht, wird zuerst das originale Bild angefordert
- Wenn das originale Bild kleiner als die bekannte Bildschirmgröße ist wird es dem Browser gesendet
- Wenn das originale Bild größer als die bekannte Bildschirmgröe ist wird es verkleinert und als Kopie im “ai-cache” Verzeichnis abgelegt und dem Browser zugesendet
Na, mal Lust und Laune zu testen was Du für ein Apfel bist? :D Hier eine echt gute Infografik zum selber testen. Probiers aus. Ich habe nur 35 Punkte. Wieviel hast Du?
Frustriert wenn es darum geht für die Social Network Seiten Profilbilder oder Post Bilder anzufertigen? Abhilfe soll der “Social Media Image Maker” bringen. Hier kannst Du für die verschiedensten Portale Bilder erstellen, bearbeiten, zurechtschneiden und als JPG oder PNG datei gleich in der richtigen Größe speichern. AP Social Media Image Maker.
Die t3n hat das Sasmung Galaxy S4 mit dem HTC One, Xperia Z und Galaxy S3 verglichen:
Das Samsung Galaxy S4 ist am vergangenen Donnerstag offiziell in New York vorgestellt worden. Daher ist es an der Zeit, das Vorzeige-Smartphone des Marktführers mit bereits verfügbaren Modellen der Mitbewerber sowie dem Vorgänger, dem Galaxy S3, zu vergleichen. So haben wir außer dem Galaxy S3 die Spezifikationen des HTC One und des neuen Topmodells von Sony, dem Xperia Z, herangezogen und daraus eine große Übersicht erstellt.
Das neue Samsung-Flaggschiff spaltet die Gemüter – manche bezeichnen es gar als ein „Galaxy S3S“, da es sich optisch nur wenig vom Vorgänger, dem Galaxy S3, unterscheidet. Man kann das neue Galaxy S4 als sorgfältige Modellpflege oder evolutionäres Update beschreiben. Denn auch wenn es dem Galaxy S3 recht ähnlich sieht und erneut aus Polycarbonat hergestellt ist, hat Samsung seinem neuen Flaggschiff hier und da sehr interessante und smarte Funktionen verpasst, durch die es sich von der Konkurrenz absetzt – hier seien exemplarisch „S Health“, „S Translator“ und „Air Gesture“ erwähnt. Das 4,99 Zoll große Full-HD-Display lässt sich bedienen, ohne es berühren zu müssen, was zwar schon beim Galaxy Note möglich war, nun aber auch ohne S-Pen funktioniert. Klingt zwar nach Spielerei, aber diese und weitere Features dürften sich als durchaus praktisch erweisen. Der neue Prozessor – in Deutschland wird vorerst nur das Modell mit Snapdragon 600 SoC verkauft, kann performancetechnisch überzeugen. Mehr über das Samsung Galaxy S4.