n@work - Blog de n@work - Blog http://www.work.de/fileadmin/resources/img/logo.gif 137 62 TYPO3 http://blogs.law.harvard.edu/tech/rss Wed, 05 Jun 2013 15:01:00 +0200 Webinale 2013 Berlin - Tag 2 http://www.work.de/ueberuns/blog/webinale-2013-berlin-tag-2.html Tag zwei der Webinale begann für uns, heute morgen in Berlin, um 9:00Uhr. Nach einem Einblick in die mobile Zukunft ging es zu einem Talk mit dem Titel "Ich sehe was, was du nicht denkst". Dabei ging es im großen und ganzen über Nutzerpsychologie.Der Vortrag war sehr interessant und hervorragend vorgetragen.Nach der folgenden Kaffeepause waren wir in einem Vortrag zum Thema Touchevents... Der Vortrag war sehr interessant und hervorragend vorgetragen.
Nach der folgenden Kaffeepause waren wir in einem Vortrag zum Thema Touchevents mit Javascript - JA! Wir waren in einem Javascript-Vortrag(auch ein Designer will noch höher hinaus).
Am Nachmittag erreichte uns eine traurige Nachricht: Vitaly Friedman von Smashing Magazine konnte für seinen Talk zum Thema "Webdesigntrends 2013" nicht erscheinen. Ein Glück haben sich einige freiwillige Sprecher gefunden, die zu dem Thema ihre Gedanken zusammenfassten. Auch das war sehr interessant.
Am Ende des zweiten Tages stellt sich nun langsam ein leichtes Bedauern ein, da wir uns dem Ende der Konferenz nähern.]]> Konferenzen & Events Wed, 05 Jun 2013 15:01:00 +0200 Webinale 2013 Berlin - Tag 1 http://www.work.de/ueberuns/blog/webinale-2013-berlin-tag-1.html Heute hat die Webinale in Berlin wieder ihre Startglocken läuten lassen. Pünktlich um 9:00Uhr waren wir vor Ort, um uns die nächsten drei Tage von dem spannenden Programm unterhalten zu lassen. Auch in diesem Jahr erwarten wir wieder mit einem vollen Koffer neuer Ideen und Anregungen nach Hause zurückzukehren.Ganz in diesem Sinne begann der erste Tag heute schon mehr als vielversprechend. Nach... Ganz in diesem Sinne begann der erste Tag heute schon mehr als vielversprechend. Nach der Willkommens-Keynote zum Start der Webinale haben wir an eine Workshop zum Thema "Genese einer App" teilgenommen. Dieser war wirklich großartig. In kleinen Gruppen habe wir neue App-Ideen entwickelt und ausgearbeitet. Weitere Talks rund ums Thema mobile und Web rundeten unseren Tag 1 schließlich ab und wir freuen uns riesig auf den folgenden Tag.]]> Konferenzen & Events Mon, 03 Jun 2013 15:03:00 +0200 Druckversion mit Chrome's Developer Tools testen http://www.work.de/ueberuns/blog/druckversion-mit-chrome-s-developer-tools-testen.html Smartphones, Tablets, Laptops - wir befinden uns mitten in einem mobilen Webzeitalter. Trotzdem bedeutet "mobiles Web" für manche immer noch, Websites auszudrucken und diese in Papierform mit sich rumzuschleppen. Smartphones, Tablets, Laptops - wir befinden uns mitten in einem mobilen Webzeitalter. Trotzdem bedeutet "mobiles Web" für manche immer noch, Websites auszudrucken und diese in Papierform mit sich rumzuschleppen. Aber weil wir Webdesigner so liebe Menschen sind, optimieren wir die Websites auch für den Druck: überflüssige visuelle Elemente werden entfernt, die Lesbarkeit angepasst, die Farben verändert.

Das Ziel so sparsam wie möglich zu drucken ist relativ schnell erreicht, wenn man dem body eine weiße Hintergrund- und eine schwarze Schriftfarbe gibt. Und doch sind Websites inzwischen so komplex, dass etliche Optimierungen nötig sind, bis das ideale Ergebnis erreicht werden kann.

Um das Testen einer print.css zu erleichtern kann ich Chrome's Developer Tools wärmstens empfehlen. Einmal aufgerufen, erscheint in der rechten unteren Ecke des Helferleins ein kleines Zahnrad. Klickt man hier einmal drauf, kann unter "Emulate CSS media" die Einstellung "print" gewählt werden.

Ta-da! Viel Spaß damit.]]> HTML & CSS Tue, 07 May 2013 10:21:00 +0200 Webinale 2012 - Tag 3 http://www.work.de/ueberuns/blog/webinale-2012-tag-3-2.html Nach einem etwas späteren Start der Konferenz als in den letzten Tagen - gestern wurde ja gefeiert - begann der letzte Tag der Webinale in Berlin. Viel Interessantes und auch eine besondere Überraschung hatte dieser Tag für uns zu bieten. Konferenzen & Events Wed, 06 Jun 2012 22:00:00 +0200 Webinale 2012 - Tag 2 http://www.work.de/ueberuns/blog/webinale-2012-tag-2-1.html Auch in Berlin fühlt sich 9 Uhr morgens genauso früh wie in Hamburg an. Unser Tag begann also mit einem Spurt samt Brötchen in der Hand zur Konferenz. Zugegeben, die typischen Frühaufsteher sind wir nicht - aber trotzdem trafen wir just in time bei dem ersten Vortrag ein. Es ging dabei rund um den Prozess der App-Entwicklung für Smartphones und es stellte sich heraus, dass sich das frühe... Konferenzen & Events Tue, 05 Jun 2012 22:00:00 +0200 Webinale 2012 In Berlin... und wir mittendrin! http://www.work.de/ueberuns/blog/webinale-2012-in-berlin...-und-wir-mittendrin-1.html Zum zweiten Mal sind wir vom n@work-Team nach Berlin aufgebrochen, um uns von zahlreichen Talks über neueste Trends und Entwicklungsmöglichkeiten rund um das Thema Web inspirieren zu lassen. Zum zweiten Mal sind wir vom n@work-Team nach Berlin aufgebrochen, um uns von zahlreichen Talks über neueste Trends und Entwicklungsmöglichkeiten rund um das Thema Web inspirieren zu lassen. Gestartet wurde heute morgen um 9:00 Uhr mit einer ausblickenden Eröffnungsveranstaltung. Einige des bekannten Redner stellten sich persönlich vor und machten uns so die kommenden drei Tage der Konferenz noch um einiges schmackhafter. Voller Motivation ging es zum ersten Vortrag unserer Wahl: Joy of use: Wenn Usability Spaß macht. Der Auftakt des ersten Tages ist mit diesem anregenden Vortrag gelungen. Und so ging es auch weiter - wir besuchten eine Menge tolle Vorträge zu verschiedenen Themen wie User Experience, Natural User Interface Design und Piwik. Unsere persönlichen Highlights jedoch waren die Vorträge über Gamification und Webdesign Trends 2012. Insgesamt war der ganze Tag sehr interessant und hat uns viele neue Ideen und Eindrücke vermittelt. Wir freuen uns auf die kommenden zwei Tage hier in Berlin. ]]> Konferenzen & Events Mon, 04 Jun 2012 22:00:00 +0200 Tipps und Tricks zu Design und Umsetzung eines HTML Newsletters http://www.work.de/ueberuns/blog/tipps-und-tricks-zu-design-und-umsetzung-eines-html-newsletters-3.html Wie viele schon festgestellt haben, ist es nicht so einfach einen HTML Newsletter umzusetzen. Auch wenn man sich noch so sehr bemüht - man wird es wohl nie schaffen, dass alle Clients den Newsletter komplett gleich darstellen. Doch nicht die einheitliche Darstellung des Layouts ist das Wichtigste, sondern die für den Leser zur Verfügung gestellten Informationen - diese sollen unter allen... Wie viele schon festgestellt haben, ist es nicht so einfach einen HTML Newsletter umzusetzen. Auch wenn man sich noch so sehr bemüht - man wird es wohl nie schaffen, dass alle Clients den Newsletter komplett gleich darstellen. Doch nicht die einheitliche Darstellung des Layouts ist das Wichtigste, sondern die für den Leser zur Verfügung gestellten Informationen - diese sollen unter allen...

1. Der Designvorgang - schon jetzt an die Umsetzung denken

Bevor man anfängt sollte man sich in Erinnerung rufen, dass in vielen Clients die Bilder standardmäßig ausgeblendet sind und erst manuell von dem Betrachter eingeschaltet werden müssen. 
Es ist also höchst empfehlenswert alle wichtigen Details und Informationen in Text zu fassen und sich nicht auf Bilder zu stützen! Hinzu kommt, dass nicht alle Clients Hintergrundbilder darstellen können. Möchte man sie trotzdem verwenden, so sollten diese in ein <img />-Tag eingefügt und fest ins HTML geschrieben werden. Die Breite des Newsletters spielt eine wichtige Rolle - in vielen Clients darf sie maximal 600px betragen. Hört sich zwar nicht viel an, aber man kann schon etliche Informationen unterbringen. Außerdem ist diese Breite auf mobilen Geräten gut darstellbar und auch der Erstdarstellung im Browser kommt sie zugute.
Der Link zur Ansicht im Browser darf auf keinen Fall in einem Newsletter fehlen.

2. Worauf bei der Umsetzung achten?

Die einzigen Angaben, die wirklich von allen Clients unterstützt werden, sind verschachtelte Tabellen und inline Styles. Selbst der <body>- und <html>-Tag wird bei manchen Clienten entfernt (Gmail), was zum entfernen der im Kopf geschriebenen CSS-Angaben führen kann.
Um also einen Hintergrund über das gesamte Fenster zu erhalten sollte man nicht nur einen <html> und <body> Tag setzen, sondern noch eine alles umschließende Tabelle mit width="100%". Ansonsten wichtig:
  • Absolute URLs verwenden 
  • alt-Text der Bildern nicht vergessen
  • padding und margin in TDs reinschreiben (da z.B Outlook diese Angaben sonst ignoriert)
  • Breite in die TDs reinschreiben (ggf. zusätzlich zur umgebenden Tabelle)
  • Tables mit cellpadding, cellspacing und border versehen
  • Ps zusätzlich mit Inline CSS Margin nach oben und unten geben (um unterschiedliches Rendering zu verhindern)
  • Keine CSS Shorthand Properties schreiben, sondern einzeln (z.B. font-family: Arial; font-size: 14px; anstatt font: 14px Arial;)
  • <a>-Tag müssen inline gestyled werden
  • <img> müssen eine feste Höhe und Breite haben. Das Format sollte entweder gif oder jpg sein.
Ein paar Tricks: Sie mögen vielleicht doppelt und umstämdlich wirken, aber alles in allem sichern sie ein gleichmäßigeres Erscheinungsbild. Outlook:
  • die font-family wird nicht von Tabelle zu Tabelle vererbt. Man sollte also einmal ein <style>Tag in den <body> setzen und dort die Schriftart setzen. Zusätzlich sollte jedoch auch die umschließende Tabelle die Font-Familie erhalten.
Hotmail + Gmail:
  • Beide Clients geben Bildern extra Platz. Um dies zu verhindern gibt es drei Möglichkeiten:  
    • Man hat ein Bild ohne Container, dann gibt man dem Bild, je nachdem wo der Text stehen soll ein align: absbottom, absmiddle oder top. = Der Text ist an der unteren Kante des Bildes ausgerichtet, an der Mitte des Bildes ausgerichtet oder an der oberen Kante.
    • Das Bild bekommt ein display: block. In dem Fall ist der Text aber nur vor oder nach dem Bild.
    • Das Bild hat einen Container, welchem man entweder eine line-height kleiner/gleich 10px gibt oder eine Schriftgröße von kleiner/gleich 2px = Der Container ist so klein, dass er nicht auffällt und der Platz um das Bild verwschwindet.
Hover:
  • Muss im <style>-Tag im <body> gesetzt werden. Dies wiederum heißt, dass man den Links keine inline Styles geben kann. Folge:
    • Outlook nimmt keinen Hover-Effekt, aber die Link-Styles im <body> 
    • Gmail hat keine gestylten Links mehr.
Hotmail:
  • Die <Hx>-Tags werden grün dargestellt. Hier muss die Schriftfarbe mit einem !important unterstützt werden. Die Anweisung !important unterstützt Outlook jedoch nicht. 
    Lösung: 
    (Eine Anweisung mit important und eine ohne direkt nacheinander!)
  • Die erste Tabelle mit width=100% wird ignoriert. Um also doch noch den farbigen Hintergrund, der dort gesetzt wird, zu erhalten hier ein kleiner Hack:
    <head>
        <style>
             ReadMsgBody { width:100% }
             ExternalClass { width: 100% }
        </style>
Höhen- und Breitenangaben im Tag:
  • Auch wenn man es nicht gewohnt ist, hinter width= und height= kommen keine Anführungszeichen und keine px! 
    Also: width=600 und height=50 statt width="600px". 
    Die meisten Clients würden die Anführungsstriche zwar ignorieren, Outlook nimmt jedoch die Breitenangabe gar nicht.
Diese Newsletter landen im Spamfilter:
  • Newsletter, die aus einem einzigen großen Bild bestehen
  • Newsletter mit JavaScript
  • Versteckter Text in den E-Mails
Alles in allem ist dies nur eine kleine Ansammlung an Tricks bei der HTML-Newsletter-Entwicklung und für jedes Problem gibt es sicherlich noch andere Lösungsmöglichkeiten. Ich hoffe der Beitrag konnte euch weiterhelfen und ihr findet nun etwas leichter durch den Dschungel der Newsletter im Netz.
Zum Abschluss noch ein paar nützliche Links und Quellen. Designinspirationen:
  • http://www.campaignmonitor.com/gallery/
  • http://www.htmlemailgallery.com/
Hilfen bei der Entwicklung:
  • http://www.campaignmonitor.com/design-guidelines/
  • http://www.campaignmonitor.com/css/
  • http://24ways.org/2009/rock-solid-html-emails
]]> Webdesign Fri, 02 Mar 2012 13:12:00 +0100 Facebook gibt dem Druck der Datenschützer nach http://www.work.de/ueberuns/blog/facebook-gibt-dem-druck-der-datenschuetzer-nach-3.html Das weltweit größte Soziale Netzwerk muss seinen Usern die Änderungen an den Privatsphäre-Einstellungen zukünftiger transparenter machen und explizit um Einwilligung bitten. Das weltweit größte Soziale Netzwerk muss seinen Usern die Änderungen an den Privatsphäre-Einstellungen zukünftiger transparenter machen und explizit um Einwilligung bitten. Laut Wall Street Journal stehen Facebook und die US-Regulierungsbehörde kurz vor einer Einigung.

In der Vergangenheit hatte Facebook Änderungen innerhalb der Privatsphäre-Politik umgesetzt, den User darüber zum Teil in Kenntnis gesetzt und dieser musste dann selbst aktiv werden, wenn er evtl. Änderungen nicht annehmen wollte. Der aktuellste Fall ist die automatische Gesichtserkennung: Diese wurde unter dem harmlosen Begriff "Fotos: Markierungen vorschlagen" eingeführt.

Hierbei werden biometrische Profile vom Nutzer angelegt – sobald also „Freunde“ Fotos hochladen, wird dieser hierauf automatisch erkannt und markiert.

Dies ist ein grundlegender Verstoß gegen die Nutzerrechte und rief schlagartig Datenschützer auf den Plan.

Die meisten Nutzer bekommen Änderungen an den Privatsphäre-Einstellungen erst einmal gar nicht mit oder verlieren sich im "Einstellungssumpf" verwirrender Bezeichnungen.

Die Einführung eines Opt-in-Verfahrens, also einer expliziten Einwilligung des Nutzers, bevor die Neuerung aktiv wird, würde für Facebook eine grundlegende Veränderung ihrer Firmen-Politik darstellen. Der User wäre dem Unternehmen nicht mehr ausgeliefert und könnte nicht mehr dazu gezwungen werden mehr Daten als gewollt Preis zu geben.

Aufgrund der in Aussicht stehenden Einigung in den USA kann darauf spekuliert werden, dass auch die Beschwerden in Europa erhört werden.

Hamburgs Landesdatenschützer Johannes Caspar ist ebenfalls im Begriff rechtliche Schritte gegen Facebook einzuleiten. "Ein rechtmäßiger Einsatz der Gesichtserkennungssoftware bei Facebook erfordert die freiwillige Einwilligung der informierten Nutzer"

Des Weiteren liegen Facebook im für Europa zuständigen Sitz 22 Beschwerden der östereichischen Studenteninitiative Europe vs. Facebook(http://europe-v-facebook.org/DE/de.html) vor. Unter anderem werfen Sie Facebook vor, dass Nutzerdaten nach dem Löschen weiterhin gespeichert werden, sie nicht alle Daten auf Anfragen des Nutzers herausgeben und ein exzessives Überwachen des Surfverhaltens auf hunderttausenden Seiten via Like-Button durchgeführt wird.

Fazit: Was heißt das alles für uns?

Betreiber einer Firmenseite auf Facebook sollten das ganze im Auge behalten und sich selbst auf dem Laufenden halten. Werbung und Informationen auf einer Firmenseite sind für die Öffentlichkeit gedacht, daher können diese ohne Probleme weiter betrieben werden.

Für den Privat User jedoch ist das ganze ein Thema dem er mehr Beachtung schenken sollte.

Unser Tipp: Überprüfen Sie die Privatsphäre-Einstellungen Ihres Profils, gestatten Sie Drittanbietern nur dann Zugang zu Ihrem Profil, wenn Sie diesen vertrauen und achten Sie in eigenem Interesse darauf, was sie mit wem teilen.

]]> Social Media Fri, 02 Dec 2011 14:37:00 +0100 Neuigkeiten per E-Mail veröffentlichen mit mail2news http://www.work.de/ueberuns/blog/neuigkeiten-per-e-mail-veroeffentlichen-mit-mail2news-1.html Schnell und unkompliziert: Wie mail2news die Veröffentlichung von tt_news-Einträge vereinfacht. Schnell und unkompliziert: Wie mail2news die Veröffentlichung von tt_news-Einträge vereinfacht. Redakteure, die regelmäßig Neuigkeiten auf einem TYPO3-System veröffentlichen, kennen das Problem: Man will "mal eben schnell", vielleicht sogar von unterwegs, eine Nachricht auf die Seite bringen und wünscht sich einen schlankeren Weg, um dies zu tun.
Eine Lösung hierfür bietet die sehr hilfreiche TYPO3-Erweiterung mail2news. Die Veröffentlichung von tt_news-Beiträgen erfolgt nach der Installation und Konfiguration auf dem einfachsten und unkompliziertesten Weg: per E-Mai.

Im TYPO3-Backend stehen nun einige Einrichtungsoptionen zur Verfügung: man kann
  • die Signaturen herausfiltern.
  • die zugelassenen Absender angeben - sowohl mit kompletter Mail, als auch nur die zuzulassende Endung ab dem @.
um einige der nützlichen Features zu nennen.

Am besten richtet man eine neue E-Mail-Adresse ein, welche die Nachrichten empfängt. Per Cronjob werden diese empfangenen E-Mails abgerufen und zu tt_news-Artikeln verarbeitet.

Auch das Strukturieren der E-Mail ist nicht schwer:
Die Betreffzeile wird als Überschrift genommen. Einen Untertitel kann man angeben, indem man am Anfang der Zeile die Zeichenfolge ## eingibt. Ähnlich einfach funktioniert die Auswahl der Kategorie: man kennzeichnet die Zeile mit der Zeichenfolge $$. Der übrige in der E-Mail enthaltene Text wird als Bodytext genommen.

Für weitere Informationen empfehlen wir die Dokumentation auf TYPO3.org an.]]> TYPO3 Mon, 17 Oct 2011 10:36:00 +0200 Zwischenstand der SEO-Challange 2011 http://www.work.de/ueberuns/blog/zwischenstand-der-seo-challange-2011-3.html Beeindruckende Zwischenergebnisse eine Woche vor Ende der n@work SEO-Challenge. Gleich drei Mitarbeiter haben es auf die erste Seite der Google Suchergebnisse geschafft. Suchmaschinenoptimierung Fri, 14 Oct 2011 09:41:00 +0200