aplikasi rich internet html5 & css3 developer mozilla (kelompok 3)

APLIKASI RICH INTERNET HTML5 & CSS3

DEVELOPER MOZILLA

KELOMPOK 3:- ARYO TIKO PRATOMO (30111191)- ADE HERY SHOPYAN (30111140)- WILYAN RESNA SAPUTRA

(30111151)

HALAMAN 1 - DESAIN

HALAMAN 1 - CODE <!DOCTYPE html> <html> <head> <title>Portofolio HTML5</title> <link rel="stylesheet" type="text/css" media="screen" href="styles/style.css"/> <script src="scripts/jquery.js"></script> <script src="scripts/index.js"></script> <noscript> <style> #nav:hover { color: blue; width: 150px; height: 250px } </style> <link rel="stylesheet" type="text/css" media="screen" href="styles/css3.css"/>

</noscript> </head>

HALAMAN 1 - CODE (CONT…) <body> <noscript> <style> div[id^="pasCss"] { display:none; } </style> <div id="pasCss3" style="z-index:1000;text-align:center;background-color:white;position:fixed;top:0;left:0;width:100%;height:100%;">

<h1>Vous n'avez ni CSS3, ni JavaScript d'activé donc vous ne pouvez pas visionner ce site dans le confort.</h1>

</div> </noscript> <div id="filtre"> </div> <div id="image"> <div id="articlePortofolio"> ... </div> <div id="articleNCetML"> ... </div> <div id="articleHelloWorld"> ... </div> </div> <div id="nav"> <p>Nav<span id="igation">igation</span><br/><span class="gt">></span></p>

</div> </body> </html>

HALAMAN 1 - KONTEN

HALAMAN 1 - CODE “KONTEN” <div id="articlePortofolio"> <img src="images/css3.png"/> <div class="nav gauche"><a><</a></div> <div class="nav droite"><a href="#articleNCetML">></a></div> <div class="titre"> <a>A full CSS3 portofolio, without JavaScript..</a> <div class="article"> <p>Here is this portofolio (sorry for my bad english i'm french and i'm 16 years old so i've some difficultes^^)</p>

 <p>Yes, they're scripts but is <b>just for non-CSS3 browsers and for some CSS3 bugs (in IE and Opera)</b></p>

<p>You can <b>try it with JavaScript disabled, it will works</b> in a CSS3 browser!</p>



</div> </div> </div>

HALAMAN 1 - NAVIGASI

HALAMAN 1 - CODE “NAVIGASI” <div id="nav">

<p>Nav<span id="igation">igation</span><br/><span class="gt">></span></p>

</div>

HALAMAN 2 - DESAIN

HALAMAN 2 - CODE

<div id="articleNCetML"> <img src="images/apple.jpg"/> <div class="nav gauche"><a href="#articlePortofolio"><</a></div> <div class="nav droite"><a href="#articleHelloWorld">></a></div> <div class="titre"> <a>Notification Center et Mountain Lion!</a> <div class="article"> <br/> <br/> Si vous êtes dans mon cas : pas d'argent ... <code>NSUserNotification.h</code>)!

On peut retrouver son header ... <code>NSUserNotification.h</code> Mais attention, dans la DP1 il ... <pre> NSUserNotificationCenter *notifCenter ... </pre> Biensur il faut supprimer la notification ... <pre> - (void)userNotificationCenter: ... </pre> </div> </div> </div>

HALAMAN 3 - DESAIN

HALAMAN 3 - CODE

<div id="articleHelloWorld"> <img src="images/helloworld.jpg"/> <div class="nav gauche"><a href="#articleNCetML"><</a></div>

<div class="nav droite"><a>></a></div> <div class="titre"> <a href="#apple">Hello World!</a> <div class="article"> <p>Je viens de finir ... </p> <p>C'est un blog full-ajax ... </p> <p>Bonne visite!!</p> <p>Signé Boundjadj (pour faire "classe")</p> </div> </div> </div>

CSS 3

body:hover #filtre { height:0 } .titre:hover>a { color: blue } .titre:hover>.article { opacity:1; height:500px } .titre:hover>a:after{ opacity:0 } #image>div:not(.annexe), .nonTarget { -moz-transform:translatex(100%); -ms-transform:translatex(100%); -o-transform:translatex(100%); -webkit-transform:translatex(100%); transform:translatex(100%) }

CSS 3 (CONT…)

#image>div:first-child:not(.nonTarget), #image>div:target { -moz-transform:translatex(0); -ms-transform:translatex(0); -o-transform:translatex(0); -webkit-transform:translatex(0); transform:translatex(0) } #nav:hover>p>span:not(#igation) { opacity:0; } #nav:hover>p>#igation { opacity: 1 } * { -moz-transition:all .5s, color .25s; -o-transition:all .5s; -webkit-transition:all .5s, color .25s; -ms-transition:all .5s, color .25s, opacity .75s; transition:all .5s, color .25s }

CODE UNIQUE

#image>div:target { -moz-transform:translatex(0); -ms-transform:translatex(0); -o-transform:translatex(0); -webkit-transform:translatex(0); transform:translatex(0) }

Penjelasan : jadi, pengaturan css ini hanya akan berlaku untuk div target yang hanya ada didalam id yang bernama image

CODE UNIQUE (CONT…)

<a href="#articleNCetML">

Penjelasan : ini digunakan untuk membuat link ke suatu div tertentu yang masih dalam satu script


#filtre {

z-index:3;

background-image:url(../images/hachures.png)

}

* {

z-index:2;

}

Penjelasan : z-index digunakan untuk menumpuk elemen, semakin besar nomor index dari z-index maka posisinya semakin berada di depan


@font-face {

font-family:District;

src:url(../fonts/District.otf)

}

@font-face {

font-family:Mido;

src:url(../fonts/Mido.otf)

}

Penjelasan : digunakan untuk mengambil jenis font dari lokasi eksternal

TERIMA KASIH

aplikasi rich internet html5 & css3 developer mozilla (kelompok 3)

Documents

vous navez ni css3