Saubere Technik für ein sauberes Netz - Kampf dem Spacerframe

howto:web:tec

und wie baut man so ein web?

 
Nicht nur um behinderten das Netz nutzbar zu machen, sondern auch auch aus ästhetischen Gründen ist Barrierefreies_Internet eines der wichtigsten Gebote. Sie spielt in der schnellen Darstellung, der maschinellen Indizierung (Suchmaschinen) die tragende Rolle.
Gutes Design ist wichtig, aber wirklich gutes Design ist auch barrierefrei. Wer Informationen in Bildern oder prosperitären großvolumigen Dateien versteckt, vergeht sich an der Ästethik.
Schminken ist ein Kunst, vor allem im Netz.

Handwerk

Webseiten sind grundsätzlich in offenen und freien Formaten zu schreiben. Die Betonung liegt auf selbst zu schreiben! Niemand will das gewurschtel aus irgendwelchen Wysiwig-Editoren sehen. Ordentliche Arbeit ist Handarbeit. Nichts gegen Contentmanagemntsysteme, darum geht es hier nicht. Denn auch diese brauchen templates udn die sind eben in Handarbeit ztu erstellen.

html & css

.html kombiniert mit howto:css steht für schnelle, sauberer vielschichtige Webseiten. How Many HTML Elements Can You Name in 5 Minutes?

Warum ist logisches html sinnvoll, warum soll man nicht für alles ein div nehmen und dann hin und her schieben. Mit den (wenigen) logischen html Elementen können die Maschinen einfach besser umgehen, so gibts viele Beispiele

  • eines der häufigsten Argumente für eine html Überschrift (h2) ist meistens die Lesbarkeit durch eine Suchmaschine, (auch wenn diese Tatsache auch wieder zu komischen Auswüchsen führt=
  • letztens hab ich festgestellt das mein Druckertreiber einen tablehead als solchen erkennt und den Spaltenkopf auf jede gedruckte Seite schreibt;)

 

JavaScript

Das Internet eine Dokumentensammlung. Punkt. Manchmal sind die Dokumente größer manchmal kleiner. Manchmal ein fliestext, manchmal eine Tabelle, manchmal eine CAD Zeichnung oder ein Diagramm. Eigentlich baut jede Internetseite auf einem Datenstamm auf. Das heißt nicht das ich es ablehne die dann dynamisch zu bearbeiten, sei es nur ein like sternerl ★ zu übermitteln (was bei einer veränderten Anzeige ★ streng genommen schon AJAX ist) oder gar die ganze Seite wie in einem wiki zu editieren, das macht alles sinn, wenn es an einem Dokument hängt.

Auch twitter, ein chat, eine shopsoftware, CRM, eine irgendwasüberpüfungssoftware, sind im Kern alles mit Dokumenten. Wirklich Ausnahmen sind sowas wie voip?, etc aber wer macht das schon im Browser?
Diese Dokumente solten man auch als solche darstellen, in html, wenn man dann daran was ändern will ist JS eine super Sache. Beispielsweise sollte bei einer slideshow der Inhalt schon im html auf der Site stehen und nicht erst durchs JS geladen werden müssen. Das hat imho den Vorteil das ich mich auf ein Inhaltsverwatlungssystem konzentrieren kann, z.B. ein CMS mit Markdown) und erst die Funktion ins JS auslagere. Der Fachbegriff für das alles ist Unobtrusive_JavaScript.

  • Hier sei jedem jQuery empfohlen, man kann wahnsinnig viel Funktion in eine Seite bringen ohne alles in JS kleben zu müssen
  • AnythingSlider nimmt Elemente die in einer Reihe stehen und macht sie so cool slidebar
  • galleriffic macht super schöne Gallerien mit/ohne thumbs, caption autoplay (wenn es den sein muss) aus html listen. Leider muss man den Listen und deren Punkte spezielle classes vergeben. Ich hab das mal so umgebaut das man die selbst konfigurieren kann. Einfach die Parameter {CODE}listContainerSel: 'ol', listThumbSel: 'a'{/CODE} mit konfigurieren ( in meinem Beispiel sind das die nummeriere Liste (ol und deren Listenpunkt (li).Die Angepasste Datei jquery.galleriffic.cascading.js und der request dazu.

 
Um JS-events von Seiten inspizieren zu können Visual Event 8wüsst ich jetzt nicht wie das der firebug kann)

Das wichtigste ist aber das man eine Seite am besten immer ohne JS anschauen könnne muss, sollen ja auch einige machen ;)

Multimedia

Niemand hat gesagt das sauberes Netz öde und fad sein muss, nein im Gegenteil, eine richtige Verwendung von Farben, Formen und Bewegung kann immens helfen. Für das Designkonzept ist es ratsam einen echten Desigener zu rate zu ziehen, denn nicht jeder der einen Kuhstall rausgeweiselt hat versteht was von Design. Nur bei der technischen Darstellung und darum geht es hier auf dieser Seite sind die Damen und Herren der Muse etwas verliebt.
Wenns um die Darstellung geht kann man die Tips das flash doch alles schöner macht gern in den Wind schiessen und dafür anständiges howto:dtp.
Für Bilder ist .jpg .gif oder .png zu empfehlen.

Persistenz

Persistenz ist so ein schönes Wort;) Aber bei aller der Frage nach rendereing, events und laufzeit. Es geht immer noch um Inhalte udn die müssen iwo gespecihetr werden

  • file
  • db
  • mails

 

Maschine

CMS oder Framework

html und JS zu verstehen ist wichtig, genauso wie ein Schreiner ein Stück Holz auch mit Hand Werkzeugen bearbeiten können muss.
Natürlich aber ist für vieles ein Content-Management-System eine strukturierte und arbeitserleichternde Anwendung.

Es ermöglicht vor allem den Inhalt (Texte erstellen, redigieren, kommentieren etc) von der Darstellung und der Funktion zu lösen. Was zwar nicht immer funktioniert und viele Enduser eben kein content einpflegen, aber könnten.

Ich selbst nutze inzwischen gern Wordpress, da die User schnell eigene normale Dokumente schreiben kann. So kann die klassiche Pressemitteilung, der Blogbeitrag, Stellen-Ausschreibung oder Newsletter aber auch die "statischere" Seite von der jeweiligen Fachperson geschrieben und veröffentlich werden. Ich kann mich dennoch ausenrum um Spezialitäten wie API-Anbindungen, Abhängikeiten etc kümmern.

Empfehlbar sind noch so Systeme MODx oder Drupal für speziellere Anwendung. Und im Im Endeffekt zählt aber nicht nur die reine Qualität, sondern eben auch die Verbreitung eines Systems, denn je mehr Entwickler sich auf eine Plattform einschießen, desto besser für den Kunden, weil er leichter gute Entwickler für sein laufendes Projekt findet...

Was soll ein CMS können

  • Inhalt
    • Einzelseiten (inkl Metaseiten, Systemseiten) und Listen (aus Kategorien)
    • in einfachen html ohne unnötige classen und divsuppen
    • eine vereinfachte Auszeichnungssprache am besten Markdown/Extra
  • urls organisieren, das bedeutet nicht viel, aber das bitte sauber: Clean_URL, eindeutige regelung ob upperUNDODERlowercase, sparsame Kategorisierung (von ich/urlaub/fotos/gross/ ist eher abzuraten, sinn macht das Date bei blogs) und natürlich Cool URIs dont change!
    • eine optionale Indexstruktur mit Tags oder Kategorien (keine aufzwingende)
  • und ein mindestens ein frontside editor (verwurschtelte adminbackends kann man sich sparen)
  • Zugriffsrechte
    • optional fremdusermanagement (OpenID)
  • Versionierung
  • rss (von mir aus auch so nen automatic twitterdingens) Nicht nur blogs leben von der Veränderung
  • redirect
  • Fehlerverwaltung (404 etc)
  • Suche (evtl extern)
  • Kommentare (evtl extern Disqus Comment System)
    • dann mit mit Spam Abwehr (CAPTCHA, dnsbl etc)

 
Ganz persönlich aber nutze ich am liebsten ein wiki?, ein Wiki folgt ganz dem dokumentenorientieretn Ansatz und dieser ist auch Anwenderen sehr einfach erklärbar. Wenn ein Anwender den editbutton und die Funktion für neue Seiten verstanden hat, hat er meistens alles was er braucht. (In Joomla müsste er erst das backend und darin den Menüpunkt und die 2-3 dazugehörigen Contents finden *dohhh*)
Für kleinere Webseiten gern Dokuwiki (z.B. barbarasailer.de, inicon.com), was den Vorteil hat keine Datenbank zu benötigen.
Für größere Webseiten aber auch gern Mediawiki (elta-rhine.de)

Interaktion

Wer auf einer Webseite nicht nurlesen willl, sodner auch eine bestimmeten Prozess durchlaufen will beginnt eine Interaktion (vulgo web2.0) mit dieser

  • Anmelden
  • Shops
  • Abstimmung (Polls oder doddle)

 
das kann natürlich auch durch Plugins erfüllt werden (wenn se sauber sind)

technisch:

  • API
  • saubere hooks für plugins
  • MVC unf so kram
  • theming
  • natives jquer (schon mal für fancyboxes und slideshows)
  • https
  • Export/Importe
  • Backup

 
Seltene Zusatzfunktonen, die man nicht unbedingt immer braucht

  • surveys
  • shops

 

Webserv{er|ice}

Zwar können die meisten CMS immer nicht nur Texte ausliefern sondern auch Bilder, Datein ausliefern und sogar verwalten, aber eben nicht alles CMS können alle Eigeneschaften. Oft ist es serh praktikabel sich eine Webanwendung aus verschiedenen Webservices zu kombinieren.


Was erwartet man von...

Dateien und Bilder

Bilder sind ja auch nur Dateien

Was würd ich mir von einem Dateiserver erwarten

  • der upload sollte einerseits über (httpinterface (evtl auch im Bulk, was derzet nur per flash möglichist) aber auch zusätzlich +ber Filetransferschnitstellen wie ftp oder ssh möglich sein (wenn man mal richtig viel hat)
  • Dateinamen wie Österreich im Herbst.jpg sollten automatisch auf eine URL lesbares und eventuell verändertes Format gebracht werden(z.B. 2011_oesterreich_im_herbst.jpg)
  • die Gesamte URL verkürzen können
  • sharding und syncing (homerechner, webfreigabe, handythumbs)

 
und was zusätzlich von einem Bilderserver

 

Qualität

Auf eine sauberer Einhaltung aller Seiten und css dateien ist zu achten. Das kann man natürlich einfach mit den Validierungstools des w3c.org überprüfen.

 
Weiter kann man sich mit browsershots.org screenshots mit den gängigsten browsern anzeigen lassen.

--

umija quick

Google Search