SlideShare ist ein Scribd-Unternehmen logo
1 von 78
Downloaden Sie, um offline zu lesen
Am Ende ist doch alles
      HTML
   Aspekte der Frontendentwicklung

          Jens Grochtdreis
Jens Grochtdreis
‣ Frontendentwickler
‣ 10 Jahre Agenturerfahrung
‣ 11 Jahre Arbeit im und fürs Web
‣ Gründer der Webkrauts
‣ Blogger
‣ Autor des PHPMagazins, PHPUser,
 Webstandards-Magazins, T3N
‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT
Ebenen einer Webseite
          Javascript

            CSS

         (X)HTML

     PHP, Java, Perl usw.

       Datenbanken
Meta-Thema: Qualität




http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg
Schlechte Qualität sieht man




http://snipurl.com/vtoow
Schlechte Qualität sieht man




http://failblog.files.wordpress.com/2009/07/fail-owned-window-placement-fail.jpg
Schlechte Qualität sieht man




http://failblog.files.wordpress.com/2009/10/epic-fail-door-fail.jpg
Auch im Internet
Auch im Internet




http://stern.de
http://snurl.com/t58ch
Problemfeld: Entwickler
        ‣ Erschreckende Codedefizite laut Opera-Studie:
           ‣ 58,5% Webseiten ohne Überschriften-Elemente
           ‣ 7,1% mit Überschriften ohne logische
                  Reihenfolge
              ‣ 24,9% mit Bildern ohne alt-Attribute
              ‣ 4,13% der Testseiten validierten



http://www.einfach-fuer-alle.de/blog/id/2505/
Validität ist nicht alles
<form action="helpdesk.html" method="post" enctype="multipart/form-data" id="emailform">
    <table class="webform_table">
        <tr>
             <td class="webform_label">Name des Meldenden / Ansprechpartners: *</td>
             <td class="webform_field"><input type="text" name="InputField-1" value="" class="onlineform" /></td>
        </tr>

        <tr>
             <td class="webform_label">Email:*</td>
             <td class="webform_field"><input type="text" name="InputField-4" value="@khwe.de" class="onlineform" /></td>
        </tr>
        <tr>
             <td class="webform_label_multi">Bitte geben Sie hier Ihre Meldung ein:*</td>
             <td class="webform_field_multi"><textarea name="InputField-6" class="onlineform" rows="6" cols="20"></textarea></td>
        </tr>
        <tr>
             <td>&nbsp;</td>
             <td class="webform_button">Alle Eingabefelder, die mit einem Stern (*) versehen sind, sind Pflichtfelder.</td>
        </tr>
        <tr>
             <td>&nbsp;</td>
             <td class="webform_button"><input type="submit" value="Formular absenden" class="formbutton submitbutton" /></td>
        </tr>
    </table>
</form>
Manchmal nur Kleinigkeiten
Das Internet ist komplex
‣ Wir nutzen sehr viele verschiedene Standards und
 Technologien, um eine Website zu betreiben.
  ‣ (X)HTML, CSS, Javascript, DOM 1-3
  ‣ Flash, Flex, SWF
  ‣ PHP, ASP, Perl, Java
  ‣ MySQL, PostgreSQL
  ‣ XML, XSLT
  ‣ ...
Nicht vergessen!
‣ Das Internet ist ein neues Medium!
  ‣ junges Medium
  ‣ rasante Entwicklung
  ‣ spannend
  ‣ atemberaubend
  ‣ umwälzend
  ‣ in ständigem Wandel begriffen
Nicht vergessen!
‣ Das Internet bietet viele unterschiedliche Zugänge
 zu Informationen
  ‣ Am Monitor lesen
  ‣ Ausdrucken
  ‣ Vorlesen lassen
‣ Formate sind anpassbar
‣ Inhalte lassen sich leicht rudimentär übersetzen
‣ Wir wissen nichts Definitives über das Zielsystem
Kontrollverlust - formal
‣ Wie können wir heute ins Internet gehen?
  ‣ PC, Notebook
  ‣ viele Betriebssysteme, Browser, Monitore
  ‣ Handy, PDA
  ‣ Spielkonsole
  ‣ TV
  ‣ Assistive Technologien
Unsicherheiten
‣ Betriebssysteme     ‣ Umgebungslicht
‣ Browser             ‣ mobiler Zugriff
‣ Browserversionen    ‣ Zugriffsgeschwindigkeit
‣ Monitorauflösungen   ‣ Plugins
‣ Individuelle        ‣ Javascript
 Einrichtungen des
 Browsers
Flexibilität ist Stärke



               Die Flexibilität des Internet ist seine Stärke.
                    Akzeptiert es! Macht Euch locker!




http://snipurl.com/2c1yl
Flexibilität ist wichtig
‣ Wir können nicht mehr sicher vorhersagen, wie
  jemand unsere Seite sieht/liest.
‣ Deshalb: einen für möglichst viele gangbaren Weg
  beschreiten
‣ Erst der Inhalt, dann das Layout!
‣ Der Inhalt ist das Wichtigste!
Screenshot von einem EeePC, 800x480px
Wichtiger Hinweis
                                  Zur Nutzung der Vodafone
                                Videothek benötigen Sie einen
                                     Rechner mit Windows-
                                 Betriebssystem in Verbindung
                                mit Internet Explorer ab Version
                                  6 oder Firefox ab Version 3




http://videothek.vodafone.de/
http://snurl.com/t58fj
Semantik

‣ Mit der Bedeutung der Inhalte beschäftigen
‣ Die Struktur erfassen und aufschreiben
  ‣ richtig:
    <h2>Überschrift</h2>
  ‣ falsch:
    <div class="headline">Überschrift</div>
‣ Eine semantisch ausgezeichnete Seite zeigt,
  daß man sich Gedanken über seine Arbeit
  gemacht hat.
Webseiten: mehr als nur
    Dokumente
‣ Die Dokumentenanalogie ist alt.
‣ Ziel waren wissenschaftliche Texte.
‣ HTML5 ist der Versuch, der Realität gerecht
  zu werden. Der erste Schritt!
  ‣ Es gibt immer mehr Applikationen.
  ‣ Es fehlen Bedienelemente
  ‣ Webseiten sind immer seltener
    Dokumente
Fehlende Bedienelemente
HTML5-Formularelemente

Search:           <input   type="search">
URL:              <input   type="url">
Telephone:        <input   type="telephone">
Number:           <input   type="number">
Range:            <input   type="range">
Color:            <input   type="color">
Datetime Local:   <input   type="datetime-local">
Datetime:         <input   type="datetime">
Date:             <input   type="date">
Month:            <input   type="month">
Week:             <input   type="week">
Time:             <input   type="time">
Überschriften
_ Überschriften sind eine Navigationsmöglichkeit für
  Screenreader.
_ Wikis generieren aus den Textüberschriften eine
  seiteninterne Navigation, ein Inhaltsverzeichnis.
Überschriften
‣ Webseiten sind immer seltener Dokumente
‣ Kann eine Webseite mehr als eine h1
  vertragen?
‣ Nur eine h1? Warum?
  ‣ Wir vermeiden sonst Analogien zur
    Printwelt
  ‣ Struktur für Sehende und Blinde anders?
  ‣ Reichen sechs Überschriftsebenen?
Neue HTML5-Elemente
Kenne Dein (X)HTML!
‣ Wie sehen ungeordnete Listen aus?
‣ Wie sieht eine Überschrift dritten Grades
    aus?
‣   Wie sieht ein Zitat aus?
HTML ohne eigenes CSS
HTML ungestylt
browser.css




Safari4 (Mac)         Firefox 3.5 (Mac)
http://www.iecss.com/
Simpler Browser-Reset


<style type="text/css" media="screen">
    * {margin: 0; padding: 0; font-size: 100.01%; font-weight: normal;}
</style>
Yahoo-Reset
             html{color:#000;background:#FFF;}
             body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
             pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

             table{border-collapse:collapse;border-spacing:0;}
             fieldset,img{border:0;}
             address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}

             li{list-style:none;}
             caption,th{text-align:left;}
             h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

             q:before, q:after{content:'';}
             abbr, acronym{border:0;font-variant:normal;}
             sup{vertical-align:text-top;}
             sub{vertical-align:text-bottom;}

             input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
             input,textarea,select{*font-size:100%;}
             legend{color:#000;}




http://developer.yahoo.com/yui/3/cssreset/
Eric Meyers Reset
 /* v1.0 | 20080212 */

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
     vertical-align: baseline;background: transparent; }
 body { line-height: 1;}
 ol, ul { list-style: none;}
 blockquote, q { quotes: none;}
 blockquote:before, blockquote:after,
 q:before, q:after { content: ''; content: none;}

 /* remember to define focus styles! */
 :focus { outline: 0;}

 /* remember to highlight inserts somehow! */
 ins { text-decoration: none;}
 del { text-decoration: line-through;}

 /* tables still need 'cellspacing="0"' in the markup */
 table { border-collapse: collapse; border-spacing: 0;}




http://meyerweb.com/eric/tools/css/reset/index.html
Diverse Stylesheets
‣ HTML sieht nicht aus, sondern transportiert
    Bedeutung und Struktur!
‣   Browser haben eigene Stylesheets
‣   Nutzer können eigene Stylesheets haben
_ Letztendliche Sicherheit über die Darstellung einer
  Seite gibt es nicht. Man kann aber dafür sorgen, daß ein
  Layout nicht allzu schnell "zerstört" wird.
Keine Tabellen? Doch!
‣ Tabellen sind für tabellarische Daten da!
‣ Für Layoutzwecke gibt es CSS!
‣ Eine Tabelle kann komplex werden und ist
  mehr als nur <table>, <tr> und <td>
Keine Tabellen? Doch!
     <table summary="Table summary">
         <caption></caption>
         <thead>
              <tr>
                   <th></th>
                   <th></th>
                   <th></th>
              </tr>
         </thead>
         <tfoot>
              <tr>
                   <td></td>
                   <td></td>
                   <td></td>
              </tr>
         </tfoot>
         <tbody>
              <tr>
                   <td></td>
                   <td></td>
                   <td></td>
              </tr>
         </tbody>
     </table>
Sinn von Tabellen ...




http://bundesliga.de
Wen interessieren Browser?




http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
Bremsfaktor IE
‣ Der IE (bis Version 8) kann bedeutend
    weniger als andere Browser.
‣   Der IE6 stirbt nicht!
‣   Der Fortschritt richtet sich nach dem
    Langsamsten wegen dessen Verbreitung.
_Nur Entwickler interessieren sich
 für Browser.
http://snurl.com/t58bi
„Schweizer Messer“ für IE6
  ‣   position: relative
  ‣   zoom: 1
  ‣   height: 1%
  ‣   display: inline (bei Floats)
Der Frontendentwickler ist
     ein Übersetzer!
Übersetzer
‣ Der Nutzer sieht nur das Frontend.
‣ Die Technik dahinter (bspw. CMS)
    interessiert den Konsumenten nicht.
‣   Entscheidungen aller anderen „Gewerke“
    fließen in das Frontend mit ein.
‣   Hilfe zur Verständigung zwischen Grafik,
    Beratung und Backend aus Eigeninteresse.
Agenturalltag




http://vikiworks.com/2007/08/27/flat-panel-monitor-icon/
Beliebte Problemfälle
Layoutwünsche
‣ Nicht alle Layoutwünsche lassen sich einfach
    lösen.
‣   Manche erkauft man sich mit
    Einschränkungen
‣   Im Layout herrscht immernoch die
    Printanalogie vor
‣   Die Möglichkeiten differieren zwischen
    Browsern
Lösung: anders denken!
Gleich hohe Boxen




http://grochtdreis.de/
Mit einer Tabelle kein
      Problem!
Ohne Layouttabellen
‣ Die Elemente einer Seite haben keine
  Beziehung zueinander, es sei denn, es sind
  Kindelemente!
Gleich hohe Boxen
<!-- start: 3*33% Subcolumns -->
<h2>Aus meinem Weblog</h2>
<div id="teaser" class="subcolumns">
   <div class="c33l">
     <div class="subcl equalise eins">
        <h3><a href="toller-link.html">Überschrift</a></h3>
        <p>Kurzbeschreibung bzw. Anriss des Inhalts</p>
        <p class="weiter"><a href="#">Den ganzen Artikel lesen.</a></p>
     </div>
   </div>
   <div class="c33l">
     <div class="subc equalise zwei">
        <!-- wie oben -->
     </div>
   </div>
   <div class="c33r">
     <div class="subcr equalise drei">
        <!-- wie oben -->
     </div>
   </div>
</div>
<!-- end: 3*33% Subcolumns -->
Das DOM

                   div#teaser.subcolumns

                div.c33l   div.c33l   div.c33r

            div.subcl div.subc div.subcr

h3 p p.weiter         h3 p p.weiter          h3 p p.weiter
Gleich hohe Boxen
  moderne Browser
                 .equalize > div {       .equalize, .equalize .subcolumns {
                   display:table-cell;       overflow:visible;
                   float:none;               display:table;
                   margin:0;                 table-layout:fixed;
                   overflow:hidden;          }
                   vertical-align:top;
      IE6 und 7  }




http://yaml.de                            http://www.positioniseverything.net/articles/onetruelayout/equalheight
Gleich hohe Boxen
  moderne Browser
/* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0 */
  * html .equalize, * html .equalize .subcolumns { overflow:visible; display:block; }
  .equalize, .equalize .subcolumns { overflow:hidden; display:block; }

/* transform CSS tables back into floats */
  .equalize .c20l,.equalize .c40l,.equalize .c60l,.equalize    .c80l,

      IE6 und 7
  .equalize .c25l,.equalize .c33l,.equalize .c38l,.equalize
  .equalize .c62l,.equalize .c66l,.equalize .c75l {
                                                               .c50l,

    float:left; display:inline;
    padding-bottom:32767px;
    margin-bottom:-32767px;
  }
  .equalize .c20r,.equalize .c40r,.equalize .c60r,.equalize    .c80r,
  .equalize .c25r,.equalize .c33r,.equalize .c38r,.equalize    .c50r,
  .equalize .c62r,.equalize .c66r,.equalize .c75r {
    float:right; margin-left:-5px; display:inline;
    padding-bottom:32767px;
    margin-bottom:-32767px;
  }




http://yaml.de                                  http://www.positioniseverything.net/articles/onetruelayout/equalheight
Gleich hohe Boxen




http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
Formularfelder
‣ Passworte werden NIE
  angezeigt
‣ Runde Ecken kann man
  mittels CSS3 hinzufügen
‣ Vorgegebener Text ist
  Stolperfalle für Nutzer
  und Entwickler
‣ Label haben ihren Sinn!   Passwort

‣ Gerne sehr klein und
  schwer bedienbar
Runde Ecken




http://grochtdreis.de/
Zwei Welten:
IE und moderne Browser
Runde Ecken




http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Runde Ecken - The ThrashBox




http://www.vertexwerks.com/tests/sidebox/
Wartungshölle
‣ Für jede Farbe eine eigene Grafik (auch für
    hover bei Links!)
‣   Runde Ecken auf Verläufen oder
    Transparenzen sind ganz übel als Grafik
‣   Jede Änderung und Anpassung geschieht in
    Photoshop/Fireworks
‣   Viele Requests
‣   Keine Skalierung
Runde Ecken für moderne
       Browser
#twitter {
    border-radius: 0.6em;
    -moz-border-radius: 0.6em;
    -webkit-border-radius: 0.6em;
}

.box1, .box2, .adressbox {
    border: 2px solid #eee;
    border-radius: 0.6em;
    -moz-border-radius: 0.6em;
    -webkit-border-radius: 0.6em;
}

/* Ohne die folgende Zeile ragen die Ecken der Überschrift aus der Box raus.
    Der gleiche Radius darf es auch nicht sein, sonst entsteht eine Lücke.
    Es scheint immer die Hälfte sein zu müssen.
*/
.box1 h3, .box2 h3 {
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    -moz-border-radius-topleft: 0.3em;
    -moz-border-radius-topright: 0.3em;
    -webkit-border-top-left-radius: 0.3em;
    -webkit-border-top-right-radius: 0.3em;
}
Reiter
Reiter




http://github.com/ginader/Accessible-Tabs
Reiter (Tabs)
Reiter (Tabs)
<div class="tabs">
    <h2>eine Beispielüberschrift</h2>
    <div class="tabbody">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <h3>Lorem ipsum</h3>
        <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>
    </div>
    <h2>noch eine Beispielüberschrift</h2>
    <div class="tabbody">
        <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>
        <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>
    </div>
    <h2>alles andere</h2>
    <div class="tabbody">
        <p>Hier könnte Ihr Inhalt stehen</p>
    </div>
</div>


                $(document).ready(function(){
                    $('.tabs').accessibleTabs();
                });
http://snipurl.com/vtmpw
Jens Grochtdreis
                                                      http://grochtdreis.de
                                                    http://twitter.com/Flocke
                                                       http://webkrauts.de




Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/

Weitere ähnliche Inhalte

Was ist angesagt?

Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007jan_mindmatters
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Jens Grochtdreis
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrYves Hoppe
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 

Was ist angesagt? (7)

Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
XHTML
XHTMLXHTML
XHTML
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Findability
FindabilityFindability
Findability
 

Ähnlich wie Am Ende ist doch alles HTML (Uni Mainz)

HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend WorkshopNico Steiner
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)Michael Jendryschik
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenTomas Caspers
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenJens Grochtdreis
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftDigicomp Academy AG
 
Javascript done right
Javascript done rightJavascript done right
Javascript done rightDirk Ginader
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleGino Cremer
 
Onkopedia - Ein medizinisches Leitlinienportal auf dem Weg zu XML-basierten P...
Onkopedia - Ein medizinisches Leitlinienportal auf dem Weg zu XML-basierten P...Onkopedia - Ein medizinisches Leitlinienportal auf dem Weg zu XML-basierten P...
Onkopedia - Ein medizinisches Leitlinienportal auf dem Weg zu XML-basierten P...Andreas Jung
 

Ähnlich wie Am Ende ist doch alles HTML (Uni Mainz) (20)

HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
 
Onkopedia - Ein medizinisches Leitlinienportal auf dem Weg zu XML-basierten P...
Onkopedia - Ein medizinisches Leitlinienportal auf dem Weg zu XML-basierten P...Onkopedia - Ein medizinisches Leitlinienportal auf dem Weg zu XML-basierten P...
Onkopedia - Ein medizinisches Leitlinienportal auf dem Weg zu XML-basierten P...
 
HTML5
HTML5HTML5
HTML5
 

Mehr von Jens Grochtdreis

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowJens Grochtdreis
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Jens Grochtdreis
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Jens Grochtdreis
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenJens Grochtdreis
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CJens Grochtdreis
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine GemäldeJens Grochtdreis
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne WebentwicklungJens Grochtdreis
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungJens Grochtdreis
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag EditionJens Grochtdreis
 
Gute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenGute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenJens Grochtdreis
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes WebJens Grochtdreis
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Jens Grochtdreis
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine GemaeldeJens Grochtdreis
 

Mehr von Jens Grochtdreis (20)

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner Frontendentwicklung
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag Edition
 
Gute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenGute Seiten, schlechte Seiten
Gute Seiten, schlechte Seiten
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
 
Lightningtalk Erlangen
Lightningtalk ErlangenLightningtalk Erlangen
Lightningtalk Erlangen
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
 

Am Ende ist doch alles HTML (Uni Mainz)

  • 1. Am Ende ist doch alles HTML Aspekte der Frontendentwicklung Jens Grochtdreis
  • 2. Jens Grochtdreis ‣ Frontendentwickler ‣ 10 Jahre Agenturerfahrung ‣ 11 Jahre Arbeit im und fürs Web ‣ Gründer der Webkrauts ‣ Blogger ‣ Autor des PHPMagazins, PHPUser, Webstandards-Magazins, T3N ‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT
  • 3. Ebenen einer Webseite Javascript CSS (X)HTML PHP, Java, Perl usw. Datenbanken
  • 5. Schlechte Qualität sieht man http://snipurl.com/vtoow
  • 6. Schlechte Qualität sieht man http://failblog.files.wordpress.com/2009/07/fail-owned-window-placement-fail.jpg
  • 7. Schlechte Qualität sieht man http://failblog.files.wordpress.com/2009/10/epic-fail-door-fail.jpg
  • 11. Problemfeld: Entwickler ‣ Erschreckende Codedefizite laut Opera-Studie: ‣ 58,5% Webseiten ohne Überschriften-Elemente ‣ 7,1% mit Überschriften ohne logische Reihenfolge ‣ 24,9% mit Bildern ohne alt-Attribute ‣ 4,13% der Testseiten validierten http://www.einfach-fuer-alle.de/blog/id/2505/
  • 12. Validität ist nicht alles <form action="helpdesk.html" method="post" enctype="multipart/form-data" id="emailform"> <table class="webform_table"> <tr> <td class="webform_label">Name des Meldenden / Ansprechpartners: *</td> <td class="webform_field"><input type="text" name="InputField-1" value="" class="onlineform" /></td> </tr> <tr> <td class="webform_label">Email:*</td> <td class="webform_field"><input type="text" name="InputField-4" value="@khwe.de" class="onlineform" /></td> </tr> <tr> <td class="webform_label_multi">Bitte geben Sie hier Ihre Meldung ein:*</td> <td class="webform_field_multi"><textarea name="InputField-6" class="onlineform" rows="6" cols="20"></textarea></td> </tr> <tr> <td>&nbsp;</td> <td class="webform_button">Alle Eingabefelder, die mit einem Stern (*) versehen sind, sind Pflichtfelder.</td> </tr> <tr> <td>&nbsp;</td> <td class="webform_button"><input type="submit" value="Formular absenden" class="formbutton submitbutton" /></td> </tr> </table> </form>
  • 14. Das Internet ist komplex ‣ Wir nutzen sehr viele verschiedene Standards und Technologien, um eine Website zu betreiben. ‣ (X)HTML, CSS, Javascript, DOM 1-3 ‣ Flash, Flex, SWF ‣ PHP, ASP, Perl, Java ‣ MySQL, PostgreSQL ‣ XML, XSLT ‣ ...
  • 15. Nicht vergessen! ‣ Das Internet ist ein neues Medium! ‣ junges Medium ‣ rasante Entwicklung ‣ spannend ‣ atemberaubend ‣ umwälzend ‣ in ständigem Wandel begriffen
  • 16. Nicht vergessen! ‣ Das Internet bietet viele unterschiedliche Zugänge zu Informationen ‣ Am Monitor lesen ‣ Ausdrucken ‣ Vorlesen lassen ‣ Formate sind anpassbar ‣ Inhalte lassen sich leicht rudimentär übersetzen ‣ Wir wissen nichts Definitives über das Zielsystem
  • 17. Kontrollverlust - formal ‣ Wie können wir heute ins Internet gehen? ‣ PC, Notebook ‣ viele Betriebssysteme, Browser, Monitore ‣ Handy, PDA ‣ Spielkonsole ‣ TV ‣ Assistive Technologien
  • 18. Unsicherheiten ‣ Betriebssysteme ‣ Umgebungslicht ‣ Browser ‣ mobiler Zugriff ‣ Browserversionen ‣ Zugriffsgeschwindigkeit ‣ Monitorauflösungen ‣ Plugins ‣ Individuelle ‣ Javascript Einrichtungen des Browsers
  • 19. Flexibilität ist Stärke Die Flexibilität des Internet ist seine Stärke. Akzeptiert es! Macht Euch locker! http://snipurl.com/2c1yl
  • 20. Flexibilität ist wichtig ‣ Wir können nicht mehr sicher vorhersagen, wie jemand unsere Seite sieht/liest. ‣ Deshalb: einen für möglichst viele gangbaren Weg beschreiten ‣ Erst der Inhalt, dann das Layout! ‣ Der Inhalt ist das Wichtigste!
  • 21. Screenshot von einem EeePC, 800x480px
  • 22. Wichtiger Hinweis Zur Nutzung der Vodafone Videothek benötigen Sie einen Rechner mit Windows- Betriebssystem in Verbindung mit Internet Explorer ab Version 6 oder Firefox ab Version 3 http://videothek.vodafone.de/
  • 24. Semantik ‣ Mit der Bedeutung der Inhalte beschäftigen ‣ Die Struktur erfassen und aufschreiben ‣ richtig: <h2>Überschrift</h2> ‣ falsch: <div class="headline">Überschrift</div> ‣ Eine semantisch ausgezeichnete Seite zeigt, daß man sich Gedanken über seine Arbeit gemacht hat.
  • 25. Webseiten: mehr als nur Dokumente ‣ Die Dokumentenanalogie ist alt. ‣ Ziel waren wissenschaftliche Texte. ‣ HTML5 ist der Versuch, der Realität gerecht zu werden. Der erste Schritt! ‣ Es gibt immer mehr Applikationen. ‣ Es fehlen Bedienelemente ‣ Webseiten sind immer seltener Dokumente
  • 26.
  • 27.
  • 29. HTML5-Formularelemente Search: <input type="search"> URL: <input type="url"> Telephone: <input type="telephone"> Number: <input type="number"> Range: <input type="range"> Color: <input type="color"> Datetime Local: <input type="datetime-local"> Datetime: <input type="datetime"> Date: <input type="date"> Month: <input type="month"> Week: <input type="week"> Time: <input type="time">
  • 30. Überschriften _ Überschriften sind eine Navigationsmöglichkeit für Screenreader. _ Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis.
  • 31. Überschriften ‣ Webseiten sind immer seltener Dokumente ‣ Kann eine Webseite mehr als eine h1 vertragen? ‣ Nur eine h1? Warum? ‣ Wir vermeiden sonst Analogien zur Printwelt ‣ Struktur für Sehende und Blinde anders? ‣ Reichen sechs Überschriftsebenen?
  • 33. Kenne Dein (X)HTML! ‣ Wie sehen ungeordnete Listen aus? ‣ Wie sieht eine Überschrift dritten Grades aus? ‣ Wie sieht ein Zitat aus?
  • 36. browser.css Safari4 (Mac) Firefox 3.5 (Mac)
  • 38. Simpler Browser-Reset <style type="text/css" media="screen"> * {margin: 0; padding: 0; font-size: 100.01%; font-weight: normal;} </style>
  • 39. Yahoo-Reset html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before, q:after{content:'';} abbr, acronym{border:0;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{*font-size:100%;} legend{color:#000;} http://developer.yahoo.com/yui/3/cssreset/
  • 40. Eric Meyers Reset /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline;background: transparent; } body { line-height: 1;} ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} /* remember to define focus styles! */ :focus { outline: 0;} /* remember to highlight inserts somehow! */ ins { text-decoration: none;} del { text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0;} http://meyerweb.com/eric/tools/css/reset/index.html
  • 41. Diverse Stylesheets ‣ HTML sieht nicht aus, sondern transportiert Bedeutung und Struktur! ‣ Browser haben eigene Stylesheets ‣ Nutzer können eigene Stylesheets haben
  • 42. _ Letztendliche Sicherheit über die Darstellung einer Seite gibt es nicht. Man kann aber dafür sorgen, daß ein Layout nicht allzu schnell "zerstört" wird.
  • 43. Keine Tabellen? Doch! ‣ Tabellen sind für tabellarische Daten da! ‣ Für Layoutzwecke gibt es CSS! ‣ Eine Tabelle kann komplex werden und ist mehr als nur <table>, <tr> und <td>
  • 44. Keine Tabellen? Doch! <table summary="Table summary"> <caption></caption> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tfoot> <tr> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>
  • 45. Sinn von Tabellen ... http://bundesliga.de
  • 47. Bremsfaktor IE ‣ Der IE (bis Version 8) kann bedeutend weniger als andere Browser. ‣ Der IE6 stirbt nicht! ‣ Der Fortschritt richtet sich nach dem Langsamsten wegen dessen Verbreitung.
  • 48. _Nur Entwickler interessieren sich für Browser.
  • 50.
  • 51. „Schweizer Messer“ für IE6 ‣ position: relative ‣ zoom: 1 ‣ height: 1% ‣ display: inline (bei Floats)
  • 52. Der Frontendentwickler ist ein Übersetzer!
  • 53. Übersetzer ‣ Der Nutzer sieht nur das Frontend. ‣ Die Technik dahinter (bspw. CMS) interessiert den Konsumenten nicht. ‣ Entscheidungen aller anderen „Gewerke“ fließen in das Frontend mit ein. ‣ Hilfe zur Verständigung zwischen Grafik, Beratung und Backend aus Eigeninteresse.
  • 56. Layoutwünsche ‣ Nicht alle Layoutwünsche lassen sich einfach lösen. ‣ Manche erkauft man sich mit Einschränkungen ‣ Im Layout herrscht immernoch die Printanalogie vor ‣ Die Möglichkeiten differieren zwischen Browsern
  • 59. Mit einer Tabelle kein Problem!
  • 60. Ohne Layouttabellen ‣ Die Elemente einer Seite haben keine Beziehung zueinander, es sei denn, es sind Kindelemente!
  • 61. Gleich hohe Boxen <!-- start: 3*33% Subcolumns --> <h2>Aus meinem Weblog</h2> <div id="teaser" class="subcolumns"> <div class="c33l"> <div class="subcl equalise eins"> <h3><a href="toller-link.html">Überschrift</a></h3> <p>Kurzbeschreibung bzw. Anriss des Inhalts</p> <p class="weiter"><a href="#">Den ganzen Artikel lesen.</a></p> </div> </div> <div class="c33l"> <div class="subc equalise zwei"> <!-- wie oben --> </div> </div> <div class="c33r"> <div class="subcr equalise drei"> <!-- wie oben --> </div> </div> </div> <!-- end: 3*33% Subcolumns -->
  • 62. Das DOM div#teaser.subcolumns div.c33l div.c33l div.c33r div.subcl div.subc div.subcr h3 p p.weiter h3 p p.weiter h3 p p.weiter
  • 63. Gleich hohe Boxen moderne Browser .equalize > div { .equalize, .equalize .subcolumns { display:table-cell; overflow:visible; float:none; display:table; margin:0; table-layout:fixed; overflow:hidden; } vertical-align:top; IE6 und 7 } http://yaml.de http://www.positioniseverything.net/articles/onetruelayout/equalheight
  • 64. Gleich hohe Boxen moderne Browser /* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0 */ * html .equalize, * html .equalize .subcolumns { overflow:visible; display:block; } .equalize, .equalize .subcolumns { overflow:hidden; display:block; } /* transform CSS tables back into floats */ .equalize .c20l,.equalize .c40l,.equalize .c60l,.equalize .c80l, IE6 und 7 .equalize .c25l,.equalize .c33l,.equalize .c38l,.equalize .equalize .c62l,.equalize .c66l,.equalize .c75l { .c50l, float:left; display:inline; padding-bottom:32767px; margin-bottom:-32767px; } .equalize .c20r,.equalize .c40r,.equalize .c60r,.equalize .c80r, .equalize .c25r,.equalize .c33r,.equalize .c38r,.equalize .c50r, .equalize .c62r,.equalize .c66r,.equalize .c75r { float:right; margin-left:-5px; display:inline; padding-bottom:32767px; margin-bottom:-32767px; } http://yaml.de http://www.positioniseverything.net/articles/onetruelayout/equalheight
  • 66. Formularfelder ‣ Passworte werden NIE angezeigt ‣ Runde Ecken kann man mittels CSS3 hinzufügen ‣ Vorgegebener Text ist Stolperfalle für Nutzer und Entwickler ‣ Label haben ihren Sinn! Passwort ‣ Gerne sehr klein und schwer bedienbar
  • 68. Zwei Welten: IE und moderne Browser
  • 70. Runde Ecken - The ThrashBox http://www.vertexwerks.com/tests/sidebox/
  • 71. Wartungshölle ‣ Für jede Farbe eine eigene Grafik (auch für hover bei Links!) ‣ Runde Ecken auf Verläufen oder Transparenzen sind ganz übel als Grafik ‣ Jede Änderung und Anpassung geschieht in Photoshop/Fireworks ‣ Viele Requests ‣ Keine Skalierung
  • 72. Runde Ecken für moderne Browser #twitter { border-radius: 0.6em; -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; } .box1, .box2, .adressbox { border: 2px solid #eee; border-radius: 0.6em; -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; } /* Ohne die folgende Zeile ragen die Ecken der Überschrift aus der Box raus. Der gleiche Radius darf es auch nicht sein, sonst entsteht eine Lücke. Es scheint immer die Hälfte sein zu müssen. */ .box1 h3, .box2 h3 { border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; -moz-border-radius-topleft: 0.3em; -moz-border-radius-topright: 0.3em; -webkit-border-top-left-radius: 0.3em; -webkit-border-top-right-radius: 0.3em; }
  • 76. Reiter (Tabs) <div class="tabs"> <h2>eine Beispielüberschrift</h2> <div class="tabbody"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <h3>Lorem ipsum</h3> <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p> </div> <h2>noch eine Beispielüberschrift</h2> <div class="tabbody"> <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p> </div> <h2>alles andere</h2> <div class="tabbody"> <p>Hier könnte Ihr Inhalt stehen</p> </div> </div> $(document).ready(function(){ $('.tabs').accessibleTabs(); });
  • 78. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/