Montag, 5. Februar 2024
Pro Senectute: Web-Formular lässt keine HTML Spezialzeichen zu
Tags: HTML, html-entities
Labels: Web
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:
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: Abstand, CSS, Firefox, Grafiken, HTML, Internet Explorer, Microsoft Internet Explorer, MSIE
Labels: Web
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: Entwicklung, HTML, Microsoft, Python, Web-Entwicklung
Labels: IT, Web
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: CSS, HTML, HTML5, Web-Design
Labels: Allgemein
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
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
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
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: HTML, Web-Entwicklung
Labels: Web
Mittwoch, 14. April 2010
Helvetica wird unter Windows hässlich gerendert
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: Adobe, Browser, CSS, Design, HTML, Layout, Microsoft, Schriften, Windows
Labels: Web
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: HTML, Programmierung, Web-Entwicklung, XML
Labels: IT
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
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
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
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.
