tas2580
Blog über Webentwicklung und Linux Server

Kategorie: HTML/CSS/JS

HTML CSS JS

Hier findest du Artikel den Frontend Technologien HTML, CSS und JavaScript. Eine Dokumentation zu HTML und CSS findest du hier.


HTML5 Notifications

tas2580  

Push-Notifications sind auf Smartphones und Tablets schon lange beliebt um Benutzer über Ereignisse zu informieren. Aber auch auf den Desktop lassen sich Nachrichten an den Benutzer ausgeben und das sogar von einer Webseite aus. Mit Desktop Benachrichtigungen kann man seine Besucher über Ereignisse auf der Webseite informieren und das sogar so, dass man die Webseite nicht unbedingt im aktiven Tab haben muss, der Benutzer bekommt die Nachricht auch wenn er gerade eine Seite in einem anderen Tab anschaut oder der Browser gar nicht im Vordergrund läuft. Wer Facebook oder Googlemail benutzt kennt das ja sicher schon.

Extene Links mit Icons

tas2580  

Viele Seiten zeigen hinter einem Extenen Link ein kleines Icon an damit der Besucher erkennt das es sich bei dem Link um einen Link zu einer externen Seite handelt. Ich habe das ganze mal etwas erweitert so, dass sich das Icon wenn man mit der Maus über den Link fährt in das Logo der Seite ändert. So sieht ein Besucher nicht nur das es sich um einen Externen Link handelt sondern auch wo hin der Link geht. Das alles funktioniert ohne das man das HTML seiner Seite ändern muss.

Kostenlos zur eigenen Webseite mit echter Domain und HTTPS

tas2580  

Wer mal schnell eine kleine Infoseite online stellen möchte muss dazu nicht zwingend Geld für Webspace und Domain ausgeben. Mit ein paar Einschränkungen ist es möglich eine Webseite mit eigener Domain und HTTPS Unterstützung völlig kostenlos online zu stellen. Das eignet sich besonders gut um Seiten für z.B. Veranstaltungen, Infoseiten für Softwareprojekte oder ähnliches zu erstellen ohne dafür Geld ausgeben zu müssen. Ein weiterer Vorteil ist das die Seiten sehr schnell sind und es dank CDN zu kaum ausfällen der Seite kommt.

Webseite über Bewegungssensoren von Smartphones scrollen

tas2580  

Heute kam jemand zu mir und meine er hätte eine Webseite gesehen die man durch kippen des Smartphones scrollen könnte. Das fand er ganz toll und wollte es auch haben, da er aber keine Ahnung hat wie sowas geht musste ich es mal wieder richten. Dass man per JavaScript verschiedene Hardwaresensoren eines Smartphones oder Tablet auslesen kann war mir bekannt, die so gewonnenen Werten könnte man jetzt benutzen um die Seite per JavaScript hoch und runter scrollen zu lassen.

Schönere Formulare mit HTML5

tas2580  

So langsam wird HTML5 von allen gängigen Browsern unterstützt so das man es mittlerweile gut verwenden kann. Der Internet Explorer 9 oder älter hat damit zwar noch seine Probleme, aber alle anderen aktuelle Browser unterstützen HTML5 mittlerweile weitestgehend. Wo man früher oft aufwändiges Javascript benutzt hat um dem Benutzer das eingeben von Daten in Formulare zu erleichtern kann man jetzt in vielen Fällen HTML5 verwenden was die Arbeit deutlich vereinfacht und den Code schön schlank hält. Die neuen Eingabefelder vereinfachen die Eingabe der vorgegebenen Daten nur und erzwingen sie nicht. Man muss also trotzdem noch Serverseitig prüfen ob die Daten im richtigen Format beim Server ankommen.

1 Klick Social Media Buttons mit Datenschutz

tas2580  

Social Media Buttons findet man heute auf beinahe jeder Webseite, oft werden dazu einfach die von den Plattformen angebotenen Codes eingebunden. Das ist zwar eine sehr einfache Lösung, dient aber nicht gerade dem Datenschutz da bei jedem Aufruf Daten über den Besucher an die sozialen Netzwerke gesendet werden. Wenn man eine Seite die diese Buttons eingebunden hat aufruft während man im Sozialen Netzwerk angemeldet ist kann das Soziale Netzwerk zuordnen welche Seiten man im Internet anschaut. Auch wenn man nicht angemeldet ist werden Daten wie die IP-Adresse oder der verwendete Browser an das Soziale Netzwerk übertragen. Um das zu verhindern kann man als Benutzer diese Buttons mit einem Adblocker blocken, oder das Browser-Addon Disconnect (für Chrome, für Firefox) installieren.

Standort per JavaScript abfragen

tas2580  

Eine schöne neue Funktion von HTML5 ist es das man per JavaScript API ziemlich exakt den Standort eines Besuchers abfragen und auslesen kann. Das funktioniert in praktisch allen aktuellen Browsern die ich getestet habe und kann so heute schon gut verwendet werden. Damit lassen sich dann in Kombination mit Google Maps sicher nette Dinge umsetzen.