Wenn schon eine GUI, dann doch bitte eine die nicht komplizierter ist als das HTML per Hand zu schreiben /:>

Ich frag mich, welche Gründe es gibt Typo3 zu benutzen. Für kleine einfache Seiten gibt es einfachere CMS und für größere Seiten mit speziellen Anforderungen gibt es Frameworks mit denen man diese ohne Overhead bauen kann.

Jedes CMS, das Lehrgänge braucht, hat sein Ziel verfehlt.

via Ludwig

Noch ein Generator für AJAX-Drehdinger. Diesmal in 3D, mit gutem Interface.

Hier ist mein HTML-Hex-Viewer als Rails-Helper. Er markiert die Bytes, wenn man mit der Maus drüberfährt und färbt optional verschiedene Codesegmente bunt ein (z.B. Header, Text und Data-Segmente einer EXE).

weiterlesen →

Guter Generator für die kleinen "Bitte warten"-Drehdinger.

Beim kopieren von Text aus der Wikipedia fiel mir auf, dass per display: none; versteckter Text trotzdem markiert und mitkopiert wird. Dort ists ein gutes Feature – hinter die Überschrift wird "aus Wikipedia, der freien Enzyklopädie" gepackt – aber oft nervts, wenn unsichtbares Zeug mitkopiert wird.

Firefox und IE machen das so, nur Safari/WebKit und Opera ignorieren versteckte Elemente. Beispiel:

Bitte markieren...

Versteckter Text. Wooo!

...und irgendwo reinkopieren. Z.B. hier:

<h1>Bitte markieren...</h1>
<p style="display: none;">Versteckter Text. Wooo!</p>
<h1>...und irgendwo reinkopieren. Z.B. hier:</h1>

Um das zu verhindern reicht es nicht, das Element einfach wegzuschieben:

<style type="text/css" media="screen">
  /* Bringt nix: */
  .hidden { 
      display: none;
      position: absolute;
      bottom: -1000px; /* Nach rechts unten aus dem */
      right: -1000px;  /* Browser schieben */
  }
</style>
<h1>Bitte markieren...</h1>
<p class="hidden">Versteckter Text</p>
<p>...und irgendwo reinkopieren. Z.B. hier:</p>

Es wird weiter mitkopiert... Beim markieren kommts also nicht auf die angezeigte Position im Browser sondern auf die Stelle im HTML-Code an.

Man könnte es komplett aus dem DOM löschen, aber dann würde man auch alle Events verlieren und könnte das Element danach nicht wieder sichtbar machen.

Besser ist es, wenn man nur den Inhalt löscht, damit es nix zum markieren gibt. Um ihn später wiederherstellen zu können, muss man ihn sich nur irgendwo merken. jQuery hat dazu die praktische data()-Methode, mit der man beliebige Daten an Elemente hängen kann:

$('div').data('mein key', 'meine tollen daten');
alert($('div').data('mein key')); // -> "meine tollen daten"

Das ganze als kleines jQuery-Plugin:

// Inhalt der Elemente merken, löschen und verstecken.
// So können sie nicht mehr markiert werden.
// Ersatz für hide()
$.fn.vanish = function(options) {
  $(this).data("hidden_content", $(this).html()).html("").hide();
}
// Inhalt wiederherstellen, Element anzeigen.
// Ersatz für show()
$.fn.appear = function(options) {
  $(this).html($(this).data("hidden_content")).removeData("hidden_content").show();
}

Aufruf:

$(function() {
  // Versteckt alle Elemente mit class = "hidden"
  $('.hidden').each(function(i) {
    $(this).vanish();
  })  
  // Zeigt sie nach Button-Click wieder an
  $('#show_data').click(function() {
    $('.hidden').each(function(i) {
      $(this).appear();
    })
  })          
})

Nun wird der versteckte Text nicht mitkopiert. Beispiel:

Bitte markieren...

Wirklich versteckter Text mit weiteren Elementen drin

...und irgendwo reinkopieren.

Auch wirklich versteckt

Show hidden data

<script type="text/javascript" charset="utf-8">
  
  // Inhalt der Elemente merken, löschen und verstecken.
  // So können sie nicht mehr markiert werden.
  // Ersatz für hide()
  $.fn.vanish = function(options) {
    $(this).data("hidden_content", $(this).html()).html("").hide();
  }

  // Inhalt wiederherstellen, Element anzeigen.
  // Ersatz für show()
  $.fn.appear = function(options) {
    $(this).html($(this).data("hidden_content")).removeData("hidden_content").show();
  }

  $(function() {

    // Am Anfang alle Elemente mit class="hidden" verstecken
    $('.hidden').each(function(i) {
      $(this).vanish();
    })  
    
    // Nach Button-Click wiederherstellen und anzeigen
    $('#show_data').click(function() {
      $('.hidden').each(function(i) {
        $(this).appear();
      })
    });
           
  });  

</script>
<h1>Bitte markieren...</h1>
<p class="hidden">
  Wirklich <b>verste<i>ck</i>ter</b> Text mit
  <em style="font-weight: bold;">weiteren Elementen drin</em>
</p>
<h1>...und irgendwo reinkopieren.</h1>
<p class="hidden">Auch wirklich versteckt</p>
<button id="show_data">Show hidden data</button><br />
<textarea rows="10" cols="60"></textarea>

Vielleicht eine Lösung für ein Problem, das nicht existiert, aber ich denke es ist nützlich für Seiten mit viel verstecktem Inhalt, der nur auf Klick erscheint und beim markieren/kopieren nicht stören soll.

Das hier war einer der vielen Entwürfe für die neue Robsite. Pixel-perfekt, schön blau, somit bemerkenswert grandios.
Dachte ich.
Bis mich der Hr. Gramberg darauf aufmerksam machte, dass die Seite doch sehr gedrückt und eng aussieht.
Er hatte leider recht. Somit nahm ich das schlichte Layout des Adminbereichs auch für die Front und warf den alten Entwurf weg.

Damit die 2 Wochen Arbeit nicht komplett für die Katz sind, veröffentliche ich die alte Seite nun als kleines Weihnachtsgeschenk.

Im Paket sind vier Versionen als Photoshop-Datei sowie die HTML-Umsetzung der letzten Version. Diese validiert, sieht gut aus in Firefox, Safari und Opera und zerbricht spektakulär im Internet Explorer, was aber gewollt ist

Das ganze ist zwar unfertig, es gibt kein Druck-Stylesheet, der Footer fehlt etc. aber vielleicht kann jemand was damit anfangen oder fühlt sich inspiriert.

Lizenz: (Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0).
Heißt, mach damit was du willst, solange du mir Credits gibst und das veränderte unter eine ähnlich freie Lizenz stellst. Das "robsite" im Logo muss natürlich geändert werden.

Download: Robsite-Entwurf - 1.1 MB

HTML-Version

Bis die vorgeschlagenen Änderungen in den Browsern ankommen, falls überhaupt, vergeht noch mehr Zeit als CSS 3 ohnehin schon braucht.

Here’s what we do need:

• DOM traversal, reference, and injection on the same order provided by jQuery. There’s a damned good reason why designers are flocking to jQuery.
• Programmatic variables, and basic Math

JavaScript/jQuery ist in der Tat ne gute Übergangslösung. Mit JS ist immer mehr möglich und das dank jQuery in allen modernen Browsern. Es gibt dagegen keine "CSS-Library", die gleiche Funktionalität auf verschiedenen Browsern garantiert.

Einige gute jQuery-Plugins, die ich benutzt hab:

• Tabellen sortieren
• LiveQuery
• AJAX Form Submit
• RESTful In-Place Editor
• Runde Ecken
• Text-Formen
• Parallax Scrolling
• mehr

Selbst den Internet Explorer kann man mit JS dazu prügeln, sich standardkonform zu verhalten: ie7-js