Elementy Semantycznego XHTML

Tłumaczenie Tobiasz Glazar

Tantek Çelik Chief Technologist
Creative Commons
"XHTML"
- Dzisiejsza sieć
- HTML 4 i "kompatybilny" XHTML 1.0
- Poprawny
"Semantyczny"
- Strict nie ~~Transitional~~
- ~~Layout oparty na tabelkach~~
- Unikanie <b> <br/> <i> <sub> <sup>
- <h1> != duży i pogrubiony
- <em> != kursywa
- <blockquote> != zrób wcięcie
- Aby dowiedzieć się więcej, zobacz:
  - Throwing Tables Out the Window — Bowman
  - Why tables for layout is stupid — Merikallio & Pratt
  - informIT: The Meaning of Semantics — Holzschlag
Dokładnie Semantyczny
- Goldilocks
- <div> i <span> osatnią deską ratunku
Elementy: prosta informacja kontakowa
- element <address>
- Prawdopodobnie najbardziej wprowadzająca w błąd nazwa elementu HTML:
  - NIE służy do opisania dosłownie adresu
- Ale do:
  - informacji kontaktowych dla dokumentu...
  - ...albo znaczej częsci dokumentu jak np. formularz.

Elementy: prosta informacja kontakowa

element <address>


<p>
 W przypadku problemów z tą stroną 
 proszę o kontakt pod adresem
          webmaster at example dot com
</p>

Elementy: prosta informacja kontakowa

element <address>


<p><div>
 W przypadku problemów z tą stroną 
 proszę o kontakt pod adresem
 <address>webmaster at example dot com</address>
</p></div>

Elementy: prosta informacja kontakowa

element <address>


<div>
 W przypadku problemów z tą stroną 
 proszę o kontakt pod adresem
 <address>webmaster at example dot com</address>
</div>

Elementy: Cytaty
- elementy <cite> & <blockquote>

Elementy: Cytaty

elementy <cite> & <blockquote>


<p>      Eric Meyer        napisał:</p>

                                                        <p>
 To co mnie zastanawia to to, że goście, którzy koncentrują
 się na pozytywach idą i robią coś; natomiast Ci, którzy
 koncentrują się na negatywnych rzeczach
 nie mają nic do zaoferowania poza narzekaniem.
</p>

<p>
Doskonale widać kontrast pomiędzy tymi, którzy chcą stworzyć
coś nowego a tymi, którzy chcą to zniszczyć.
</p>

Elementy: Cytaty

elementy <cite> & <blockquote>


<p><cite>Eric Meyer</cite> napisał:</p>

<blockquote>                                            <p>
 To co mnie zastanawia to to, że goście, którzy koncentrują
 się na pozytywach idą i robią coś; natomiast Ci, którzy
 koncentrują się na negatywnych rzeczach
 nie mają nic do zaoferowania poza narzekaniem.
</p></blockquote>

<p>
Doskonale widać kontrast pomiędzy tymi, którzy chcą stworzyć
coś nowego a tymi, którzy chcą to zniszczyć.
</p>

Elementy: Cytaty

elementy <cite> & <blockquote>


<p><cite>Eric Meyer</cite> napisał:</p>

<blockquote cite="http://meyerweb.../social-protocols/"><p>
 To co mnie zastanawia to to, że goście, którzy koncentrują
 się na pozytywach idą i robią coś; natomiast Ci, którzy
 koncentrują się na negatywnych rzeczach
 nie mają nic do zaoferowania poza narzekaniem.
</p></blockquote>

<p>
Doskonale widać kontrast pomiędzy tymi, którzy chcą stworzyć
coś nowego a tymi, którzy chcą to zniszczyć.
</p>

Elementy: Cytaty

elementy <cite> & <blockquote>


<p><cite>Eric Meyer</cite> napisał:</p>

<blockquote cite="http://meyerweb.../social-protocols/"><p>
 To co mnie zastanawia to to, że goście, którzy koncentrują
 się na pozytywach idą i robią coś; natomiast Ci, którzy
 koncentrują się na negatywnych rzeczach
 nie mają nic do zaoferowania poza narzekaniem.
</p></blockquote>

<p>
Doskonale widać kontrast pomiędzy tymi, którzy chcą stworzyć
coś nowego a tymi, którzy chcą to zniszczyć.
</p>

Elementy: Poprawki / Aktualizacje
- elementy <del> & <ins>

Elementy: Poprawki / Aktualizacje

elementy <del> & <ins>


<p> 
Robot korzysta z  
     radaru
(poprawka: kamery)
aby poruszać się po pokoju.</p>


<p>
Aktualizacja: Okazuje się,
że ma także mikrofon.
</p>

Elementy: Poprawki / Aktualizacje

elementy <del> & <ins>


<p> 
Robot korzysta z 
<del>radaru</del>
<ins>kamery</ins>
aby poruszać się po pokoju.</p>


<p><ins>
Aktualizacja: Okazuje się,
że ma także mikrofon.
</ins></p>

Elementy: Poprawki / Aktualizacje

elementy <del> & <ins>


<p> 
Robot korzysta z 
<del>radaru</del>
<ins>kamery</ins>
aby poruszać się po pokoju.</p>


<p><ins>
Aktualizacja: Okazuje się,
że ma także mikrofon.
</ins></p>

Elementy: Poprawki / Aktualizacje
- z kilkoma regułami stylu :
- ```
p ins,p del { display:inline }
ins { text-decoration:underline }
del { text-decoration:line-through }
```
- Robot korzysta z ~~radaru~~ kamery aby poruszać się po pokoju.
  
  Aktualizacja: Okazuje się, że ma także mikrofon.
Elementy: Semantyczne tabele

Guthrie MacFarlane

1.30pm Brett, John, David Roger

2.15pm Dean Lisa, Peter

Elementy: Semantyczne tabele

atrybuty 'axis' & 'headers'


<table>

 <tr><th></th>
     <th                        >Guthrie</th>
     <th                        >MacFarlane</th></tr>

 <tr><th                    >1.30pm</th>
     <td                >Brett, John, David</td>
     <td                >Roger</td></tr>

 <tr><th                    >2.15pm</th>
     <td                >Dean</td>     
     <td                >Lisa, Peter</td></tr>
	 
</table>

Elementy: Semantyczne tabele

atrybuty 'axis' & 'headers'
dodając 'id' i 'axis' do <th>


<table>

 <tr><th></th>
     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>

 <tr><th id="t1" axis="time">1.30pm</th>
     <td                >Brett, John, David</td>
     <td                >Roger</td></tr>

 <tr><th id="t2" axis="time">2.15pm</th>
     <td                >Dean</td>     
     <td                >Lisa, Peter</td></tr>
	 
</table>

Elementy: Semantyczne tabele

atrybuty 'axis' & 'headers'
dodając 'id' i 'axis' do <th>
oraz 'headers' do <td>


<table>

 <tr><th></th>
     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>

 <tr><th id="t1" axis="time">1.30pm</th>
     <td headers="gu t1">Brett, John, David</td>
     <td headers="mc t1">Roger</td></tr>

 <tr><th id="t2" axis="time">2.15pm</th>
     <td headers="gu t2">Dean</td>     
     <td headers="mc t2">Lisa, Peter</td></tr>
	 
</table>

Elementy: Semantyczne tabele

atrybuty 'axis' & 'headers'
dodając 'id' i 'axis' do <th>
oraz 'headers' do <td>


<table>

 <tr><th></th>
     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>

 <tr><th id="t1" axis="time">1.30pm</th>
     <td headers="gu t1">Brett, John, David</td>
     <td headers="mc t1">Roger</td></tr>

 <tr><th id="t2" axis="time">2.15pm</th>
     <td headers="gu t2">Dean</td>     
     <td headers="mc t2">Lisa, Peter</td></tr>

</table>

Elementy: Semantyczne tabele

z kilkoma regułami stylu :


#t1,td[headers~=t1] { background:yellow }
#mc,td[headers~=mc] { background:yellow }
td[headers~=t1][headers~=mc] { background:#ffA500 }

Elementy: Semantyczne tabele

z kilkoma regułami stylu :


#t1,td[headers~=t1] { background:yellow }
#mc,td[headers~=mc] { background:yellow }
td[headers~=t1][headers~=mc] { background:#ffA500 }

	Guthrie	MacFarlane
1.30pm	Brett, John, David	Roger
2.15pm	Dean	Lisa, Peter

Elementy: Semantyczne tabele

Podsumowanie: atrybuty 'axis' & 'headers':
- tworzą semantyczne tabele bardziej semantyczne
- umożliwiają ostylowanie semantycznych wierszy/kolumn
- są bardziej dostępne. zobacz:
  - HTML Techniques for WCAG 1.0
  - Facts and Opinions About PDF Accessibility dokumentacja Joe Clarka dotycząca czytników ekranu
- umożliwiają używanie dodatkowej semantyki...
Check out the "Microformats Evolution" presentation for more uses of axis and headers.
Kombinacje (złożenia) XHTML
- Ograniczony zestaw semantycznych elementów i atrybutów XHTMLa
- Wzorce elementów mogą wyrażać dodaktową semantykę
  - składane jak semantyczne "klocki LEGO"
  - wiele kombinacji pozostaje do odkrycia
- Nazwy tych semantycznych wzorców
  - ludzie pytali
  - analogia do chemii: elementy i związki
- Definicja w użyciu:
  Kombinacja (złożenie) XHTML
  
  Dwa albo więcej elementów XHTMLa użytych razem aby określić, może bardziej specyficzną, semantykę.
Kombinacje: bloki kodu
- białe znaki są ważne
  - używaj elementu <pre>
- treść jest kodem
  - używaj elementu <code>

Kombinacje: bloki kodu

<pre> i <code> razem


<p>
Ostyluj "address" tak, żeby był elementem liniowym i niepogrubionym:
</p>
<p>
address { 
 display:inline;
 font-style:normal;
}
</p>

Kombinacje: bloki kodu

<pre> i <code> razem


<p>
Ostyluj "address" tak, żeby był elementem liniowym i niepogrubionym:
</p>
<p><pre><code>
address { 
 display:inline;
 font-style:normal;
}
</p></code></pre>

Kombinacje: bloki kodu

<pre> and <code> combined


<p>
Ostyluj "address" tak, żeby był elementem liniowym i niepogrubionym:
</p>
<pre><code>
address { 
 display:inline;
 font-style:normal;
}
</code></pre>

Kombinacje: lista dialogowa


          Costello
               Well then who's on first?
          Abbott
               Yes.
          Costello
               I mean the fellow's name.
          Abbott
               Who.
          Costello
               The guy on first.
          Abbott
               Who.

Kombinacje: lista dialogowa

<dl>
      <dt>Costello</dt>
           <dd>Well then who's on first?</dd>
      <dt>Abbott</dt>
           <dd>Yes.</dd>
      <dt>Costello</dt>
           <dd>I mean the fellow's name.</dd>
      <dt>Abbott</dt>
           <dd>Who.</dd>
      <dt>Costello</dt>
           <dd>The guy on first.</dd>
      <dt>Abbott</dt>
           <dd>Who.</dd>
</dl>

Nadużycie! Lista definicji (dl) to termin (dt) i definicja (dd)
Ale dialog to mowiący i cytaty

Kombinacje: lista dialogowa


          Costello
               Well then who's on first?
          Abbott
               Yes.
          Costello
               I mean the fellow's name.
          Abbott
               Who.
          Costello
               The guy on first.
          Abbott
               Who.

Kombinacje: lista dialogowa


    <cite>Costello</cite>
               Well then who's on first?
    <cite>Abbott</cite>
               Yes.
    <cite>Costello</cite>
               I mean the fellow's name.
    <cite>Abbott</cite>
               Who.
    <cite>Costello</cite>
               The guy on first.
    <cite>Abbott</cite>
               Who.

Kombinacje: lista dialogowa


    <cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote>
    <cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote>
    <cite>Costello</cite>
<blockquote><p>I mean the fellow's name.</p></blockquote>
    <cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>
    <cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote>
    <cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>

Kombinacje: lista dialogowa

<ol>
<li><cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>I mean the fellow's name.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
</ol>

Kombinacje: lista dialogowa

<ol>
<li><cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>I mean the fellow's name.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
</ol>

Kombinacje: bibliografia
- Bibliografia to:
- lista uporządakowana alfabetycznie...
  - używaj <ol> i <li>
- ... albo cytaty
  - używaj <cite>

Kombinacje: bibliografia

<ol><li> i <cite> razem




  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
  
  
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
  
  
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998

Kombinacje: bibliografia

<ol><li> i <cite> razem


	
     <cite>
  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite>
     <cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite> 
     <cite>
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite>

Kombinacje: bibliografia

<ol><li> i <cite> razem


<ol class="bibliography">
 <li><cite>
  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite></li>
</ol>

Kombinacje: bibliografia

<ol><li> i <cite> razem


<ol class="bibliography">
 <li><cite>
  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite></li>
</ol>

Kombinacje: bibliografia
- z kilkoma regułami stylu:
- ```
ol.bibliography { list-style:none }
.bibliography li { text-indent:-2em }
```
- 1. "Colorimetry, Second Edition", CIE Pub. 15.2-1986, ISBN 3-900-734-00-3.
  2. "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 17 December 1996.
  3. "Cascading Style Sheets, level 2, CSS2 Specification", B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
Kombinacje: bibliografia
- Ograniczenia w przykładzie bibliografii
- Do ostylowania potrzebne są klasy — kontekst nie jest wystarczający
- Cytaty mają bardziej rozbudowaną strukturę niż <cite>
  - tytuł, autor, data
  - XHTML nie posiada takich elementów
Semantyczne nazwy klas
- Kiedy semantyczne elementy XHTML nie wystarczają
  - spróbuj użyć złożeń XHTML
- Kiedy kombinacje XHTMLa nie wystarczają
  - używaj semantycznych nazwa dla klas
Semantyczne nazwy klas: ATOC

Sprawy kluczowe:
- Szczegółowość klas
  - uzupełnienie semantyki, np. podklasy elementów XHTML
- Kontekst ważniejszy niż klasa
- Pisownia
  - używaj małych liter z myślnikami zamiast notacjiWielbłądziej (camelCase), np. moja-klasa zamiast mojaKlasa
- Nazwy semantyczne zamiast prezentacyjnych
- aby dowiedzieć się więcej, zobacz:
Bardziej Semantyczny XHTML
- Zrozumieć Elementy
- Ucz się z dyskusji o kombinacjach XHTMLa:
  - Web Standards Solutions, SimpleQuizzes by Cederholm
  - Usual suspects: Bowman, Holzschlag, Meyer, Shea, Zeldman, etc.
  - See Technorati Blog Directory: XHTML for many more.
- Experymentuj ze swoimi, nowymi kombinacjami
- Rozmawiaj z innymi
- Ucz się od innych semantycznych nazw dla swoich klas
Dzięki!
Dzięki!

Tłumaczenie: http://www.glazar.info
Colophon
- XHTML
- CSS
- S5 v1.1xoxo
- XOXO
- hCard
- hCalendar
- rel="license"
- Some rights reserved. CC by-2.0

Elementy Semantycznego XHTML

WebEssentials05 • September 29, 2005

Elementy Semantycznego XHTML

Creative Commons

"XHTML"

"Semantyczny"

Dokładnie Semantyczny

Elementy: prosta informacja kontakowa

Elementy: prosta informacja kontakowa

Elementy: prosta informacja kontakowa

Elementy: prosta informacja kontakowa

Elementy: Cytaty

Elementy: Cytaty

Elementy: Cytaty

Elementy: Cytaty

Elementy: Cytaty

Elementy: Poprawki / Aktualizacje

Elementy: Poprawki / Aktualizacje

Elementy: Poprawki / Aktualizacje

Elementy: Poprawki / Aktualizacje

Elementy: Poprawki / Aktualizacje

Elementy: Semantyczne tabele

Elementy: Semantyczne tabele

Elementy: Semantyczne tabele

Elementy: Semantyczne tabele

Elementy: Semantyczne tabele

Elementy: Semantyczne tabele

Elementy: Semantyczne tabele

Elementy: Semantyczne tabele

Podsumowanie: atrybuty 'axis' & 'headers':

Kombinacje (złożenia) XHTML

Kombinacje: bloki kodu

Kombinacje: bloki kodu

Kombinacje: bloki kodu

Kombinacje: bloki kodu

Kombinacje: lista dialogowa

Kombinacje: lista dialogowa

Kombinacje: lista dialogowa

Kombinacje: lista dialogowa

Kombinacje: lista dialogowa

Kombinacje: lista dialogowa

Kombinacje: lista dialogowa

Kombinacje: bibliografia

Kombinacje: bibliografia

Kombinacje: bibliografia

Kombinacje: bibliografia

Kombinacje: bibliografia

Kombinacje: bibliografia

Kombinacje: bibliografia

Semantyczne nazwy klas

Semantyczne nazwy klas: ATOC

Sprawy kluczowe:

Bardziej Semantyczny XHTML

Dzięki!

Dzięki!

Colophon