Posts mit dem Label WebDevelopment werden angezeigt. Alle Posts anzeigen
Posts mit dem Label WebDevelopment werden angezeigt. Alle Posts anzeigen

Dienstag, Januar 15, 2008

Firefox 3 Beta und Firebug

NACHTRAG:
Mittlerweile werden die Firebug Betas auch auf der offiziellen Firebug Seite veröffentlicht.

Da die aktuelle Beta-Version des Feuerfux so dermaßen viele Verbesserungen mit sich bringt und darüber hinaus auch schon ziemlich stabil ist, hab ich eigentlich keine Lust mehr, den "alten" Firefox 2 zu benutzen. Im direkten Vergleich wirkt der 2er einfach zu schwerfällig und darüberhinaus hat der auch noch immensen Speicherhunger.
Was mich bisher davon abgehalten hat komplett auf Firefox 3 zu wechseln, ist die Tatsache, dass die geniale Firebug Extension noch nicht damit kompatibel ist - bis jetzt.
Bei den Jungs und Mädels von Fireclipse gibt's nämlich die Firebug 1.1 Beta, und die läuft problemlos mit der aktuellen Beta vom Firefox.
Es handelt sich dabei allerdings nicht um eine offizielle Weiterentwicklung der Debugging-Konsole, die lässt immer noch auf sich warten. Aber bisher funktioniert sie wunderbar, und bringt außerdem noch folgende zusätzliche Features mit sich:

  • eval() debugging,
  • external editor interface,
  • browser-generated event handler debugging,
  • executable lines marked with green line numbers,
  • user-controlled naming of eval() buffers,
  • Stack side panel on "Script" panel for callstack,
  • Supports Firefox 3,
  • "better" debugging icons,
  • CSS errors report against source lines,
  • bug fixes (incl. issues 8, 69, 218, 230, 239, 249, 269, 314, 321, 345)
  • Internal firebug debug output

Hier gibt's Firebug für Firefox 3 Beta

Samstag, Oktober 20, 2007

HTML Seitenquelltext anzeigen verboten

Hier ist mal wieder jemand befreit von jeglicher Ahnung:

"Zum Beispiel sind wir die Urheber aller Texte auf dieser Website und Eigentümer ihres Look-and-Feels. Uns gehört auch der ganze Code, der HTML-Code eingeschlossen, sowie die Inhalte. Wie Sie vielleicht wissen, können Sie sich den HTML-Code in einem Standardbrowser anzeigen lassen. Wir gestatten es Ihnen jedoch nicht, den Code anzusehen, denn wir sehen ihn als unser gesetzlich geschütztes, geistiges Eigentum an. Sie haben daher keine Erlaubnis, das zu tun. Darüber hinaus sollten Sie auch keine ganzen oder teilweisen Kopien von dieser Website anfertigen, denn wir wollen nicht kopiert werden. Wir gestatten auch keine Links auf unsere Website, ohne unsere Erlaubnis dazu gegeben zu haben"
*kopfschütteln, starkes*

Montag, Oktober 15, 2007

Webseiten, die den Firefox zum Heulen bringen



Auf dieser Seite findet man Links zu Internetangeboten, welche den Firefox entweder komplett aussperren, oder dem Browser zumindest massive Probleme bereiten, da keinerlei Wert auf Standard-Konformität und Zugänglichkeit gelegt wurde.

Das wirklich Erschreckende daran: es handelt sich bei den aufgelisteten Seiten nicht nur um die Internetauftritte kleiner Unternehmen oder private Homepages; selbst Seiten von mtv.com und Symantec sind betroffen!

Muss das in 2007 wirklich noch sein? Immerhin bewegt sich der Anteil der Firefox Nutzer mittlerweile in einem Bereich von 5-20%. Außerdem frage ich mich ernsthaft, wie man seine Kunden dazu zwingen kann, einen veralteten Browser zu benutzen, der nicht nur unsicher ist, sondern für den man, um ihn zu benutzen, auch noch ein teures Betriebssystem kaufen muss.

Hier geht's zur Gallerie des Grauens

Freitag, September 07, 2007

maYO's weblog - nun Wii-optimiert

Da diese Seite eigentlich mit relativen Breitenangaben arbeitet (also em anstatt px), hatte der Nintendo Wii Opera Browser so seine Problemchen, sie auf dem Fernseher ordentlich anzuzeigen. Besonders das heran zoomen auf bestimmte Bereiche funktioniert wohl auf Seiten mit relativen Breiten nicht wirklich toll.
So genug Technisches - ab sofort sieht's auch auf der Wii gut aus.
Kleiner Trick - große Wirkung ;)

Donnerstag, August 09, 2007

jQuery in 15 Minuten

Simon Willison hat eine kurz & knackige Präsentation über jQuery erstellt. Darin werden die Highlights der JavaScript Bibliothek mit kleinen Codeschnippseln aufgezeigt.
Sehr gut um einen ersten groben Überblick und einen leichten Einstieg in jQuery zu bekommen.



via Ajaxian

Donnerstag, März 29, 2007

Fünf Design-Grundsätze

Übersetzung des Artikels "Five Principles to Design By" von Joshua Porter

Technologie dient dem Menschen

Viele Menschen machen sich selbst für Unzulänglichkeiten einer Technologie verantwortlich. Wenn Ihre Computer abstürzen sagen sie "Ich muss was Dummes gemacht haben". Wenn eine Web-Seite schlecht gestaltet ist sagen sie "Ich muss blöd sein. Ich kann es nicht finden". Sie wenden sich vielleicht sogar an ein Buch für Anfänger um es richtig hin zu bekommen.

Das ist schrecklich! Menschen sollten sich niemals als Versager fühlen wenn sie Technologie benutzen. So wie der Kunde, hat auch der Benutzer immer Recht. Wenn Software abstürzt, dann ist es die Schuld des Software-Designers. Sollte jemand etwas auf einer Web-Seite nicht finden können, ist es die Schuld des Web-Designers. Das bedeutet nicht, dass der Designer den Kopf hängen lassen sollte ... er sollte es besser als Lernmöglichkeit sehen. Der große Unterschied zwischen guten und schlechten Designern ist, wie sie mit Leuten umgehen, die mit Ihrem Design nicht zu Recht kommen.


Technologie dient dem Menschen. Menschen dienen nicht der Technologie.

Design ist nicht Kunst

Bei Kunst handelt es sich um persönlichen Ausdruck. Es geht um das Leben, die Emotionen, die Gedanken und Ideen des Künstlers. Es spielt eine sehr kleine Rolle was der Betrachter tut. Seine Aktivität wird nicht benötigt, nur seine Anerkennung. Kunst als Tätigkeit benötigt diese Anerkennung nicht. Es ist eine, allein für den Künstler notwendige Handlung.

Bei Design hingegen, geht es um die Benutzung. Der Designer benötigt jemanden der das von ihm Erstellte benutzt (nicht nur anerkennt). Ohne Leute die es benutzen, erfüllt Design nicht seinen Zweck. Design hilft menschliche Probleme zu lösen. Die höchste Auszeichnung, die einem Design verliehen werden kann, ist nicht die, dass es schön ist, wie man es bei Kunst tun würde, sondern die, dass es gut zu benutzen ist.

Im Gegensatz zu Kunst ist Design immer kontextabhängig. Es spielt eine Rolle wann ein Design erstellt wurde aufgrund des Umfeldes seiner Benutzung: Welches Problem beabsichtigt es zu lösen? Und für wen? Zu welchem Zeitpunkt? Deshalb steht Design in einer so engen Beziehung mit Technologie. Da sich die Technologie schnell ändert, müssen das auch unsere Designs tun. Ein Design welches vor 10 Jahren funktioniert hat, ist es heute möglicherweise nicht einmal mehr Wert in Erwägung gezogen zu werden. Schaut man sich die Geschichte an, so kann man viele wunderbare Designs finden, die nicht länger notwendig sind.

Große Kunst hingegen, ist immer aktuell. Wir würdigen Michelangelo's David obwohl wir millionenfache Stückzahlen davon herstellen können, weil es die Mühe und der Ausdruck eines einzelnen Mannes war. Das wird niemals verblassen. Großes Design ist abhängig vom Zeitalter in dem es entstanden ist und vom damit zu lösendem Problem. Nicht aber Kunst. Kunst ist zeitlos.

Der Bewährungstest. Wenn Leute Gefallen an Kunst finden, dann sagen sie "Das gefällt mir." Wenn Leute Gefallen an Design finden, dann sagen sie "Das funktioniert gut". Das ist kein Zufall. Gutes Design ist etwas das gut funktioniert.

Das Erlebnis gehört dem Benutzer

Ein Designer kreiert keine Erlebnisse, er kreiert erlebbare Teilstücke. Diese feine Unterscheidung gibt der Sache ein ganz anderes Gesicht, da es den Designer in den Dienst des Kunden stellt und nicht anders herum. Das schließt keine Innovationen aus, es hält den Designer nicht davon ab über den Schatten von bereits bestehenden und bewährten Lösungen zu springen. Es heißt einfach, dass das Erleben eines Designs nicht einfach passiert weil der Designer es so will, es passiert sobald ein Benutzer es tatsächlich berichtet.

Das ultimative Erlebnis ist etwas das im Benutzer passiert, und es ist seins. Es gehört ihm.

Großartiges Design ist unsichtbar

Eine interessante Eigenschaft von großartigem Design ist, dass es als selbstverständlich angesehen wird. Es funktioniert so gut, dass wir vergessen, dass kreativer Aufwand betrieben wurde um es zu erstellen. Ein Löffel beispielsweise - das Objekt ist so simpel, dass es offensichtlich erscheint. Und wir übersehen dabei, dass es das zu einem früheren Zeitpunkt einmal nicht gewesen ist. Dann wiederum, wie bei einem Automobil, ist das Objekt so hochentwickelt und dennoch leicht zu benutzen, dass man nicht wahrnimmt, dass Millionen und Abermillionen von Arbeitsstunden nötig waren um zu diesem Punkt zu gelangen. Das ist eine Schande ... jedes großartige Design besitzt eine ereignisreiche Geschichte. Und hinter jedem Design stehen einer oder mehrere Designer die versuchten die Welt zu verbessern indem sie das eine oder andere Problem lösten.

Schlechtes Design ist offensichtlich, da es zu benutzen schmerzt. Es ist ungeschickt, kompliziert und komplex. Wie in einer Ironie des Schicksals ist schlechtes Design viel leichter zu erkennen als Gutes. Die Erkenntnis mag schwer fallen, aber aufgrund seines Erfolges ist großartiges Design oftmals unsichtbar.

Simplizität ist die absolute Vollkommenheit

Wie Antoine de Saint-Exupéry sagt: "Vollkommenheit entsteht offensichtlich nicht dann, wenn man nichts mehr hinzuzufügen hat, sondern wenn man nichts mehr wegnehmen kann". Simplizität ist ein schmaler Grat: zu wissen was man behalten und was man wegwerfen sollte ... es scheint wie Zauberei wenn es funktioniert, da keinerlei Komplexität zum Benutzer transportiert wird ... nur Simplizität. Das ist die höchste Vollendung für einen Designer.


Mittwoch, März 07, 2007

Aptana - JavaScript IDE



Bin eben über das auf Eclipse basierte "Aptana" gestolpert. Das ist eine WebDevelopment-IDE mit Fokus auf JavaScript.
Das was ich bisher gesehen habe ist überzeugend - besonders die Auto-Vervollständigung mit dazugehöriger Browser-Kompatibilitätsanzeige gefällt mir sehr gut und erleichtert einige Entwicklungsschritte ungemein.

Mittwoch, Januar 31, 2007

Video: Joe Hewitt demonstriert Firebug 1.0

Joe Hewitt gibt uns einen kurzen Überblick über einige der neuen Features in seiner Firefox-Erweiterung Firebug 1.0.
Neben einer Menger offensichtlicher Funktionen erklärt er auch wie man den "Profiler" effektiv benutzt um Javascript Performance zu messen oder "Conditional breakpoints" setzt.

Donnerstag, Oktober 26, 2006

JavaScript DOM - einfach mit "graft()"

Ich habe im verlinkten Artikel eine sehr nützliche Funktion gefunden um DOM-Elemente aus simplem JSON-Pseudo-HTML Code erstellen zu lassen - graft(). Damit kann man sich endlich diese nervigen Code-Wüsten sparen, die nötig sind um selbst die simpelsten HTML Elemente per JavaScript zu generieren.
Hier ein kleines Beispiel:

var tbl = document.createElement('table');
tbl.setAttribute("border",1);
tbl.setAttribute("cellpadding",0);
tbl.setAttribute("cellspacing",0);
var tr = document.createElement("tr");

var td = document.createElement("td");
td.setAttribute('valign','bottom');
td.appendChild(document.createTextNode("Graft()"));
tr.appendChild(td);

td = document.createElement("td");
td.appendChild(document.createTextNode("makes"));
tr.appendChild(td);

td = document.createElement("td");
td.appendChild(document.createTextNode("this"));
tr.appendChild(td);

td = document.createElement("td");
td.setAttribute('style','background-color:#ff0;');
td.appendChild(document.createTextNode("easier"));
em = document.createElement("em");
em.setAttribute('style','font-size:32px;');
em.appendChild(document.createTextNode(" to do.."));
td.appendChild(em);
tr.appendChild(td);

tbl.appendChild(tr);

document.getElementById("mycontentdiv").appendChild(tbl);

Alles das ist nötig um eine simple Tabelle mit einer einzigen Zeile zu erstellen. Nicht nur das es eine Menge Code ist, darüberhinaus ist es auch noch sehr unübersichtlich.
Um nun das gleiche mit der graft() Funktion zu erledigen muss man nur folgendes tun:


graft(document.getElementsByTagName("BODY")[0],
["table",
{border:1,cellpadding:0,cellspacing:0},
['tbody',
['tr',
['td',
{valign:'bottom'},
"Graft()"
],
['td',
"makes"
],
['td',
"this"
],
['td',
{style:{backgroundColor:'#ff0'}},
"easier",
["em",
{style:{fontSize:'32px'}},
" to do.."
]
]
]
]
]
);
Ist doch wesentlich übersichtlicher, und rein optisch auch näher an HTML.

Achja und hier ist übrigens die Funktion die das alles bewerkstelligt:


// from prototype.js - needed for extending the style object
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}

function graft(parent, t, doc) {

// Usage: graft( somenode, [ "I like ", ['em',
// { 'class':"stuff" },"stuff"], " oboy!"] )

doc = (doc || parent.ownerDocument || document);
var e;

if(t == undefined) {
throw console.log( "Can't graft an undefined value");
} else if(t.constructor == String) {
e = doc.createTextNode( t );
} else if(t.length == 0) {
e = doc.createElement( "span" );
e.setAttribute( "class", "fromEmptyLOL" );
} else {
for(var i = 0; i < t.length; i++) {
if( i == 0 && t[i].constructor == String ) {
var snared;
snared = t[i].match( /^([a-z][a-z0-9]*)\.([^\s\.]+)$/i );
if( snared ) {
e = doc.createElement( snared[1] );
e.setAttribute( 'class', snared[2] );
continue;
}
snared = t[i].match( /^([a-z][a-z0-9]*)$/i );
if( snared ) {
e = doc.createElement( snared[1] ); // but no class
continue;
}
// Otherwise:
e = doc.createElement( "span" );
e.setAttribute( "class", "namelessFromLOL" );
}
if( t[i] == undefined ) {
throw console.log("Can't graft an undefined value in a list!");
} else if( t[i].constructor == String || t[i].constructor == Array ) {
graft( e, t[i], doc );
} else if( t[i].constructor == Number ) {
graft( e, t[i].toString(), doc );
} else if( t[i].constructor == Object ) {
// hash's properties => element's attributes
for(var k in t[i]) {
// support for attaching closures to DOM objects
if(typeof(t[i][k])=='function'){
e[k] = t[i][k];
} else {
if (k == "class") {
e.className = t[i][k];
} else if (k == "style") {
Object.extend(e.style, t[i][k]);
} else {
e.setAttribute( k, t[i][k] );
}
}
}
} else {
throw console.log( "Object " + t[i] + " is inscrutable as an graft arglet." );
}
}
}
parent.appendChild( e );
return e; // return the topmost created node
}
Ich habe im Vergleich zur Urversion noch zwei kleine Fixes eingebaut bzgl. der "class" und "style" Attribute.

Viel Spaß damit!

Montag, Oktober 23, 2006

Internet Explorer 6 + 7 parallel

Da es M$ am Ende doch noch geschafft hat und ihren Firefox-Klon neuen Webbrowser zu veröffentlichen, gibt's nun noch einen Kollegen mehr wenn es um das Testen von Websites geht. Netterweise hat man das Highlander-Feature beibehalten - es kann immer nur eine IE Version auf einem System laufen.
Dagegen kann man aber was tun, und es ist sogar ziemlich unkompliziert.

Wie's geht erfährst du hier.

Wenn man danach den IE6 startet zeigt er interessanterweise die Versionsnummer des 7er an, aber davon nicht täuschen lassen - es sind noch alle Bugs vorhanden:



Weitere Tests findest du hier bei Position Is Everything.