Brainmatics

Web Designing with HTML 5

Di era perkembangan Teknologi Informasi saat ini, website adalah salah satu media yang paling banyak diakses oleh seseorang karena kemudahaanya. Hyper Text Markup Language atau sering disebut HTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman website.

Pada training ini, anda akan mempelajari bagaimana cara membangun sebuah halaman website menggunakan bahasa pemrograman HTML. Pada training ini, anda akan mempelaj ari mengenai struktur dari HTML, penggunaan Markup, penggunakan Form, sampai dengan komunikasi dari HTML dengan API. Setelah mengikuti training ini, peserta diharapkan mampu untuk membuat halaman websitenya sendiri yang sudah mencakup arsitektur dari HTML.

 

CONTENT

1. HTML5 Page Structures

    1.1 Creating a DOCTYPE in HTML5
    1.2 Creating a character encoding declaration in HTML5
    1.3 Dividing a document into sections
    1.4 Making parts of the document distributable
    1.5 Creating an aside
    1.6 Creating a header
    1.7 Grouping <h1> to <h6> elements
    1.8 Creating a footer
    1.9 Creating navigation in an HTML5 document
    1.10 Inserting figures
    1.11 Browser compatibility

2. HTML5 Markup

    2.1 Using the <hr> tag in HTML5
    2.2 Using the <iFrame> tag
    2.3 Embedding media into a page
    2.4 Using the <area> tag

3. HTML5 Structural and Semantic Elements

    3.1 Understanding microdata
    3.2 Using the itemprop and itemscope attributes
    3.3 Understanding link types and relations
    3.4 The header and hgroup elements
    3.5 Connecting images with their captions
    3.6 Adding tangent content

4. HTML5 Forms

    4.1 Understanding the new input types
    4.2 Using the e-mail input type
    4.3 Using the URL input type
    4.4 Using a spinner control for numbers
    4.5 Adding a slider to your form with the range input type
    4.6 Sending multiple files
    4.7 Creating a suggest-like autocomplete with the data list component
    4.8 Validating form controls
    4.9 Creating custom input types using regular expressions
    4.10 Setting placeholder text in an input field
    4.11 Creating date and time controls

5. HTML5 Media Elements: Audio and Video

    5.1 Embedding a video in a web page
    5.2 Detecting video support across browsers
    5.3 Creating a custom video controller
    5.4 Preloading a video
    5.5 Creating a custom seek bar for a video
    5.6 Using multiple source video elements
    5.7 Opening a video in full screen
    5.8 Applying a mask to a video
    5.9 Using the audio element

6. HTML5 Drawing APIs

    6.1 How to draw with HTML5 using the canvas element’s drawing API
    6.2 Using paths and coordinates
    6.3 Drawing shapes: rectangles and circles
    6.4 Filling shapes with solid colors
    6.5 Using gradients to fill shapes
    6.6 Drawing texts in a canvas
    6.7 Working with relative font sizes to draw text on a canvas
    6.8 Saving a shape as a PNG file

7. HTML5 Canvas

    7.1 Understanding the canvas APIs
    7.2 Detecting the canvas and canvas text support
    7.3 Understanding the standard screen-based coordinate system and canvas transformations
    7.4 Pixel manipulations
    7.6 Applying shadows and blurring
    7.7 Animating canvas

8. HTML5 Communication APIs

    8.1 Understanding the postMessage API
    8.2 Securing the postMessage communication
    8.3 Checking for postMessage API browser support
    8.4 Cross-documents messaging and CORS
    8.5 Sending messages between windows and iframes
    8.6 Using Server-Event technologies to write real-time web applications
    8.7 Running code in different browsing contexts using message channels
    8.8 Uploading files using the XMLHttpRequest Level 2
    8.9 Checking for XMLHttpRequest level 2 cross-origin browser support

9. HTML5WebSocket

    9.1 Checking for WebSocket browser support
    9.2 Establishing a WebSocket connection
    9.3 Handling WebSocket events
    9.4 Using a WebSocket server with the WebSocket API

10. HTML5Geolocation API

    10.1 Understanding the Geolocation API
    10.2 Using the navigator object
    10.3 Getting the current position
    10.4 Using the position object
    10.5 Handling position errors
    10.6 Tracking the user’s position
    10.7 Using the geo.js open source library

11. HTML5 Local Storage

    11.1 Understanding Occasionally-Connected Applications
    11.2 Checking for HTML5 storage support
    11.3 Declaring a manifest for your page
    11.4 Using the ApplicationCache object
    11.5 The ApplicationCache events
    11.6 Deleting the local cache

12. HTML5 Accessibility

    12.1 The four principles of accessibility
    12.3 The purpose of the WCAG
    12.4 Creating skip links with the nav element
    12.5 Creating accessible tabular data
    12.6 Creating accessible forms
    12.7 Captioning and annotations using video elements
    12.8 Using the ARIA project

 

INSTRUCTOR

Hendro Subagyo. Menyelesaikan program S1 (B.Eng) dan S2 (M.Eng) pada jurusan Ilmu Komputer dan Informasi Matematik di The University of Electro-Communications, Tokyo, Jepang pada tahun 1999 dan 2001. Saat ini sedang menyelesaikan program S3 (PhD) pada jurusan dan universitas yang sama. Peneliti di Pusat Dokumentasi Informasi Ilmiah (PDII), Lembaga Ilmu Pengetahuan (LIPI). Memiliki minat pada sistem operasi, pemrograman dan bahasa pemrograman (khususnya Java dan Real-Time Java) dan komputer aritmatika. Cisco Certified Instructor pada Cisco Regional Academy Centre for Scientific Documentation and Information-LIPI.

Tubagus Putra Kencana. Kelahiran Sidoarjo – Jawa Timur. Menamatkan pendidikan tinggi jurusan Teknik Informatika di STMIK Eresha – Jakarta, menguasai beberapa bahasa pemrograman seperti HTML, CSS3, Javascript, JQuery, PHP, Ajax, Boostrap, Chamilo, dan Moodle dengan pengalaman implementasi di dunia industri. Saat ini aktif sebagai Programmer dan System Analyst di PT Brainmatics Cipta Informatika, dan sebagai salah satu konsultan PHP Programmer di Direktorat Jenderal Perimbangan Keuangan – Kementerian Keuangan.

 

Ariyanto Adi NugrohoAriyanto Adi Nugroho. Development Manager di PT Brainmatics Cipta Informatika. Aktif sebagai trainer, konsultan, dan project manager. Menangani project eLearning system dan content project di berbagai perusahaan dan lembaga pemerintahan. Berpengalaman sebagai pengembang dan implementor eLearning dengan Moodle dan BrainTutor. Menguasai berbagai aplikasi Adobe Creative Cloud seperti Adobe Animate/Flash, Adobe Photoshop, Adobe Captivate, Adobe After Effect, Adobe Premiere dan Adobe Illustrator.