Anzeige
Anzeige
Anzeige
Anzeige
Verpasse keine News mehr!

Tools für Webworker

2 Min.
Artikel merken
Anzeige
Anzeige

Dialogfenster für Bootstrap

Anzeige
Anzeige

Mit Bootbox.js (http://bootboxjs.com/) bietet sich eine schlanke, quelloffene Javascript-Bibliothek, mit der Frontend-Entwickler moderne Dialogfenster auf Basis von Bootstrap Modals erstellen können. Und das ohne dabei direkt mit DOM-Elementen in Berührung zu kommen oder mit Event-Händlern arbeiten zu müssen. Mit einem einzigen, simplen Funktionsaufruf wie bootbox.alert() wird eine Alert-Box auf dem Screen angezeigt, sanfte Animation und Fade-in-Effekt inklusive. Natürlich lassen sich auch komplexere Dialogfenster implementieren, zum Beispiel mit eingebetteten Formularen, Videoinhalten oder mit beliebigem HTML-Code. Größe, Position und weitere Eigenschaften der Modal-Fenster können ebenfalls nach Belieben angepasst werden.

Mit ColorZilla die Farben einer Website anzeigen

Anzeige
Anzeige

Mit
ColorZilla (http://t3n.me/colorzilla_chrome) gibt es eine
hilfreiche, kostenlose Erweiterung für Chrome, die sich als kleiner
Helfer für Webdesigner im Alltag schnell als unverzichtbar erweisen
kann. Diese bietet nämlich einen einfachen Weg, die Farbe und Farbwerte
von beliebigen HTML-Elementen direkt im Browser zu selektieren. Wenn man
den Color Picker aktiviert, zeigt das Programm die Farbe jedes
Elements, auf dem man mit dem Mauszeiger fährt, am oberen Rande des
Bildschirms übersichtlich an. Ausgewählte Farben, die man später
vielleicht gut gebrauchen könnte, kann man im Programm speichern. Auch
praktisch: Mit dem integrierten „Webpage Color Analyzer“ können sich
Anwender eine Farbpalette automatisch erstellen lassen, die sämtliche
Farben enthält, die das Programm auf der Website findet.

Anzeige
Anzeige
Notifications wie bei Growl

Die praktischen Desktop-Benachrichtigungen, die heute jeder Mac-Anwender aus dem Notification Center in OS X kennt, gab es eigentlich schon viel früher auf dem Mac, nämlich mit Growl. Die unaufdringlichen, leicht anpassbaren Notifications, die jeder Entwickler in seine eigene Apps leicht integrieren konnte, sind inzwischen zu einem Klassiker geworden – und das jenseits der Mac-Welt. So steht mit Bootstrap-Growl (https://github.com/ifightcrime/bootstrap-growl) ein praktischer JQuery-Plugin zur Verfügung, mit dem man die statischen Alert-Boxen von Bootstrap leicht in Growl-Notifications verwandeln kann. Diese werden auf dem Bildschirm mit einer sanften Animation eingeblendet und nach wenigen Sekunden automatisch ausgeblendet.

Anzeige
Anzeige
Leaflet: Interaktive Karten leicht gemacht

Leaflet (http://leafletjs.com/) ist eine quelloffene Javascript-Bibliothek, die auf HTML5 und CSS3 basiert und in der Praxis weit verbreitet ist. Damit lassen sich interaktive Karten leicht erstellen, die nicht nur auf dem Desktop eine gute Figur machen, sondern auch für Mobile optimiert sind. Damit präsentiert sich Leaflet als eine interessante Alternative zur Google Maps API, die von namhaften Internetfirmen wie Facebook, Pinterest oder GitHub eingesetzt wird. Entwickler können dank der funktionsreichen Bibliothek alle Standard-Features implementieren, die man aus typischen Online-Karten kennt, etwa Zoom-in und -out, Markers, Pinch-&-Zoom oder Suche. Da Leaflet von sich aus keine Kartendaten bereitstellt, muss auf einen so genannten „Tile Service“ zurückgegriffen werden. Unterstützt werden dabei sowohl quelloffene als auch proprietäre Mapping-Lösungen wie OpenStreetMap beziehungsweise MapBox.

Responsive Websites einfach in Chrome testen

Anzeige
Anzeige

Der Name ist Programm. Mit dem Responsive Web Design Tester (http://t3n.me/responsive_tester) können Designer auf einfache Weise testen, wie sich ihre responsive Seiten auf verschiedenen Geräten verhalten. Die kostenlose Chrome-Erweiterung bietet zahlreiche vorkonfigurierte Devices wie die verschiedenen iPhone- und iPad-Modelle sowie mobile Android-Geräte wie etwa das Samsung Galaxy oder der Nexus-Tablet. Bei einem Device werden einfach die Bildschirmgröße und der entsprechende User-Agent spezifiziert. Wenn man sein Test-Gerät auf der Liste nicht findet, dann kann man es selber mit ein paar Klicks anlegen. Um herauszufinden, wie sich responsive Seiten auf einem bestimmten Tablet oder Smartphone verhalten, wählt man einfach das entsprechende Device aus und das Programm öffnet ein neues Browser-Fenster mit den spezifizierten Dimensionen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren