Posts Tagged ‘HTML’

Sonntag, 22. Mai 2016

HTML und CSS mit ungewolltem Abstand zwischen zwei Grafiken

So richtig habe ich ja schon lange nicht mehr HTML und CSS gecodet … doch letzte Woche fand ich mich wieder einmal vor einem altbekannten Problem wieder, welches sich nur bei Firefox und dem Microsoft Internet Explorer materialisierte:

2 Pixel Abstand zwischen Grafiken
image-6678

Das Problem löste ich, indem ich dem div, welches die Grafiken enthält, folgende zusätzliche CSS-Deklaration zuwies:

...
div.container {font-size:0;line-height:0;}
...

Quelle: Why is there an unexplainable gap between these inline-block div elements? [duplicate]

Tags: , , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Mittwoch, 7. November 2012

Microsoft Domain Policies mit grep unter Windows filtern

Herkules-Aufgabe am Tag, an welchem Barack Obama zum neuen alten Präsident der USA gewählt wurde: Ich musste aus über 150 Domain Policies im HTML-Format diejenigen Dokumente herausfiltern, welche Passworteinstellungen enthielten. Und dies – wohlgemerkt – unter Windows. Wie macht man das?

Im Grund genommen ist das ganze keine grosse Hexerei:

  1. msysgit herunterladen
  2. msysgit installieren
  3. Git bash starten
  4. Ins Verzeichnis mit den Policies wechseln
  5. Folgenden Befehl ausführen:
    $ grep "Enforce password" *.html

Doch oha! grep liefert keine einzige Datei zurück, welche Kennwortrichtlinien enthält? Ein cat auf eine Beispieldatei zeigt, dass zwischen jedem Buchstaben ein Leerzeichen folgt. Indem man eine Beispieldatei mit Notepad++ öffnet, findet man heraus, dass die Exporte vom Domain Controller mit UCS-2 Little Endian enkodiert sind (der Zeichensatz steht in Notepad++ unten rechts in der Statusleiste).

Was nun? Ich habe mir kurzerhand ein bash-Script geschrieben, um die Dateien on-the-fly in ein für grep verständliches Format (UTF-8) zu konvertieren:

#!/bin/sh

if [ $# -lt 2 ]
then
	echo "Usage: $0 [extension of files to search] [string to search for in files]"
	exit 1
fi

for i in *.$1
do
	RES=`iconv -f UCS-2LE -t UTF-8 "$i" | grep "$2"`
	RET=$?

	if [ $RET -eq 0 ]
	then
		echo "$RET - $i"
		echo $RES
		echo ""
	fi
done

exit 0

Das Script tut folgendes: Zuerst liest es alle Dateien im aktuellen Verzeichnis aus, welche auf .html enden. In einer Schleife wird nun jede gefundene Datei mittels iconv von UCS-2LE nach UTF-8 konvertiert und an grep weitergepipet. grep sucht im Zeichensalat nach „Enforce password“. Die bash-Variable $? speichert das Resultat dieses Befehls; sprich 0 falls die Zeichenkette gefunden wurde, 1 (oder eine andere Zahl ungleich 0), wenn grep gestolpert ist oder einfach nichts gefunden hat. Ist $RET gleich 0, wird der Dateiname ausgegeben.

Schlussendlich fanden sich in den 150 Dateien gerade mal 6 Stück, welche Passworteinstellungen enthalten. Doch statt dem fehleranfälligen manuellen Geklicke habe ich quelloffene Tools, gepaart mit ein wenig Scripting-Wissen für mich arbeiten lassen.

Gut zu Wissen

Wer die Namen der Zeichensätze nicht auswendig weiss, dem wird unter folgendem Link geholfen:

libiconv

Tags: , , , , , , , , , , , , , ,
Labels: IT

Keine Kommentare | neuen Kommentar verfassen

Mittwoch, 31. August 2011

Word HTML-Säuberer wordoff.py lokal ausführbar machen

Kürzlich stand ich auf der Arbeit vor der schmerzlichen Vorgabe, ein dutzendes Seiten umfassendes Word-Dokumenten nach Excel zu kopieren (das Dokument enthielt unzählige Tabellen im immer gleichen Aufbau). Anstelle jede Zelle mühsam einzeln nach Excel zu kopieren – was meine gesamte bisherige Ausbildung in Frage gestellt hätte – entschied ich mich dafür, das Word-Dokument als HTML abzuspeichern, den HTML-Code anzupassen und danach in Word zu importieren.

Bekanntermassen ist der von Word produzierte HTML-Code ungefähr so das schrecklichste, was ein Web-Entwickler jemals zu Gesicht bekommen wird. Zum Glück gibt es Web-Dienste wie WordOff, welche über ein Web-Form Word-HTML entgegennehmen, säubern und zum Download anbieten.

Da das Word-Dokument in meinem Falle aber die Bemerkung „Strictly Confidential“ enthielt, empfand ich dies dann doch eher als gewagter Stunt, der mir im schlimmsten Falle den Job hätte kosten können.

Ich entschied mich deshalb, den Python-Code für das Projekt von git herunterzuladen, anzupassen und danach lokal über das HTML-File laufen zu lassen.

Folgende Anpassung war in wordoff.py nötig:

...
def superClean(str):
    clean = stripAttributes(str)
    cleaner = stripSpans(clean)
    cleaner = stripDivs(cleaner)
    #cleaner = xenophobia(cleaner)
    cleaner = stripEmptyElements(cleaner)
    cleaner = stripEmptyElements(cleaner)
    cleaner = stripEmptyElements(cleaner)
    cleaner = reduceLineBreaks(cleaner)
    return cleaner

# Changes added by Mario Aeby, eMeidi.com
# Allows to execute the script locally on a command line
def main():
	file = open("word-to-excel.htm");
	str = file.read()
	
	print superClean(str)
	
if __name__ == "__main__":
    main()

Dies erlaubt, das Script folgendermassen auf der Kommandozeile aufzurufen (die Quelldatei muss derzeit leider in den Sourceode hardkodiert werden):

$ ./wordoff.py > word-to-excel-clean.html

Nicht schlecht. Wer weiss, vielleicht lässt der Entwickler diese Anpassung ja auch ins Projekt einfliessen, damit man es künftig sowohl unter dem Django-Framework als auch lokal in einer Shell ausführen kann.

Tags: , , , ,
Labels: IT, Web

1 Kommentar | neuen Kommentar verfassen

Samstag, 4. Juni 2011

Urheberrechtlich geschützte Schriften in Web-Sites einbetten: Das Kleingedruckte

Da nahm mich doch Wunder, wie das mit dieser offensichtlich nicht standardmässig in Web-Browsern vorhandenen Schrift läuft, und schon mit dem ersten Blick auf den Source-Code das Aha-Erlebnis:

/*
 * MyFonts Webfont Build ID 827491, 2011-05-31T06:11:53-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Houschka Rounded Medium
 * URL: http://new.myfonts.com/fonts/fw-g-type/houschka-rounded/medium-81542/
 * Foundry: G-Type Collection
 * Copyright: Copyright (c) 2008 by G-Type Designed and digitized by Nick Cooke. All rights reserved.
 * License: http://www.myfonts.com/viewlicense?1056
 * Licensed pageviews: 90,000/month
 * CSS font-family: HouschkaRounded-Medium
 * CSS font-weight: normal
 * 
 * (c) 2011 Bitstream Inc
*/

Licensed pageviews: 90,000/month. Tönt kompliziert. Und teuer.

Tags: , , ,
Labels: Allgemein

Keine Kommentare | neuen Kommentar verfassen

Sonntag, 27. Februar 2011

McKinsey BTO hat Web-Applikationen einfach nicht begriffen

Per Zufall bin ich gestern auf McKinsey Horizon 2011 aufmerksam geworden und habe mich vorhin über die Web-Oberfläche des Beratungsunternehmens für die Teilnahme an diesem Anlass beworben. Spätestens mit diesem Blog-Artikel habe ich wohl alle Chancen verspielt, um aufgeboten zu werden …

In Barcelona soll im Mai 2011 ausgewählten Summa Cum Laude-Absolventen (bin ich notabene auch nicht) der Unternehmensbereich Business Technology Office (BTO) vorgestellt werden. Das BTO bietet laut Eigenwerbung folgende Dienstleistung an:

Ziel unserer Beratung ist es, durch effektiven Einsatz von Technologie unternehmerische Probleme zu lösen und somit den substanziellen Wert eines Unternehmens nachhaltig zu steigern. Insbesondere helfen wir unseren Klienten, Investitionen in Technologie erfolgreich zu managen und mit den strategischen Prioritäten des Geschäfts in Einklang zu bringen.

Quelle: Business Technology Office

Schade nur, dass die Web-Applikation für die elektronische Eingabe der Bewerbung aus dem Mittelalter des Webs zu stammen zu scheint. Nicht gerade rühmlich, wenn dieselbe Firma gleichzeitig Tipps geben möchte, wie man Unternehmens-IT besser einsetzt.

Was bemängle ich konkret? Es sind dies drei Punkte:

Browser-Inkompatibilität

McKinsey Browser Issue
image-4456

Ruft man die Web-Site mit Safari 5 unter Mac OS X 10.5 auf, erscheint folgender JavaScript-Alert:

Only people with IE 4.0 and higher, and Firefox browsers for Windows can use this application. Please download and install either IE or Firefox for Windows, and then return to apply on-line.

Immerhin funktioniert die Applikation mit Firefox 3.6 unter Mac OS X 10.5 ohne zu Murren.

Dennoch: Liebe McKinsey, im Jahre des Herrn 2011 und 20 Jahre nach der Erschaffung des World Wide Webs tummeln sich doch einige Rendering-Engines mehr auf dem Markt als nur MSIE und Firefox:

  • Microsoft Internet Explorer
  • Gecko (Mozilla Firefox)
  • WebKit (Apple Safari, Google Chrome)
  • Opera

Da die Bewerbungsapplikation eigentlich nur simple Formularfelder und einige Dateiupload-Widgets zur Verfügung stellt, die seit 1993 zum HTML-Standard gehören, sollte jede dieser Rendering-Engines unterstützt werden.

Dass Mac OS X unter den Führungskräften von morgen überproportional verbreitet ist, muss ich in diesem Zusammenhang nicht erwähnen, oder? Und ja, es gibt sogar Leute, die sind mit Linux (bspw. Ubuntu) unterwegs. Oder dem iPhone und dem iPad, auf welchen iOS läuft. Was ist mit all diesen Betriebssystemen?

Spezialwerte für Formularfelder

McKinsey Work History
image-4457

Please enter your work history in chronological order with most recent position listed first. If you are currently employed, the system will require you to submit an End Date. In that instance, please enter 01/01/2050.

Ehrlich? Das ist ein typischer Fall, wo ein Web-Entwickler geschlampt hat und stattdessen nun Tausende von Bewerbern durch das Usability-Nightmare waten müssen.

Session Timeout

McKinsey Session Timeout
image-4458

Bekanntermassen ist das Verfassen von Bewerbungen auch in elektronischer Form ein langwieriger Prozess. Umso bitterer, wenn nach etwa einer Stunde folgende von JavaScript-generierte Warnmeldung erscheint:

For security reasons, your session has timed out and you need to restart your application. We apologize for any inconvenience.

Natürlich gehen dabei alle bereits erfassten Formulardaten verloren.

Fazit

McKinsey, Note ungenügend, bitte setzen. Das Unternehmen sollte sich mal selbst von der eigenen BTO beraten lassen, um mit dem „effektiven Einsatz von Technologie unternehmerische Probleme zu lösen“ …

Dieses Bewerbungsformular ist ein Paradebeispiel, wie benutzerunfreundlich das Web auch heute noch sein kann. Und das völlig unnötigerweise — denn das Wissen ist vorhanden, es müsste nur umgesetzt werden.

Tags: ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Mittwoch, 14. April 2010

Helvetica wird unter Windows hässlich gerendert

image-3913



Helvetica rendered like shit on Windows

Originally uploaded by emeidi

Heute habe ich ein Bildschirmfoto einer von mir entwickelten Web-Site zugeschickt erhalten — und musste mich angesichts des Font-Renderings fast übergeben. Wie sich nach einigen Nachforschungen herausgestellt hat, ist auf dem System des Kunden ein Helvetica-Paket in Form von TrueType-Schriften installiert. Diese Schriftart wird nun aber sowohl im Internet Explorer als auch im Firefox bei kleinen Schriftgrössen äusserst hässlich gerendert; sprich beispielsweise stimmt das Kerning bei „de“ und ähnlichen Buchstabenkombinationen nicht.

Wieso?

Helvetica is easily my favorite font, but it has one downside: it looks like crap on Windows. The way Windows handles the rendering of Helvetica makes a great font almost unreadable at small sizes.

Quelle: Better Helvetica Font Stack « Minimali.st

Offensichtlich kommt Helvetica ohne anständiges Hinting daher.

Die Lösung ist relativ simpel. Man nehme das Stylesheet und passe es dermassen an, dass anstelle von Helvetica nur noch Helvetica Neue gewählt wird, die auf Windows-PCs in 99 Prozent der Fälle nicht installiert ist. Stattdessen wird bei Windows-Computern dann einfach die gute, alte (und im Grunde hässliche) Arial verwendet. Konkret:

...
font-family: "Helvetica Neue", Arial, sans-serif;
...

Tags: , , , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Sonntag, 23. August 2009

XML sucks!

Then reality struck. The pipeline was slow: Oracle loaded XML at a crawl. And it was a memory hog, since XSLT required putting full document trees in RAM.

Quelle: How XML Threatens Big Data : Dataspora Blog

Selbstverständlich bin ich voreingenommen und lese vorzugsweise Artikel, die Kritik an XML (und XSLT) üben. Aber ein Körnchen Wahrheit wird sicherlich darin sein …

Aus diesem Grund lasse ich auch heute (2009) noch die Finger von dieser Technologie.

Tags: , , ,
Labels: IT

Keine Kommentare | neuen Kommentar verfassen

Mittwoch, 15. Juli 2009

DVD-Ausschnitt in Web-Site einbinden

Mit folgender – zugegebenermassen äusserst kurzen – Anleitung, die sich an Profis richtet, möchte ich aufzeigen, wie man ein Kapitel einer (unverschlüsselten) DVD ins Web bringt. Natürlich mit dem Mac!

Apple DVD-Player

Die DVD wird ins Laufwerk gelegt, worauf sich Apples DVD-Player automatisch startet. Man wählt das gewünschte Kapitel an und spielt es ab. Währenddessen sucht man unter Go > Title die Nummer das Kapitels/Titels.

Alternativ kann man auch Window > Navigator anzeigen lassen.

Handbrake

Homepage

Bewaffnet mit der Kapitelnummer öffnen wir Handbrake. Als Quelle wählen wir das DVD-Symbol aus und lassen die Applikation automatisch deren Metadaten einlesen.

Anschliessend wählt man im Title-Dropdown die entsprechende Nummer aus, stellt die Parameter der Konvertierung ein (ich habe mich für Format: MP4 file und MPEG-4 Video entschieden) und klickt auf Start.

ffmpegX

Homepage

Die so erstellte Datei zieht man auf das Programmfenster und wählt als Ausgabeformat flv aus. Auch hier stellt man mittels Feintuning noch zusätzliche Parameter ein, falls das nötig erscheint. Als Ausgabegrösse empfehlen sich 320 x 240 Pixel.

Video-Controller

JW Player

Um die Video-Datei in einer Web-Seite einzubetten, benötigt man nun noch einen sog. „Controller“, der die Wiedergabe des Films steuert (im Grunde die Box, die das Video anzeigt und mit einigen Buttons versehen ist). Ich habe mich für den kostenlosen, aber mit einigen Restriktionen versehenen JW Player entschieden.

Parameter

Damit der Videoplayer geladen wird, muss man in die Web-Seite HTML-Code einfügen. Unterhalb ist ein Beispiel wiedergegeben, welches annimmt, dass die Player-Datei, das Video und das optionale Vorschaubild im selben Verzeichnis abgelegt sind wie die HTML-Datei:

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="320" height="200">
 <param name="movie" value="player.swf" />
 <param name="allowfullscreen" value="true" />
 <param name="allowscriptaccess" value="always" />
 <param name="flashvars" value="file=movie.flv&image=preview.jpg&stretching=exactfit" />
 <object type="application/x-shockwave-flash" data="player.swf" width="320" height="200">
  <param name="movie" value="player.swf" />
  <param name="allowfullscreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="flashvars" value="file=mve.flv&image=preview.jpg&stretching=exactfit" />
  <p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
 </object>
</object>

Nicht vergessen, dass der bescheuerte Flash-Standard identische Variablen in mehreren Tags ablegt.

16:9 gefälligst?

Falls man das Video nicht im 4:3-Format erstellt hat, hilft folgende flashvar weiter:

stretching=exactfit

Nun muss man aber noch die Grösse der Playerbox anpassen. Als Faustregel gilt: Die Breite entspricht der Breite des Videos, während der Höhe des Videos noch 20 Pixel hinzugezählt werden müssen, um Platz für die Bedienknöpfe zu machen.

Tags: , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Dienstag, 23. Dezember 2008

Seitenumbruch in der Druckversion von Safari

Heute habe ich mir an Safari 3.2 die Zähne ausgebissen: Der Browser wollte partout keinen Seitenumbruch vor einem div drucken, obwohl ich diesem den CSS-Stil page-break-before:always; zugewiesen hatte.

Safari unterstützt dieses CSS-Attribut eigentlich seit Version 1.2. Doch was zum Teufel? … Unter Firefox wurde der Seitenumbruch vor dem Element tadellos gedruckt und div ist auch wie von W3C gefordert ein Block-Element, weshalb es sich hier offensichtlich um ein Browser-Problem handeln musste.

Nach einigem Pröbeln realisierte ich dann, dass das Eltern-div im CSS, welches für die Druckausgabe verwendet wurde (media="print" für Kenner), gefloated war. Nachdem ich diese Eigenschaft entfernte, wurde der Seitenumbruch problemlos gedruckt.

Tags: , , , ,
Labels: Allgemein

1 Kommentar | neuen Kommentar verfassen

Dienstag, 19. Februar 2008

Formulare mit CSS (und ohne Zeilenumbrüche) layouten

Wie man Formulare heutzutage layoutet (nämlich mit CSS und nicht etwa Tabellen), verzapfen unzählige Artikel im Netz. Einen sauberen Einstieg bietet beispielsweise Quirksmodes Tableless forms.

Auch hier wird wieder belohnt, wer die HTML-Spezifikationen kennt und spezifische Tags so einsetzt, für was sie eigentlich erdacht wurden. Bestes Beispiel in diesem Zusammenhang: Der <label>-Tag, welcher immer noch nicht allen professionellen Web-Entwicklern bekannt ist.

Eine Sache wird in vielen Artikeln hingegen nicht ausreichend erläutert: Wie kriege ich das Formular-Layout hin, ohne dabei <br>-Tags zu benutzen? (Zeilenumbrüche, für HTML-Unerfahrene – in der Regel <tt clear="all">, um mit dem Floats zurecht zu kommen …)

Heute nun habe ich mich noch einmal mit der Umbruch-Thematik auseinandergesetzt und kann folgende Lösung präsentieren, die zumindest in Firefox 2.x und Safari 3.x zu funktionieren scheint (ich schliesse mich Conrast.ie an und hasse MSIE6 ab heute öffentlich):

label {
 display:block;
 float:left;
 width:200px;
 
 clear:left;
}
input {
 display:block;
 float:left;
 
 clear:right;
}

Wichtig sind die clear-Anweisungen, die das Umbrechen der Floats steuern.

Tags: , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen