1 / 73

PCRE PHP WEBTECHNOLOGY MYSQL WEB2.0

PCRE PHP WEBTECHNOLOGY MYSQL WEB2.0. HTML5 (& CSS3 & …). hi, I am Rogier van der Linde. I like deserts…. …HDR photography…. …and web technology. I work @ KAHO St Lieven…. …in Gent, Belgium . GENT 10 DAYS SUMMER FESTIVAL. Say hello to HTML5. Buzzwords.

rangle
Download Presentation

PCRE PHP WEBTECHNOLOGY MYSQL WEB2.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PCREPHPWEBTECHNOLOGYMYSQLWEB2.0 HTML5 (& CSS3 & …)

  2. hi, I am Rogier van der Linde

  3. I like deserts…

  4. …HDR photography…

  5. …and web technology

  6. I work @ KAHO St Lieven…

  7. …in Gent, Belgium

  8. GENT 10 DAYS SUMMER FESTIVAL

  9. Say hello to HTML5

  10. Buzzwords • Some buzzwords:- browser- webGL 3D graphics- web sockets- <canvas>- <audio>- local Storage • More buzzwords:- CSS3- web SQL database- application Cache- …

  11. Browsers • Classic applications are dead (sort of)

  12. Browsers • Plugins are dead (sort of)

  13. Web Standards

  14. Web standards timeline

  15. Web standards timeline

  16. Web standards status

  17. Web standards status • Under development: standard is under construction-> CSS3 • Working draft: standard is published for review by "the community"; major changes expected-> HTML 5, XHTML 2 • Candidate recommendation: feedback from implementors; minor changes possible, usually for practical reasons-> CSS 2.1 • Proposed recommendation: document is submitted to the W3C council for final approvement • W3C Recommendation: standard is accepted by the W3C for wide deployment-> HTML 4, XHTML 1.1, CSS 2…

  18. Web standards status

  19. Web standards support

  20. Web standards support

  21. Web standards support • Forget about 'support' for a whole browser or standard • Focus on features you can use today • Provide graceful degradation for partially supported features (example: rounded corners)

  22. HTML5 • HTML5 ≈ HTML + JS API + CSS

  23. HTML – semantics • Web 2.0: - user generated content- Rich Internet Applications- connectivity (site mashups) • Web 3.0: "The Semantic Web", i.e. software should be able to understand web content • Example: http://microformats.org/wiki/calendar(install FireFox Operator plugin first)

  24. HTML – semantics • Classical page structure: ... <body> <div id="header">...</header> <div id="nav">...</nav> <div class="article"> <div class="section"> ... </div> </div> <div id="aside">...</div> <div id="footer">...</div> </body> ...

  25. HTML – semantics • Classical page structure:

  26. HTML – semantics • New page structure: ... <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> ...

  27. HTML – semantics • New page structure:

  28. HTML – semantics • More new elements (not supported yet): <menu> <progress> <mark> <meter> ...

  29. HTML – semantics • New link relations: <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" /> <link rel="icon" href="images/icons/favicon.ico" /> <link rel="first" href="http://myblog.com/page1.php"> <link rel="prefetch" href="http://myblog.com/main.php"> <a rel="author" href="http://myblog.com/aboutme">Rogier</a> <a rel="external" href="http://notmysite.com">tutorial</a> <a rel="next" href="http://myblog.com/page2.php"> <a rel="search" href="http://myblog.com/search">search this blog</a> <a rel="tag" href="http://myblog.com/category/games">games posts</a>

  30. HTML – semantics • Microdata: <div itemscopeitemtype="http://example.org/band"> <p>My name is <span itemprop='name'>Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div>

  31. HTML – semantics • ARIA (Accessible Rich Internet Applications): <ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1"> <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li> </ul>

  32. HTML – semantics • ARIA (Accessible Rich Internet Applications): <h2 id="limg">Paragliding</h2> <p id="dimg"> A long description of our paragliding trip ... </p> <div> <img src="takeoff.png" alt="Getting ready to take off" aria-labelledby="limg" aria-describedby="dimg"> </div>

  33. HTML – web forms • E-mail, time, date…: <input type="number" /> <input type="email" /> <input type="time" /> <input type="date" /> <input type="datetime" /> <input type="month" /> <input type="week" /> <input type="range" min="0" max="50" value="0" /> • Color, tel (not supported yet): <input type="color" /> <input type="tel" />

  34. HTML – web forms • Placeholder and autofocus: ... <input type="text" placeholder="Search inside" /> <input type="text" autofocus="autofocus" /> ... • Required: ... <input type="text" required="required" /> ...

  35. HTML – web forms • Enhanced slider example: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl"> <head> <title> Testpage </title> <script type="text/javascript"> window.onload = function() { document.getElementById("slider1").onchange = function() { document.getElementById("span1").innerHTML = this.value; } } </script> </head> <body> <form action="#"> <p> <label>0<input type="range" min="0" max="50" value="0" name="slider1" id="slider1" />50</label> </p> <p>Current value: <span id="span1">0</span></p> </form> </body> </html>

  36. HTML – interaction • Datalist: <label>Enter your favorite character:</label> <input type="text" list="characters" /> <datalist id="characters"> <option value="Homer Simpson"> <option value="Bart"> <option value="Fred Flinstone"> </datalist> • Details (not supported yet): <details open="open"> <p> If your browser supports this element, it should allow you to expand and collapse these details. </p> </details>

  37. HTML – interaction • Editable content: <h3 contenteditable>Add your title here</h3> <img src="images/photo.jpg" alt="photo"> <p contenteditable> Add your description here </p> • Draggable content: <img src="images/product1.jpg" alt="ball" draggable="true" /> <img src="images/product2.jpg" alt="animal" draggable="false" /> <img src="images/product3.jpg" alt="rope" draggable="true" /> <div id="dropzone"> ...drop item here... </div>

  38. HTML – interaction • Drag and drop example 1 (dragging text): ... <script type="text/javascript"> window.onload = function() { var dropZone = document.querySelector('#dropzone'); dropZone.ondragenter = dropZone.ondragover = function(event) { return false; } dropZone.ondrop = function(event) { txtPassed = event.dataTransfer.getData('text/plain'); this.innerHTML = txtPassed; return false; } } </script> </head> <body> <p>Lorem dolor sit amet, consectetur adipisicing elit ...</p> <p>Duis aute irure dolor in reprehenderit in voluptate ...</p> <div id="dropzone"> ...drop item here... </div> </body></html>

  39. HTML – interaction • Drag and drop example 2 (dragging images): ... <script type="text/javascript"> window.onload = function() { var dropZone = document.querySelector('#dropzone'); dropZone.ondragenter = dropZone.ondragover = function(event) { return false; } dropZone.ondrop = function(event) { imgPassed = event.dataTransfer.getData('text/uri-list'); this.innerHTML = "<img src='" + imgPassed + "'/>"; return false; } } </script> </head> <body> <div> <img src="images/product1.jpg" alt="ball" /> <img src="images/product2.jpg" alt="animal" draggable="false" /> <img src="images/product3.jpg" alt="rope" /> </ol> <div id="dropzone">...drop item here... </div> </body></html>

  40. HTML – multimedia • Audio: <audio src="multimedia/paoloconte.mp3" controls width="670" style="border: solid 3px black; margin:200"> Your browser dows not support the audio tag </audio> • Video: <video src="multimedia/tango.mp4" controls poster="images/meloYBratt.jpg" width="320" height="240"> Your browser dows not support the video tag </video>

  41. HTML – multimedia • Different media: <video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>

  42. HTML – multimedia • Replace controls with your own (HTML): ... <body> <video src="multimedia/tango.mp4" poster="images/meloYBratt.jpg" width="320" height="240" id="video" controls="controls"> Your browser dows not support the video tag </video> <nav id="myControls"> <a href="#" id="lnkPlay">play</a> <a href="#" id="lnkMute">mute</a> <input type="range" min="0" max="211" value="0" id="inpSeek" /> </nav> </body> </html>

  43. HTML – multimedia • Replace controls with your own (Javascript): ... <script type="text/javascript"> window.onload = function() { var video = document.getElementById("video"); video.controls = false; document.getElementById("lnkPlay").onclick = function() { if (video.paused) video.play(); else video.pause(); return false; } document.getElementById("lnkMute").onclick = function() { if (video.volume > 0) video.volume = 0; else video.volume = 1; return false; } document.getElementById("inpSeek").onchange = function() { video.currentTime = this.value; } } </script> </head> ...

  44. HTML – 2D and 3D drawing • Canvas: ... <script> window.onload = function() { var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); } </script> </head> <body> <canvas id="canvas" width="838" height="220"></canvas> ...

  45. HTML – 2D and 3D drawing • Canvas with WebGL (view on Chromium browser): ... <script> window.onload = function() { var gl = document.getElementById("canvas") .getContext("experimental-webgl"); gl.viewport(0, 0, canvas.width, canvas.height); ... } </script> </head> <body> <canvas id="canvas" width="838" height="220"></canvas> </body> </html>

  46. HTML – 2D and 3D drawing • Canvas/WebGLis very new but verrrryy promising • More demo's:- http://apirocks.com/html5/html5.html#slide24 - http://www.khronos.org/webgl/wiki/Demo_Repository- http://www.ambiera.com/coppercube/webgldemos.html

  47. HTML – SVG • Scalable Vector Graphics • XML format for graphics • Typical fragment: <svg xmlns="http://www.w3.org/2000/svg" width="467" height="462"> <rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" /> <rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" /> </svg>

  48. HTML – SVG • Integration with HTML highly unsupported • Other demos:- http://apirocks.com/html5/html5.html#slide26- http://apirocks.com/html5/html5.html#slide27

  49. HTML – wrapup • Semantics (new elements, microdata, ARIA) • Web Forms (new elements and attributes) • Interaction (suggest list, editable content, drag/drop…) • Multimedia (audio and video) • 2D and 3D drawing (Canvas, WebGL, SVG)

  50. Javascript API – new selectors • Finding elements by class: var el = document.getElementById("section1"); var els = document.getElementsByTagName("div"); var els = document.getElementsByClassName("section"); • Finding elements by CSS syntax: var els = document.querySelectorAll("ul li:nth-child(odd)"); var els = document.querySelectorAll("table.test > tr > td");

More Related