Webtech ’09 – Die Zukunft des Webs beginnt jetzt

Preview:

DESCRIPTION

 

Citation preview

Die Zukunft des Web beginnt jetzt | Martin Kliehm und Eric EggertEB RAUTS

Die Zukunft des Webs beginnt jetzt

Eric Eggert, @yatil, yatil.de

HTML5HyperText Markup Language?

W3C N WHAT WG“The WHATWG was founded by individuals of Apple, the Mozilla

Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the

W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these

organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.”

Retro:XHTML2 FAIL!

<!DOCTYPE html>

Semantik

<article><section><header><footer>

<nav><figure>

<audio>/<video><canvas><mark><time>

<meter>

<input type="*">

tel | search | urlemail | datetime

date | month | week time | datetime-local

number | range | color

Browser APIsHTML5 & !HTML5

JavaScript

Geolocation

Geolocationhttp://3liz.com/geolocation/

localStorage

localStoragehttp://people.w3.org/mike/localstorage.html

Orientation

CSS

+

+Borders & Boxes

+Borders & BoxesLaaaaaaaaaaaaangweilig!

@font-face

You’re reading Nice Web Type likes,a series of CSS @font-face examplesand typesetting advice. Follow. Try Bello and Proxima Nova Try Museo and Sans Try Graublau Sans with Lucida

Nice Web Type likes Museo and Sans • Check the footer for colophon and additional notes. Here’s how this page should look.

ALL ABOARDALL ABOARDTHE EXLJBRIS EXPRESS: MUSEO AND SANSTHE EXLJBRIS EXPRESS: MUSEO AND SANSFREIGHTAGE

Museo and Museo Sans are

available in several freights.

Er, weights. Use these to

your advantage by setting

display text in light weights

for even typographic color,

or heavier weights for pop.

ROLLING STOCK

Web layouts, like railroads,must oblige a hodgepodgeof constituent aesthetics.Our job is crud mitigation.Helvetica can understudyboth Museo and Sans, but itisnʼt a perfect choice.

COUPLING

Linking serif with sans can

be difficult, but typefaces

designed as siblings make

things much easier! Use

the free Museo Sans italic,

for instance, in your 500-

weight Museo. And more.

RAIL GAUGE

You might as well buy that

as-seen-on-TV locomotive

alarm clock at this point,

because there’s no hope of

graceful recovery from this

metaphor. Relax with your

hobo soup and read on…

Rail gauge is like leading, especially for Museo with its transitive pipelike serifs. The ideal distance between two lines of Museo

depends on factors like its typeset size and measure, of course, but you’ll find long lines of Museo set surprisingly well with

tight line-height, probably because individual words and letters connect well horizontally and keep the reader’s eye on track.

W R I T I N G W O R K W O R D S A B O U T C O N T A C T

N O V 1 1 , 2 0 0 9

N O V 1 1 , 2 0 0 9

What You See Is What You Mean

On Donald Knuth and when WYSIWYG transforms to WYSIWYM:

As opposed to industry-standard page layout programs that implement a “What YouSee Is What You Get” (WYSIWYG) paradigm, TeX produces “What You See Is WhatYou Mean” (WYSIWYM) by using plain text files and a semantic mark-up languagecompiled on-the-fly to produce final pages.

Then:

This is where the moral objection comes in. Once the typographic decisions have beenpassed over to software, then the information no longer is tied to any one specificform. The possibilities multiply.

Also:

Plato reminds us that the very tool used to create books — writing — may have placedus in this double bind for good, between remembering and forgetting, information onor off, from zero to one and back.

(I still think he just needed a thank you note.)

Composition in performance, the future

Robin Sloan asks, what if the magazine article of the future, the album ofthe future, and the novel of the future are all the same thing, live

RegisterRegister Sign in

The sample above uses real fonts in newer browsers.Bello Pro by Underware

This will change the wayyou design websites.Add a line of code to your pages andchoose from hundreds of fonts.Simple, bulletproof, standardscompliant, accessible, and totallylegal.

Feature Tour Try it for FreeTry it for Free

A snap to set upWe've worked hard tomake Typekit easy touse. Add and use fontsthe way you want to.

Try it for free

Fast and reliableYour fonts will beserved from a robustnetwork built withhundreds of serversworldwide.

How it works

All your favoritesWe're working withfoundries to bring thebest possible fonts foryour website.

Browse fonts

Feature Tour Pricing Browse Fonts About Typekit Blog Support

© Copyright 2009 Small Batch, Inc. Browse Fonts Support Terms & Conditions Contact Us Typekit on Twitter

LOG IN

JOIN US

BLOG

presents

No more bullshit. Join the revolution.

We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raiseour standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts.

Like any revolution, we aim to make progress, and we need help. If you want to be a part of this free, open-source typemovement, you should join us and contribute. If you have any questions about The League or the movement, get in touch.

READ OUR MANIFESTO

N E W F O N T S

OpenType

Transitions

Our master-classesand upcoming dates

For A Beautiful Web,yours to own onDVD

Master-classes andDVD reviews

Blogging on And AllThat Malarkey

Contact us about ForA Beautiful Web

Master-class workshops and DVDs that make learning the most up-to-date web design & development information creative.

Three new master-classes, yours to own on DVD

DESIGNING WITHMICROFORMATS

DESIGNING WITH CSS DESIGNING WEB ACCESSIBILITY

DankeFollow me: @yatil