Вучэбны дапаможнік: Прыклад з HTML5 + CSS3
Тэгі
У мінулым месяцы я зрабіў даклад на Кампус партыі, адным з найбуйнейшых тэхналогіі сусветныя падзеі, казаць аб Феерверк, HTML5 і CSS3. Было вельмі прыемна, ўспрымальнасць аўдыторыі было сенсацыйным, і думаючы, што многія з вас хацелі б таксама, каб убачыць змесціва майстэрні, таму вырашыў напісаць поўнае даследаванне справы і падзяліцца тут на блогу.
Многія людзі пытаюць мяне аб рэальных магчымасцяў, каб пачаць выкарыстоўваць HTML5 і CSS3 сёння, і я ўпэўнены, мы павінны даследаваць усё лепшае, што вэб-дае нам мэта пастаянна ўдасканальвае карыстацкі досвед. Можа быць, мы не можам дасягнуць 100% карыстачоў, так Ёсць яшчэ некаторыя браўзэры, якія не падтрымліваюць большасць з гэтых новых функцый (мы ведаем, які браўзэр я кажу, праўда?). Але я лічу, што праца для таго, каб законнасць ўтрымання і навігацыі да 100% карыстачоў, чаму б не зрабіць яго яшчэ больш лёгкім і прыемным прагляд для шматлікіх карыстачоў, якія выкарыстаюць браўзэры, якія дазваляюць гэта?
Мая асноўная бібліяграфія для дадзенага даследавання былі дзве кнігі: HTML5 для вэб-дызайнераў і CSS3 для вэб-дызайнераў. Вызначана варта чытаць!
Папярэдні прагляд пра шаблон - запампаваць
* Гэты шаблон будзе лепш за ўсё праглядаць у браўзэрах Webkit, як Safari і Chrome.
Размяшчэнне
Для пачатку нашага прыкладу, я стварыў просты макет, але дзе ён мог бы ўжыць розныя канцэпцыі CSS3 і да гэтага часу збіраюць структуры з дапамогай HTML5, выкарыстоўваючы асноўныя змены, якія адбыліся на яго семантычныя. Макет, які мы будзем будаваць ніжэй:
З гэтага макета мы падзелім яго на базавую структуру з асноўнымі напрамкамі, якія зробяць наш HTML.
HTML5
Валодаючы ўсімі асноўная схема поўнай, структура ў галаве і малюнкі ўжо былі экспартаваныя, мы пачнем збіраць наш HTML. Тут мы можам заўважыць некаторыя адрозненні, нават спрашчэнняў у параўнанні з XHTML 1.0. Паглядзіце, як лёгка было ўпрыгожыць сырам сайтаў, або сказаць мне, што ты ведаў на памяць усё, што павінна ўтрымлівацца ў DOCTYPE, напрыклад?
У нас ёсць яшчэ адна рэч, каб прыцягнуць увагу тут, гэты сцэнар. На самай справе гэта робіць, што нашы новыя элементы будуць адлюстроўвацца ў браўзэрах, якія яшчэ не падтрымліваюць HTML5.
<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
</body>
</html>
Паколькі аснову сайтаў рыхтаваліся мы пачынаем нашу ўставіць элемент. Пачынаючы з загалоўка навіны тут цалкам зразумела, так як элементы <загаловак> і <профіль>. Каб не быць доўгі пост я не буду ўдавацца ў вартасцях усё новыя тэгі і абслугоўвання кожнага з іх, але Ёсць вельмі добрая дакументацыя ў сеткі Інтэрнэт, у тым ліку дзве кнігі, якія я згадаў у пачатку паста.
<header id="main-header">
<section id="block-twitter">
<p class="tweet-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<span class="tweet-time">21 minutes ago via Twitter</span></p>
</section>
<section id="block-title">
<h1>Ferris Bueller</h1>
</section>
</header>
У загалоўку зроблена, мы павінны ісці на ўтрыманне. У левай калонцы мы маем вельмі важны элемент казаць пра гэта, з'яўляюцца формамі. Ён мае даволі халаднавата рэч пра іх у HTML5, выкарыстоўваючы атрыбуты "запаўняльнік", "тып" і "аўтафокус". Пагуляйце зь імі, і калі вы хочаце прачытаць трохі больш, у гэтай вялікай артыкуле на 24ways.org.
<div id="main-content"> <section id="content">
<section class="one-col"> <h3>Hey guys,</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section>
<section class="two-col"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p> <ul id="social-icons"> <li class="bt-twitter"><a href="#">Twitter</a></li> <li class="bt-facebook"><a href="#">Facebook</a></li> <li class="bt-linkedin"><a href="#">Linkedin</a></li> </ul> </section>
<section class="one-col"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section>
<aside id="form"> <form action="template_submit" method="get"> <input id="name" name="name" type="text" class="textfield nome" placeholder="Escreva seu nome" > <input id="email" name="email" type="text" class="textfield email" placeholder="Email"> <textarea id="message" name="message" type="textarea" placeholder="Mensagem"></textarea> <input type="submit" value="Enviar" class="submit"> </form> </aside> </section>
У правай калонцы, у нас ёсць партфель. Вось навінкі <лічба> і <відэа>. Відэа і аўдыё цяпер лёгка ўстаўляюцца ў HTML без неабходнасці, каб ўстаўляць флэш для прыкладу. Кожны браўзэр мае (ці будзе) свой плэер, і з аднаго радка кода ў нас працуе наша відэа! Вядома, для браўзэраў, якія не падтрымліваюць яшчэ, ну, проста ўстаўце выбліск ўстаўляць і ён гатовы, усе карыстачы пацярпелых!
<section id="portfolio">
<figure>
<a href="#" class="link-thumbs"><img src="images/thumb-1.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-2.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-3.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-4.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-5.png" alt="Nome do projeto"></a>
<a href="#" class="link-thumbs"><img src="images/thumb-6.png" alt="Nome do projeto"></a>
</figure>
<video controls width="380" height="210" poster="images/placeholder.jpg">
<source src="video/video-1.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" width="380" height="268" data="player.swf?file=video/video-1.mp4">
<param name="movie" value="player.swf?file=video/video-1.mp4">
</object>
</video>
</section>
</div>
І, нарэшце, новы тэг <ніжні калантытула>. Без асаблівых навіны тут!
<footer> <p>Design by Fabiano Meneghetti<br/> 2011 - Oficina Campus Party</p> </footer>
Aqui ды пра версіі аб Que temos елі агоры.
CSS3
З HTML гатовы, мы пачнем наш CSS. У гэтай карціне я паказваю ключавыя асаблівасці CSS3, што мы будзем тэставаць тут.
Для пачатку нашай CSS я заўсёды хацеў выкарыстаць reset.css, запампаваць шаблон, і вы можаце прааналізаваць яго крыху лепш. Акрамя таго, мы павінны ўключыць нашы новыя элементы HTML5, як дысплей: блок, так што мы дасягнем ўсіх браўзэрах, нават тыя, якія не падтрымліваюць HTML5.
@import url("reset.css");
/* New HTML5 elements */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
/* -------- */
Well, now it's time to put the hand in the CSS, here are only the main elements that form the basis for our site.
body {
margin: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 13px;
line-height: 20px;
color: #5F5E59;
background: url(images/bg_body.jpg) left top repeat;
}
a:link, a:active, a:visited {
color: #305F9B;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
/* ID's */
header {
background: url(images/bg_header.jpg) left top repeat-x;
margin-bottom: 25px;
}
#block-twitter {
width: 700px;
height: 60px;
position: relative;
margin: 0 auto;
padding: 20px 200px 0 0;
}
#block-title {
width: 900px;
height: 80px;
position: relative;
margin: 0 auto;
padding-top: 25px;
}
#main-content {
width: 900px;
position: relative;
margin: 0 auto;
}
footer {
width: 900px;
position: relative;
margin: 0 auto;
clear: both;
padding: 30px 0;
background: url(images/img_star.png) left top repeat-x;
}
/* -------- */
Што ж, цяпер прыйшоў час, каб пакласці руку ў CSS, вось толькі асноўныя элементы, якія фарміруюць аснову для нашага сайта.
/* Header */
#block-twitter p.tweet-text {
color: #FFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 14px;
text-shadow: 0 -1px 0 #000;
}
#block-twitter span.tweet-time {
color: #E3BACA;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 12px;
text-shadow: 0 -1px 0 #000;
padding-left: 6px;
}
header h1 {
width: 454px;
height: 53px;
background: url(images/img_ferris.png) left top no-repeat;
text-indent: -9000px;
margin: 0 auto;
}
/* -------- */
/* Text */
section#content {
width: 400px;
float: left;
text-shadow: 0 1px 0 #FFF;
padding-bottom: 40px;
}
section#content h3 {
margin-bottom: 15px;
color: #949691;
font-size: 18px;
font-weight: bold;
}
section#content p {
margin-bottom: 15px;
}
section#content section.two-col {
-moz-column-count: 2;
-moz-column-gap: 40px;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
column-count: 2;
column-gap: 40px;
padding-bottom: 20px;
}
section#content section.two-col p {
font-size: 20px;
line-height: 28px;
}
ul#social-icons {
border-top: 2px dashed #AAA19F;
width: 180px;
height: 55px;
padding-top: 20px;
}
ul#social-icons li,
ul#social-icons li a {
width: 60px;
height: 55px;
float: left;
display: block;
text-indent: -9000px;
}
ul#social-icons li a:link,
ul#social-icons li a:active,
ul#social-icons li a:visited{
-webkit-transition: background 0.3s ease-out;
}
#social-icons li.bt-twitter a {
background: url(images/social_icons.png) 2px top no-repeat;
}
#social-icons li.bt-twitter a:hover {
background: url(images/social_icons.png) 2px -56px no-repeat;
}
#social-icons li.bt-facebook a {
background: url(images/social_icons.png) -59px top no-repeat;
}
#social-icons li.bt-facebook a:hover {
background: url(images/social_icons.png) -59px -58px no-repeat;
}
#social-icons li.bt-linkedin a {
background: url(images/social_icons.png) -121px top no-repeat;
}
#social-icons li.bt-linkedin a:hover {
background: url(images/social_icons.png) -121px -57px no-repeat;
}
/* -------- */
Навіны CSS пачаць тут. Адзначым, што ў тэкстах, якія мы ўжо выкарыстоўваем такія элементы, як калонкі падліку і слупкоў разрыў, для тэкстаў у некалькі калонак. Звярніце ўвагу таксама на выкарыстанне прэфіксаў і WebKit- і -МОЗ, вы можаце прагледзець гэты артыкул спіс прэфіксаў для ўсіх асноўных браўзэраў http://peter.sh/.
/* Form */
aside#form input.textfield,
aside#form textarea {
width: 380px;
padding-left: 8px;
margin-bottom: 10px;
border: 1px solid #CCC;
padding: 10px;
color: #6C595F;
-webkit-box-shadow:inset 1px 1px 2px #999;
-moz-box-shadow:inset 1px 1px 2px #999;
-khtml-box-shadow:inset 1px 1px 2px #999;
box-shadow:inset 1px 1px 2px #999;
-webkit-transition: border 0.4s ease-out;
-webkit-transition:-webkit-transform .2s ease-in;
}
aside#form textarea {
height: 100px;
}
aside#form input.textfield:hover,
aside#form textarea:hover {
border: 1px solid #999;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
}
aside#form input.textfield:focus,
aside#form textarea:focus {
outline: none;
border: 1px solid #6C595F;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
}
#form form input.submit {
background: #6C595F;
font-size: 13px;
font-weight: bold;
color: #FFF;
padding: 5px 10px;
border: none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
float: right;
-webkit-transition: background 0.4s ease-out;
cursor: pointer;
}
#form form input.submit:hover {
background: #333;
}
/* -------- */
Тут мы пачынаем працаваць над нашым форме. Звярніце ўвагу, што тут мы выкарыстоўваем функцыі, такія як скрынка-цень і пераход, Пераход Я лічу, што адной з галоўных навінках CSS3, выкарыстоўваючы з асцярогай і ў некаторых месцах мы можам ўзбагаціць карыстацкі досвед таксама. Гэта выгляд асаблівасць, якая не закранае карыстальнікаў, якія не падтрымліваюць CSS3, і выкарыстоўваць яго належным чынам можа захаваць лаяльнасць ўтрыманне дасягаючы 100% карыстачоў правільна.
/* Portfolio */
section#portfolio {
width: 410px;
float: right;
padding-bottom: 40px;
}
#portfolio figure a.link-thumbs {
width: 190px;
height: 156px;
display: block;
float: left;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 1px 1px 2px #999;
-box-box-shadow: 1px 1px 2px #999;
-khtml-box-shadow: 1px 1px 2px #999;
box-shadow: 1px 1px 2px #999;
margin: 0 20px 20px 0;
opacity: .6;
-webkit-transition: opacity 0.4s ease-out;
-webkit-transition: -webkit-transform 0.4s ease-out;
}
#portfolio figure a.link-thumbs:hover {
opacity: 1;
-webkit-transform:rotate(-15deg);
}
#portfolio figure a.link-thumbs:nth-child(2n) {
margin-right: 0;
}
#portfolio video {
background: #C9CEC8;
padding: 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 1px 1px 2px #999;
-box-box-shadow: 1px 1px 2px #999;
-khtml-box-shadow: 1px 1px 2px #999;
box-shadow: 1px 1px 2px #999;
clear: both;
}
/* -------- */
У партфелі ў нас ёсць вельмі добры эфект, выкарыстоўваючы «трансфармаваць» з CSS3. Яго цяжка верыць, што гэта было зроблена без JS ці нават Flash. Іншая навіна складаецца ў "п-га дзіцяці", з ім ў нас кантроль над усімі элементамі, паўтараю, як вялікія пальцы партфель, выдаліўшы толькі розніцы-права Права элементаў. Каб даведацца больш даць прачытаць па гэтым артыкуле CSS-tricks.com.
/* Footer */
footer p {
font-size: 11px;
line-height: 18px;
background: url(images/logo_abduzeedo.png) right center no-repeat;
text-shadow: 0 1px 0 #FFF;
}
/* -------- */
І, нарэшце, наш склеп, не вялікая навіна;)
Папярэдні прагляд пра шаблон - запампаваць
У цэлым магу сказаць, што мы павінны пачаць з дапамогай HTML5 і CSS3 сёння, што гэта магчыма. Існуе шмат дакументы, якія пацвярджаюць, парады і рэкамендацыі па заўсёды даходзяць да кожнага асобнага карыстальніка на асноўны прынцып сайта: змест і навігацыю. Прадастаўленне доступу да гэтага на 100% карыстачоў, то проста працаваць над паляпшэннем вопыт для тых, хто выкарыстоўвае сучасныя браўзэры!
Пра аўтара
Я з Бразіліі, адзін з заснавальнікаў Zee з Фабіа. У цяперашні час я люблю гуляць з Fireworks, Photoshop і палепшыць свае навыкі ў CSS. Калі вы хочаце запытаць некаторыя пасады, калі ласка, звяжыцеся са мнойабо прытрымлівацца па шчабятаць.