Web ninja html & css

Download Web ninja   html & css

Post on 28-Jan-2015

107 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

<p>PowerPoint Presentation</p> <div><p>Basic Programming Part 1:</p><p>HTML &amp; CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>Today Agenda</p><p>How to be a HTML &amp; CSS Ninja?</p><p>Tools</p><p>Understanding HTML</p><p>Understanding CSS</p><p>DEMO</p><p>Design Psychology</p><p>Resources</p><p>QA?</p><p>TRY your self: create your own website.</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>How to be aHTML &amp; CSS Ninja?</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>TOOLS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>IDE (Dreamweaver / Zend Studio / Notepad++ / etc)</p><p>Web Browser + Firebug / Developer Toolbar</p><p>Zen Coding (code.google.com/p/zen-coding/)</p><p>LESS CSS (lesscss.org)</p><p>SimpLESS (wearekiss.com/simpless)</p><p>SpritePad (pritepad.wearekiss.com)</p><p>TOOLS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>HTML(hypertext markup language)</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>HTML TIMELINE</p><p>1991: HTML</p><p>1994: HTML 2</p><p>1996: CSS 1 + Javascript</p><p>1997: HTML 4</p><p>1998: CSS 2</p><p>2000: XHTML</p><p>2002: Tableless web design era</p><p>2005: Asynchronous JavaScript and XML (AJAX)</p><p>2009: HTML 5</p><p>HTML</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>What is Doctype?</p><p>Doctype is a pre-defined string that is used to tell a clients web browser what type of code will be contained in the file.</p><p>4 doctype most frequently used</p><p>HTML 4.01 Strict</p><p>HTML 4.01 Transitional</p><p>XHTML 1.0 Strict</p><p>HTML 5</p><p>HTML</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>Kelebihan menggunakan XHTML Doctype:</p><p>Elements must be properly nested: <i><b>Test</b></i> is allowed in HTML, but in XHTML would be: <i><b>Test</b></i></p><p>Elements must always be closed, including elements with only one tag: HTML is , but in XHTML: </p><p>Elements must be defined in lowercase. HTML allows , but in XHTML it must be </p><p>Elements must be nested and rooted together. This goes hand-in-hand with item #1, but goes on to require that all text is contained in an element.</p><p>8</p></div> <div><p>What New in HTML 5</p><p>CSS3 and many new &amp; extended Javascript API.</p><p>More than 50 new tags &amp; attribute (@see http://www.w3.org/TR/html5-diff/).</p><p>Scalable Vector Graphic (SVG) &amp; Canvas support</p><p>Web GL</p><p>GeoLocation</p><p>New form input type (date, time, number, range, email, etc) and native input validation</p><p>Drag and Drop</p><p>Video and Audio</p><p>Query Selector</p><p>Local Storage</p><p>App Cache</p><p>Much more</p><p>When HTML 5 will be final release?</p><p>click here</p><p>HTML</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>9</p></div> <div><p>Basic Structure HTML Tags</p><p> HTML &amp; CSS Ninja</p><p>HTML</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>Basic Structure HTML Tags</p><p> Goto Ninja </p><p>HTML</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>text node</p><p>property</p><p>element</p></div> <div><p>Understanding href Attribute</p><p>Beginning with protocol (eg: http / ftp / mailto / etc)</p><p>Beginning with sharp # (eg: #bottom)</p><p>File name (eg: index.php)</p><p>Beginning with single slash (eg: /main)</p><p>Beginning with double slash (eg: //api.google.com/maps)</p><p>HTML</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>12</p></div> <div><p>HTML COMMON MISTAKE</p><p>WRONG</p><div>Hello Ninja.</div><p> Hello</p><p>Ninja.</p><p>CORRECT</p><div><p> Hello Ninja.</p></div><p>Hello</p><p>Ninja.</p><p>HTML</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>HTML COMMON MISTAKE</p><p>WRONG</p><p> Hello Ninja.</p><p>CORRECT</p><p> Hello Ninja.</p><p>HTML</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>CSS(Cascading Style Sheets)</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>ALL YOU HAVE TO KNOW ABOUT CSS</p><p>All browser have different standard for each html element, that why you need reset.css</p><p>Urutan embed file CSS berpengaruh</p><p>No space on name of CSS rule (use underscrore or dash), eg: #main-menu, #logo_wrapper</p><p>Whitespace has no effect in CSS file parsing</p><p>Default CSS position: absolute will be relative to </p><p>All document (import css, bg image, font-face, etc) that loaded from CSS file is relative path to css file. </p><p>You can set specific media target by adding attribute media=all/screen/print/projector</p><p>CSS3 support animation, gradient, multiple background, and much more.</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>BASIC CSS CODE</p><p>h1 {</p><p> margin: 0 0 0 1em; /* 1em = 16px = 12 pt = 100% */</p><p> font-size: 1.5; /* default = em */</p><p> letter-spacing : +2pt;</p><p>}</p><p>#site-logo {</p><p> width: 200px;</p><p> height: 80px;</p><p>}</p><p>.important {</p><p> color: red;/* #F00 or #FF0000 or rgb(255,0,0) or rgba(255,0,0,1)*/</p><p>}</p><p>.border-radius {</p><p> border-radius: 4px; /* W3C */</p><p> -webkit-border-radius: 4px; /* Webkit = Chrome / Safari */</p><p> -moz-border-radius: 4px; /* Firefox */</p><p>}</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>BASIC CSS CODE</p><p>margin: 10px;</p><p>/* equal with */ </p><p>margin: 10px 10px 10px 10px;</p><p>/* top right bottom left */</p><p>/* equal with */</p><p>margin-top: 10px;</p><p>margin-right: 10px;</p><p>margin-bottom:10px;</p><p>margin-left:10px;</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>BASIC CSS CODE</p><p>background: url(bg.png) #f90 repeat-x 0 10px;</p><p>/* equal with */ </p><p>background-color: #f90;</p><p>background-image: url(bg.png);</p><p>background-repeat: repeat-x;</p><p>background-position: 0 10px;</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>HOW TO LOAD CSS TO HTML FILE</p><p>Use inline HTML tag (very-very not recomended)</p><div>Hello World</div><p>Using @import (not recomended) @import url('style.css');</p><p>Embed to HTML file (not recomended) #logo{text-indent:-5000px}</p><p>Use link tag</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>Browser visible area</p><p>UNDERSTANDING CSS POSITION</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>(x = 0, y = 0)</p></div> <div><p>UNDERSTANDING CSS POSITION</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>#container {</p><p> width: 980px;</p><p> margin: 40px auto;</p><p> background: #FFF;</p><p>}</p></div> <div><p>UNDERSTANDING CSS POSITION</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>#container {</p><p> width: 980px;</p><p> margin: 40px auto;</p><p> background: #FFF;</p><p>}</p><p>#sticky {</p><p> width: 200px;</p><p> position: absolute;</p><p> top: 100px;</p><p> right: -60px;</p><p>}</p></div> <div><p>UNDERSTANDING CSS POSITION</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>#container {</p><p> position: relative;</p><p> width: 980px;</p><p> margin: 40px auto;</p><p> background: #FFF;</p><p>}</p><p>#sticky {</p><p> width: 200px;</p><p> position: absolute;</p><p> top: 100px;</p><p> right: -60px;</p><p>}</p><p>(x = 0, y = 0)</p></div> <div><p>UNDERSTANDING CSS SPRITE</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>Normal</p><p>Hover</p><p>Active/clicked</p><p>Current</p></div> <div><p>UNDERSTANDING CSS SPRITE</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>Normal</p><p>Hover</p><p>Active/clicked</p><p>Current</p><p> Home</p><p> Store</p><p> MAC</p><p> iPod</p><p> /* ... More ... */</p><p>HTML</p><p>#main{</p><p>margin:0;padding:0;list-style:inside none;height:40px}</p><p>#main li{</p><p>display:block;float:left;margin:0}</p><p>#main li a {</p><p>display:block;width:120px;height:40px;</p><p>Background:url(apple.png) top left;</p><p>Text-indent:-5000px;</p><p>}</p><p>#main li a:hover {}</p><p>#main li a:active,</p><p> #main li a:focus {}</p><p>#main li a.current{}</p><p>CSS</p></div> <div><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>All you have to know about CSS sprite</p><p>Tidak boleh ada gambar yang saling timpa</p><p>Ukuran sprite item kalo bisa sama untuk semua item, agar mempermudah perhitungan background position</p><p>Element yang bisa menggunakan sprite hanya yang display: block / inline-block</p><p>BIASANYA (bukan berarti tidak bisa) sprite image tidak bisa digunakan untuk repeat bg</p></div> <div><p>UNDERSTANDING GRID SYSTEM</p><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>960 Grid System (960.gs)</p><p>Blueprint CSS (blueprintcss.org)</p><p>Twitter Bootstrap (twitter.github.com/bootstrap)</p><p>Yahoo User Interface (developer.yahoo.com/yui)</p><p>Etc..</p></div> <div><p>CSS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p><p>DEMO</p><p>Undestanding Column and Row</p></div> <div><p>Design Psychology</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>RESOURCES</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>HTML &amp; CSS RESOURCES</p><p>W3 (www.w3.org)</p><p>validator.w3.org</p><p>HTML5 Rock (www.html5rocks.com )</p><p>beta.html5test.com</p><p>html5readiness.com</p><p>caniuse.com</p><p>quirksmode.org</p><p>html5doctor.com</p><p>ishtml5readyyet.com</p><p>RESOURCES</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>Kelebihan menggunakan XHTML Doctype:</p><p>Elements must be properly nested: <i><b>Test</b></i> is allowed in HTML, but in XHTML would be: <i><b>Test</b></i></p><p>Elements must always be closed, including elements with only one tag: HTML is , but in XHTML: </p><p>Elements must be defined in lowercase. HTML allows , but in XHTML it must be </p><p>Elements must be nested and rooted together. This goes hand-in-hand with item #1, but goes on to require that all text is contained in an element.</p><p>33</p></div> <div><p>QUESTIONS?</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div> <div><p>THANKS</p><p>Alfi Rizka T.</p><p>alfi@dedicated-it.com</p><p>FB: fb.com/avikaco | twitter : @avikaco</p></div>