Front-End Foundations

Thiruppathi Muthukumar

Outline

Introduction
- Prerequisites
Developer Tools & Extension
- Useful Tools & Browser extensions
HTML5
- Introduction – Structure of the Document – Paragraphs & Texts - Figures & Images – Lists – Tables – Forms – Form Validation – Video – Canvas – SVG
CSS3
- Introduction - Font & Text – Color & Background – List & Table – Box – Font-Face – Media Queries
jQuery
- Introduction – Functions & Selectors – Modifying DOM – Events
Further Learning
- Where to go from here.

Introduction

Prerequisites
- HTML
- CSS
- JavaScript
References
- http://www.w3schools.com/

developer tools

Developer tools and extensions

Text Editors
- Sublime Text, Brackets, Notepad++
Chrome/Chroimum Browser
- Developer Tools
Firefox
- Firebug
Web Based Tools

HTML 5

HTML5

Introduction
HTML5 Features Sample
Before HTML5
Hello HTML5
Defining Structure of the Document
Semantics - Recommended Reading
Figures & Images
Tables
Forms
Media Elements - Video, Audio, Images, Plugins, Youtube
Canvas
SVG
Service Workers
References

Introduction

It is not one big thing; it is a collection of individual features
Don't need to throw anything
It's easy to get started

Audio
Video
Accessibility
Local Storage
Canvas
Legacy/Cross-Browser Support
Search Engine Optimization
& more.....

    <!DOCTYPE html>

HTML5 Features - SAMPLE

before HTML5


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Lengthy-SearchInGoogle-CopyPaste-DocType of HTML4


<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<link type="text/css" rel="stylesheet" href="hello.css">


<script type="text/javascript" src="hello.js"></script>

Fat <meta> tag

Type mentions in <link> & <script>

Hello HTML5

<!-- Lengthy-SearchInGoogle-CopyPaste-DocType of HTML4-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!--EasyToRemember-NoCopyPaste-DocType of HTML5-->
<!doctype html>

<!-- Fatty meta -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- HourGlass meta -->
<meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="hello.css">

<!--Default Styling Standard -->
<link rel="stylesheet" href="layout.css">

<script type="text/javascript" src="lounge.js"></script>

<!--Deafult Scripting for HTML5 -->
<script src="menu.js"></script>

Defining structure of the document

<header>

<nav>

<section>

<aside>

<footer>

Semantics - Recommended reading

Pointless Pursuit of Semantics

"Not semantics are useless but its not worth worrying over minute detail on."

tl;dr

Pursuing Semantic Value

tl;dr

You are busy creating a website.
You have a thought, “Oh, now I have to add an element.”
Then another thought, “I feel so guilty adding a div. Div-itis is terrible, I hear.”
Then, “I should use something else. The aside element might be appropriate.”
Three searches and five articles later, you’re fairly confident that
Aside is not semantically correct.
You decide on article, because at least it’s not a div.
You’ve wasted 40 minutes, with no tangible benefit to show for it. (sigh)

Figures & images

In Books & Magazines, pictures, illustrations, charts are accompanied by a caption. HTML5 hopes to solve this problem by introducing,


<figure>
  <img src="http://i.imgur.com/DkioMUo.gif" />
  <figcaption>
    <h2>UI Developer fixing layout issue</h2>
  </figcaption>
</figure>

HTML5 TABLE

Following <tags> are used to create and format the Headers & Footers of your Table

<!-- To group content as the header of a table for formatting purposes-->
<thead>
  <tr>
    <!-- To denote a table header cell – th stands for table header -->
    <th></th>
  </tr>
</thead>
<!-- To group table content to format it as the body of the table-->
<tbody>
  <tr><td>Thiru</td></tr>
  <tbody>
    <!-- To group footer information for your table for formatting purposes. -->
    <tfoot>
    <tr><td>Years of Experience</td></tr>
    </tfoot>

FORMS

HTML5 Form elements & attributes provide greater degree of semantic markup.

Date Pickers
Search Boxes
Color Pickers
Form Validation
Required Fields
Data List
Regular Expression

Placeholder
Autofocus Fields
Email Address
Telephone Number
Web Address - URL
Numbers as SpinBox
Numbers as Sliders

FORMS

Media

Video - MP4, Ogg, WebM
Audio - MP3, Ogg, WAV
HTML Plug-Ins


    <object width="400" height="50" data="bookmark.swf"></object>


    <object width="100%" height="500px" data="snippet.html"></object>


    <embed width="400" height="50" src="bookmark.swf">


    <iframe width="420" height="315" 
            src="http://www.youtube.com/embed/XGSy3_Czz8k">
    </iframe>

Struggling?

Canvas

HTML5 element, where content is rendered by Javascript.

1. Place the <canvas> element inside HTML

2. Access the element inside Javascript

3. Create a Context

4. Utilise HTML5 Canvas API to draw visualisation

Canvas - LINEs

To draw a line using HTML5, we can use the following methods

    
    beginPath()

    
    moveTo()

    
    lineTo()

    
    stroke()

To declare we are about to draw a new path

To position the context point; i.e., the drawing cursor

To draw a straight line from position a to position b

Makes the line visible by applying stroke. Default color is black

Canvas - LINEs

Line Width

    
    context.lineWidth = 15;

It should be called before stroke() method

Line Color

    
    context.strokeStyle = '#2245e7';

Canvas - Curves

  arc(x, y, radius, startAngle, endAngle, counterClockwise);

Canvas - PATH

Canvas - rectangle

      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(188, 50, 200, 100);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();

Canvas - circle

      
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 70;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = '#689F38';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#727272';
    context.stroke();

Canvas - FILL

      
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = 'blue';
      context.stroke();

Canvas - Linear Gradient

      
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.rect(0, 0, canvas.width, canvas.height);

    // add linear gradient
    var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
    // light blue
    grd.addColorStop(0, '#8ED6FF');   
    // dark blue
    grd.addColorStop(1, '#004CB3');
    context.fillStyle = grd;
    context.fill();

Canvas - radial Gradient

  
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  context.rect(0, 0, canvas.width, canvas.height);

  // create radial gradient
  var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
  // light blue
  grd.addColorStop(0, '#8ED6FF');
  // dark blue
  grd.addColorStop(1, '#004CB3');

  context.fillStyle = grd;
  context.fill();

Canvas - pattern


 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');

 var imageObj = new Image();
 imageObj.onload = function() {
   var pattern = context.createPattern(imageObj, 'repeat');

   context.rect(0, 0, canvas.width, canvas.height);
   context.fillStyle = pattern;
   context.fill();
 };
 imageObj.src = 'http://www.8icon.com/public/png/iconshock-batman-Logo-48.png';

Canvas - Reference

Canvas Cheat Sheet

SVG

SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Differences Between SVG & CanvaS

CANVAS & SVG

Resolution dependent
No support for event handlers
Poor text rendering capabilities
You can save the resulting image as .png or .jpg
Well suited for graphic-intensive games

Resolution independent
Support for event handlers
Best suited for applications with large rendering areas (Maps)
Slow rendering if complex
Not suited for game applications

SVG

CANVAS

SVG - circle

    
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

An SVG image begins with an <svg> element
The width and height attributes of the <svg> element define the width and height of the SVG image
The <circle> element is used to draw a circle
cx & cy attributes define the x and y coordinates; If cx and cy are omitted, the circle's center is set to (0, 0)
The r attribute defines the radius of the circle
The stroke and stroke-width attributes control how the outline of a shape appears.
The fill attribute refers to the color inside the circle. We set the fill color to yellow
The closing </svg> tag closes the SVG image

SVG - rectangle


    <svg width="400" height="110">
      <rect width="300" height="100" 
            style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    </svg>

The width and height attributes of the <rect> element define the height and the width of the rectangle
The style attribute is used to define CSS properties for the rectangle
The CSS fill property defines the fill color of the rectangle
The CSS stroke-width property defines the width of the border of the rectangle
The CSS stroke property defines the color of the border of the rectangle

references

CSS 3

CSS3

Introduction
Font & Text properties
Color & Background properties
List & Table properties
Box properties
Font-Face
Media Queries
References

Introduction
Functions & Selectors
Modifying HTML Elements
jQuery Events
References

JQUERY

FURther learning

Front-End Foundations

By Thiruppathi Muthukumar

Front-End Foundations

1,234

Thiruppathi Muthukumar

Web Developer

thiruppathi