Alle Beiträge mit Schlagwort “codesnippet”

„Get in touch“: jQuery Europe 2014

16.03.2014 2.798 Aufrufe Events 4,83

Kürzlich verwandelte sich das Wiener Palais Liechtenstein im Rahmen der jQuery Europe bereits zum zweiten Mal in einen IT-Hotspot und versammelte über dreihundert Webworker in diesen wirklich außergewöhnlichen Räumlichkeiten. Gemeinsam mit drei Kollegen von karriere.at war ich vor Ort!

Konferenz mit internationalem Flair

Die jQuery Europe konnte mit hochkarätigen Speakern aufwarten und lockte Experten von Google, Microsoft, Mozilla und eBay – um nur einige zu nennen – in das historische Zentrum von Wien.
Das diesjährige Motto: „Get in touch“. Dem Puls der Zeit angepasst war die Konferenz stark spürbar auf mobile Anwendungen ausgerichtet.

jQuery Europe 2014 – Meine Highlights

Accessibility-Consultant Patrick H. Lauke brachte passend zum Konferenzmotto eine tolle Einführung zum Thema „Getting touchy – Introduction to touch events“. Immer mehr Laptops mit Touchscreen-Oberflächen, kombinierte Eingabemethoden (Touch + Maus + Tastatur), unterschiedliches Browser-Handling: Herausforderungen gibt es viele, die es zu meistern gilt. Projekte wie die W3C Pointer Events Working Group machen jedoch Hoffnung, dass man sich hier bald auf eine einheitliche Lösung freuen darf.

Weiterlesen

Vienna Calling: Digital Visions 2013

13.10.2013 5.633 Aufrufe Events 5,00

Seit Mai 2013 arbeite ich nun im Development-Team bei karriere.at, Österreichs führender Karriere-Plattform. Das Unternehmen tritt bei vielen Veranstaltungen als Sponsor auf und erfreut seine Mitarbeiter mit einem Kontingent an Freikarten. Diesmal gehörte ich zu den „Auserwählten“ und fuhr gemeinsam mit einem Kollegen zur Digital Visions nach Wien.

Digital Visions 2013
Digital Visions 2013

Digital Visions – Worum geht’s?

Digital Visions ist die Konferenz für User Experience und Frontend-Webentwicklung in Wien. Bereits zum zweiten Mal wollen wir gemeinsam Trends beim User Interface Design und in der Frontendprogrammierung setzen.
Der Konferenztag konzentriert sich auf qualitative Themen rund um Screendesign, Usability und HTML Trends.

Die Konferenz konnte mit sechs spannenden und abwechslungsreichen Talks aufwarten.

Digital Visions 2013
Digital Visions 2013
Weiterlesen

Responsive Webdesign – Ein Überblick

14.03.2013 7.408 Aufrufe Web & Co 4,91 2

Die Zeiten, in denen Websites fast ausschließlich mit Desktop-Computern aufgerufen wurden, sind schon lange vorbei. Man surft heutzutage regelmäßig mit Smartphones, Tablets oder sogar mit internetfähigen Fernsehern („Smart TVs“) im Netz. Unterschiedliche Geräte mit stark variierenden Auflösungen und unterschiedlichen Anforderungen hinsichtlich der Bedienung.
Ein verschachteltes Navigationsmenü, das sich per Maus problemlos bedienen lässt, könnte beispielsweise schnell zu Frust führen wenn man auf einem kleinen Smartphone-Display mit den Fingern sein Glück versucht. Genau hier setzt das Responsive Webdesign an und versucht allen Endgeräten eine bedienungsfreundliche und an die Rahmenbedingungen des jeweiligen Endgeräts angepasste Darstellung zu bieten. Das Hauptkriterium für das optimierte Erscheinungsbild ist in der Regel die Anzahl der Pixel, die der Browser in der der Breite zur Verfügung hat.

Responsive Webdesign
ResponsiveWebdesign.com/robot – Ein Beispiel für Responsive Webdesign
Anhand eines einfachen Beispiels werde ich nun die Grundlagen der responsiven Websitegestaltung aufzeigen.
Grundlegende HTML/CSS-Kenntnisse werden vorausgesetzt!

Werfen wir zunächst einen Blick auf die „Zutaten“ für das Responsive Webdesign.

Weiterlesen

Objektorientiertes CSS (OOCSS)

29.01.2011 4.197 Aufrufe Web & Co 5,00

Die strikte Trennung von Design und Inhalt bei Webprojekten führte dazu, dass die HTML-Konstrukte immer einfacher und die CSS-Dokumente immer komplexer wurden. So bringen es sogar die Stylesheets kleiner Websites recht schnell auf über 500 Zeilen Code und werden über den Projektlebenszyklus hinweg immer undurchsichtiger. Bei umfangreicheren Webprojekten stellen die Stylesheets nicht selten ein kleines „Kunstwerk“ dar, das mit vertretbarem Zeitaufwand nur vom ursprünglichen Entwickler komplett durchschaut wird.
Diese Tatsache macht es auch sehr schwierig im Team an den Styles einer Website zu arbeiten. Auch eine Wiederverwendung von CSS-Dokumenten für andere Projekte ist nur eingeschränkt möglich.

Die Lösung: OOCSS

Die Webentwicklerin Nicole Sullivan versucht mit ihrer Objektorientiertes CSS (OOCSS) genannten Methode einen Lösungsansatz zu finden.
OOCSS versucht die Idee der Objektorientierung auf CSS zu übertragen. Objektorientiertes CSS ist dabei keine neue Technik, sondern vereint eine Reihe von Regeln für die Gestaltung von CSS-Dateien. Grundgerüst von OOCSS ist eine von Nicole Sullivan auf ihrer GitHub Projektseite bereitgestellte Code-Bibliothek im Alpha-Stadium. Um das CSS-Framework einsetzen zu können, müssen wie schon erwähnt einige Regeln beachtet werden.
Die zwei wichtigsten:

  • Trenne Container und Inhalt
    Gemäß Sullivans Terminologie bildet ein simpler HTML-Tag (z.B. <h1>, <p>, <li>, …) mit zugehörigem CSS einen Inhalt. Komplexere Strukturen bestehend aus mehreren <div>-Elementen werden als Container bezeichnet. Ordnet man diesen Containern jetzt noch über mehrere CSS-Klassen Layout und Design (Skins) zu, dann entstehen Sullivans Objekte.
  • Trenne Struktur und Design
    Nicole Sullivan bezieht sich hier auf das CSS von Containern und Inhalten. Durch die Verwendung unterschiedlicher Klassen für Layout- und Design-Elemente wird die Wiederverwendbarkeit von Objekten in anderen Projekten ermöglicht.
Weiterlesen

Karten mit Google Maps erstellen

01.02.2015 3.388 Aufrufe Web & Co 5,00

Google Maps ist ein Dienst von Google, der leistungsstarke und nutzerfreundliche Kartentechnologie und Informationen zu Unternehmen wie Standorte, Kontaktinformationen und Routenplaner bietet.
Für Webdeveloper wird eine gut dokumentierte API (Application Programming Interface) zur Verfügung gestellt und daher kann man das umfangreiche Kartenmaterial auch in eigene Webprojekte integrieren.
Voraussetzung dafür ist ein Google API-Key, der als Zugangsschlüssel zu den Daten fungiert. Seit der API Version 3 ist ein API-Schlüssel nicht mehr zwingend erforderlich.
Weiterlesen