46

Aloha editor contenteditable useable

  • View
    15.603

  • Download
    0

Embed Size (px)

DESCRIPTION

Writers see what they do when and where they do it. Developer can expect clean xHTML 5 code and a clear cross browser working event API for content editable.

Citation preview

Page 1: Aloha editor contenteditable useable
Page 2: Aloha editor contenteditable useable

content rocks

Page 3: Aloha editor contenteditable useable

there is a lot of content around

more than 200 billion content pages*

* http://royal.pingdom.com/2010/01/22/internet-2009-in-numbers/ says 234 million websites per 1000 pages per site

Page 4: Aloha editor contenteditable useable

content is text.

Page 5: Aloha editor contenteditable useable

and images and formatting... and more

Page 6: Aloha editor contenteditable useable

How are more than200 billion pages produced ?

Page 7: Aloha editor contenteditable useable

content production

Page 8: Aloha editor contenteditable useable

content formating

Page 9: Aloha editor contenteditable useable

...or worse

Page 10: Aloha editor contenteditable useable
Page 11: Aloha editor contenteditable useable
Page 12: Aloha editor contenteditable useable
Page 13: Aloha editor contenteditable useable

Wordpress 3.0what you see is what you realy get

Page 14: Aloha editor contenteditable useable

it’s not!

Page 15: Aloha editor contenteditable useable

is web content live editable?

Page 16: Aloha editor contenteditable useable

smart guy

Page 17: Aloha editor contenteditable useable
Page 18: Aloha editor contenteditable useable
Page 19: Aloha editor contenteditable useable

cool, browsers can do that!

Page 20: Aloha editor contenteditable useable

but what they actualy do

Page 21: Aloha editor contenteditable useable

We have a Vision

Page 22: Aloha editor contenteditable useable

No Markup!

Page 23: Aloha editor contenteditable useable

No reload!

Page 24: Aloha editor contenteditable useable

No iframe!

Page 25: Aloha editor contenteditable useable

No menu rubbish!

Page 26: Aloha editor contenteditable useable

No browser crap!

Page 27: Aloha editor contenteditable useable

just edit

Page 28: Aloha editor contenteditable useable

✓click and edit everywhere in the website✓see what you do when you do it✓drag & drop Images

just edit

the writer

Page 29: Aloha editor contenteditable useable

✓cross browser xHTML 5 Markup✓easy to integrate in any App✓edit floating text around non editables

just edit

the developer

and a lot more

Page 30: Aloha editor contenteditable useable
Page 31: Aloha editor contenteditable useable

Technologyrequirements for Aloha

■ defined formattings are stored in HTML Markup.

■ HTML5 (if browser does not support 4.01 compatible)

■ any produced content has to be xhtml1.1 compatible

■ Plugins do everything(!), the core is small

■ All characters and languages are supported

■ any state of the cursor or selection is defined

■ any function and the output are predictable

Page 32: Aloha editor contenteditable useable

content handlingCursor navigation and Selection

Navigation and selection as well as all formatting options should behave like the common office suites.. "MS Word shortcuts" Alle shortcuts have to be customizable and internationalizable.

Writing in paragraphes■ [Enter]

produces a paragraph (p)■ Shift+Enter

produces a line break (br)■ Strg+Enter

produces a line divider (hr)

FormattingsAll HTML Elements from HTML 5 Chapter. 4.5, 4.6, 4.7. The implementation has to be 'HTML 4.01' Kap. 9, 10, 12 compatible.

Formats■ Überschriften (h1-h6)■ feste Schriftbreite und unformatiert (pre)■ Titel einer Arbeit, Buch, Theater, etc. (cite)■ Zitatabsatz (blockquote)■ Zitatsatz (q)■ Kursiv (i)■ Fett (b)■ Abkürzungen (abbr)■ Programmcode (code)■ Hoch- und Tiefstellen (sub/sup)■ Durchgestrichen (span class=gtx-line-through)

ListsListen und Aufzählungen sollen wie bei Word funktionieren.■ Aufzählung (ol)■ Unsortiert (ul)

TablesGanz einfache Tabellen sollen machbar sein. (siehe mindmap)

Link (a)If you enter a link the Aloha recognizes the link and may suggest the user link name as teh title of the link target.

Page 33: Aloha editor contenteditable useable

content handlingCopy / Paste

In einem Fließtextfeld kann mittels Paste Inhalt eingefügt werden. Der eingefügt Inhalt soll so gut wie möglich verstanden und umgesetzt werden. Plugins sollen die Inhalte verarbeiten können. So soll z.B. eine kopierte Tabelle aus Excel automatisch als Tabelle eingefügt werden. Falls ein Link eingefügt wird soll ähnlich wie bei Facebook Zusatzinformationen angezeigt werden können.

An jeder Stelle sollen Blöcke kopiert werden können und an einer anderen beliebigen Stelle wieder eingefügt werden können.

Undo / RedoDurchgeführte Bearbeitungsschritte können Rückgängig gemacht werden. In diesem Zusammenhang ist zu prüfen, ob die browserseitigen Undo-Funktionalitäten alle Anwendungsfälle abdecken, die gewünscht werden. Insbesondere bei Bearbeitungsschritten, wie dem Verändern von Bildgrößen (also serverseitigem Resizing) kann es zu unvorhergesehenen Ergebnissen kommen, wenn ausschließlich die Undo-Funktion des Browsers verwendet wird.

Search and replaceDer Shortcut Strg + F (andere Möglichkeiten von Word checken, wie z.B. Strg + H) öffnet die Suchen & Ersetzen Panel im Sidebar, und setzt den Focus auf das Suchfeld. Mit der Enter-Taste wird die Suche abgesetzt, und das erste Suchergebnis markiert (Range). Mit jedem weiteren Druck auf die Enter-Taste oder den Suchen Button wird das nächste Vorkommen markiert. Die Suche verläuft über die aktive Textbox, und ist nicht verfügbar, wenn keine Textbox aktiviert ist.

Das Ersetzen-Feld ermöglicht einen Text zu definieren, gegen den der Suchbegriff ersetzt wird. Leertext ist erlaubt. Es gibt die Möglichkeit global oder schrittweise zu ersetzen.

Eine mögliche Ausbaustufe der Suchfunktion ist die Suche analog zu Safari/Chrome zu gestalten, also alle gefundenen Begriffe bei Absetzen der Suche zu markieren, den obersten besonders hervor zu heben, und bei weiterer Betätigung des Suchen-Buttons nachfolgend alle Ergebnisse durch besondere Hervorhebung zu kennzeichnen.

SpellingFür das Bearbeiten von Inhalten - egal ob im "Live"-Modus oder als Formular - können verpflichtende Blöcke definiert werden, die mit einer Regular Expression und dazu passender, internationalisierter Fehlermeldung versehen werden. Der Editor verhindert bei inkorrekt ausgefüllten Inhalten die Veröffentlichung des Inhaltes, und signalisiert den Fehler über die Message line.

Page 34: Aloha editor contenteditable useable

Design & function preview

Page 35: Aloha editor contenteditable useable
Page 36: Aloha editor contenteditable useable
Page 37: Aloha editor contenteditable useable
Page 38: Aloha editor contenteditable useable
Page 39: Aloha editor contenteditable useable
Page 40: Aloha editor contenteditable useable
Page 41: Aloha editor contenteditable useable
Page 42: Aloha editor contenteditable useable
Page 43: Aloha editor contenteditable useable
Page 44: Aloha editor contenteditable useable
Page 45: Aloha editor contenteditable useable
Page 46: Aloha editor contenteditable useable

Beta available soon

Thanks.http://twitter.com/draftkraft

http://gentics.com