Know & Learn

FED

About Me

Arunraj NatarajanSenior UI DeveloperWorking at Cognizant Technologies

What is FED?

Front End Development is:

• Doing Program that runs in a

browser

• Browsers can be anywhere

i.e.

Desktop, Laptop, Tablet, Phable

t, Smartphone, Google Glass

and any device that has

browser

• Crafting applications or

websites for all resolutions

Languages of FED

Unlike other

programming

languages, you

can see it in your

browser

Languages of FED

Front-end code tells your browser what to do. Then, the

languages are -

Languages of FED

Combo of these three languages makes

Front End Technology

Web Browsers

Universal languages allow you to design across browsers

WebKit - Gecko - Trident - Presto

Know HTML5

• HTML5 is the latest version of HTML• Passed through Candidate Recommendation of W3C by Dec 2012• Compatible with Chrome, Safari, Opera, Firefox and IE9 browsers

HTML5 Features

About HTML5

Storing data in the

cache or to make

data persistent

between user

sessions and when

reloading and

restoring pages

More meaningful

tags and structural

elements. New

Form types and

attributes.

Dedicated syntax

for Audio and

Video enables

multimedia in

HTML5. There will

be no need to for

third party plug-

ins.

More efficient connectivity

means more real-time

chats, faster games, and

better communication.

Web Sockets and Server-

Sent Events are pushing

(pun intended) data

between client and server

more efficiently than ever

before.

There are many

new features

which deal with

graphics in the

HTML5: 2D

Canvas, WebGL, S

VG, 3D CSS

transforms, and

SMIL

(Synchronized

Multimedia

Integration

Language

).

Enables deeper

integration with

OS. HTML APIs

helps to Drag and

Drop, Input by

speech, Geo

location and

Device

orientation.

Know CSS3

• CSS3 is the latest version of CSS. CSS is used to control the User Interface style and layout• Compatible with Chrome, Safari, Opera, Firefox and IE9 browsers

• Some of the CSS styles supported by browsers using their own prefixes like –webkit- , -moz-, -ms- and –o-. These fixes will be wiped out once W3C recommendation has a stable version.

CSS3 Features

About CSS3

@font-face Box Shadow Border Radius Gradient Transform

TransitionMultiple Background ImagesText ShadowRGBA

Media Queries Pseudo Classes Flex Box and so on …

Know JavaScript

• It’s an interaction programming language and its original name is ECMA Script.• JavaScript is used with HTML to make it more dynamic and interactive.

• There are plenty of JavaScript frameworks built especially for HTML5 apps. For Ex. Mordernizr, jQuery, Sencha, BackBone, DoJo

Usage of JavaScript in Front End

About JavaScript

• User Interaction like page navigation, Tab, drop down, pop ups, tool tips• Form run time validation, date picker, color picker, slider etc.,• Auto Suggest and populate using AJAX method• JSON object for data interchange between server• MVC framework makes application more maintainable

• All HTML5 features ends with fine JS APIs• Advanced JS craft helps to make Single Page Application works like native apps

Exercise 1: Create basic HTML5 Page

Exercise 2: Make it Responsive

Thank You!

Feel free to contact meGmail: arungetz@gmail.comFacebook: https://www.facebook.com/itsR1