Webdesigning and Emerging Trends

Because Learning is not only in Classroom

Welcome

Web Technologies(HTML, CSS, HTML5, Jquery,

JavaScript)

and

Emerging Trends in IT


Topics

• HTML

• CSS

• HTML5

• Javascript

• Jquery

• Live Demo

• Emerging Trends

HTMLHyper Text Markup

Language


How the Web Works?

• WWW use classical client / server architecture• HTTP is text-based request-response protocol

Client running a Web

Browser

Server running Web Server

Software (IIS, Apache, etc.)

Page Request

HTTP

Page Response

HTTP


Hyper Text Markup Language

Created by Tim Berners-Lee

Tells browser how to display text and

images

HTML is made up of tags and attributes<tag

attribute=value>Content</tag>

HTML

<a href=“http://www.slc.bz”>SLC</a>


HTML Versions


An HTML file must have an .htm or .html file extension

HTML files can be created with text editors (Free): NotePad Notepad++

Or HTML editors (Paid): Microsoft FrontPage Adobe Dreamweaver Visual Studio

Creating HTML Pages


<html><head>

head content</head><body>

body content</body>

</html>

Structure of HTML


Prior to the opening <html> tag, many HTML files also include a Document Type Declaration, or doctype, to indicate the type of markup language used in the document.

Doctype for HTML 4.01:

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

Doctype for XHTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Doctype for HTML5:<!DOCTYPE html>

Document Type Declaration


The <body> Section

Text Styling and Formatting Tags

Hyperlinks: <a>, Hyperlinks and Sections

Images: <img>

Lists: <ol>, <ul> .

The <div> and <span> elements

HTML Tables <table> <tr> <th> </tr>

<tr><td></tr>

HTML Forms <input> <checkbox> <radio>

<submit>

HTML Basic Tags


HTML HTML5

DOCTYPE is much longer as HTML4 is based on SGML-based.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

DOCTYPE is required to enable standards mode for HTML documents.<!DOCTYPE html>

Audio and Video are not part of HTML4 specification.

Audio and Videos are integral part of HTML5 specifications e.g. <audio> and<video> tags.

Vector graphics is possible with the help of technologies such as Silverlight, Flash etc.

Vector graphics is an integral part of HTML5.e.g. SVG and canvas.

Impossible to get true GeoLocation of user browsing from mobile devices.

JS GeoLocation API in HTML5 helps identify location.

HTML & HTML5 - Difference


Structure of HTML

<div>

<div>

<div>

<div>


<aside><article>

<article>

<article>

<header>

<nav>

<footer>

Structure of HTML5

Semantic elements: header, nav, footer, section, article, others.

canvas for drawing paths of rectangles, arcs, lines,

images mouse events

localStorage (variation of cookies) Audio & Video elements Including drawing video on canvas

HTML5 New Features

HTML 5.0 Example<video controls>

<source src=“scientech.mp4“ type="video/mp4 or ogg or webm" /> </video>

HTML 4.0 Example<object type="application/x-shockwave-flash“ data="player.swf?&file=scientech.flv”><param name="movie" value="player.swf?&file=scientech.flv&amp" /></object>

HTML5 New Features

CSS: Cascaded Style Sheet


Cascading Style Sheets (CSS) form the presentation layer of the user interface.– Structure (HTML)– Behavior (Client-Side Scripting)– Presentation (CSS)

Tells the browser agent how the element is to be presented to the user.

CSS(Cascading Style Sheet)


Behavior(JavaScript)

Presentation

(CSS)

Content (HTML)

Cascading Style Sheets (CSS)

form the presentation layer of

the user interface.




Tells the browser agent how the element is to be presented to the

user.

selector/element { property: value;}

The selector can either be a grouping of elements, an identifier, class, or single XHTML element (body, div, etc)

CSS Syntax

h1 {color: #ff0000;}

h1, h2, h3 {color: #ff0000;}

Separated by a colon ( : )

Each pair is separated from each other pair by a semi colon ( ; )

Entire block of declarations is wrapped by a pair of curly braces to offset it from the selector

p{color: #ff0000;}

Properties & Values

p{color: #ff0000; font-size:12px}

p{color: #ff0000;}

Units– %– in– cm– mm– px

Colors– color name (red, etc)– rgb(x,x,x) (e.g. 255, 255, 255)– #rrggbb (HEX) )(e.g. #FFFFFF)

CSS Units & Colors

Margin Padding Border Font Color Z-index Positioning Width Height Float Text-align Vertical-align

CSS Layout

CSS2 – absolute, relative, and fixed positioning of elements

and z-index, – the concept of media types– new font properties such as text-shadows.

CSS3Modules include:– Borders (border-radius, box-shadow)– Backgrounds (multiple backgrounds)– Color ( opacity, RGBA colors)(e.g. 255, 255, 255,

0.5)– Media Queries (For Responsive Website)– Web fonts(Google Fonts, Fontface, etc.)

CSS Version


CSS Version

Responsive website in CSS3


JavaScript

Defines Behavior (Client Side Scripting)


What JavaScript isn’t Java (object-oriented programming language) A "programmers-only" language

What JavaScript is Extension to HTML (support depends on browser) An accessible, object-based scripting language

What JavaScript is for Interactivity with the user: input (user provides data to application) processing (application manipulates data) output (application provides results to user)

Introduction to Javascript


Direct insertion into page (immediate)

In <script></script> container within document head or body

<body><p>Today is <script>document.write(

Date());</script></p>

</body>

Implementing Javascript(1)


Through external references

In external .js files (immediate/deferred)Much like CSS external reference

<script src=“script.js”></script>

Implementing Javascript(1I)


Variables Named elements that can change value

Data types Integer, floating-point, Boolean, string

Operators Assignment, comparison, arithmetic, Boolean, string, special

Control statements Conditions, loops

Keywords Reserved words with special meaning

Programming Constructs


To get the day of the month

var day = new Date().getDate();

To do something ten times

for (var x=0; x<10; x++) { document.write( x * x ); }

Some Basic Javascript


jQuery

Mootools

Prototype

YUI

Javascript Libraries


Developed in 2006 by John Resig.

jQuery is a lightweight JavaScript library that

emphasizes interaction between JavaScript and

HTML.

jQuery is an Open-Source JavaScript framework that

simplifies cross-browser client side scripting.

Animations

DOM (Document Object Model) manipulation

AJAX

Extensibility through plugins.

Introduction to Jquery


How do I get it

www.jquery.com

just download the jquery-x.x.x.js file and put it in

your website folder and include in your html

head section.

<script src="jquery-x.x.x.js"></script>

Installation of Jquery


Long story short, the DOM is your html document code. From the

<!DOCTYPE> to the </html>

The DOM is "ready" when everything on the page has loaded. • Stylesheets• JavaScripts• Images

In order to make sure that jQuery can find the element you asked it for, your browser needs to have loaded it (the DOM needs to be ready).

$(document).ready(function(){// insert jQuery code here…

});

Document Object Model(DOM)


$(document).ready(function(){

$

Initiates the jQuery function

$

=

jQuery

("p")

Grabs a DOM element using a CSS selector.

Selector is in quotes.

Creates a jQuery “Collection”

<p>

.addClass("isCool");

Built in method that adds a class to the jQuery

Collection

Class is in quotes.

ends with a semicolon.

Jquery Example


Html:<p>Hello World! I'm Eric</p>

Script:

$(document).ready(function(){$("p").addClass("isCool");

});

CSS:.isclass {“color:red;”}

Resulting html:<p class="isCool">Hello World! I'm Eric</p>

Example Implementation

Emerging Trends

in

Computer Science

and

Information

Technology


• Cloud Computing

• ERP

• Virtual Campus

• Digital Learning

Trends in Computer Science + Data Management


Benefit of Cloud Computing

• Reduces IT infrastructure cost of the company.

• Promotes the concept of virtualization, which enables server and storage device to be utilized across organization.

• Makes maintenance of software and hardware easier as installation is not required on each end user’s computer.


SPLASH : College Management System

Splash ERP is a complete school / college management software designed to automate a school's diverse operations from classes, exams to school events calendar. This college software has a powerful online community to bring parents, teachers and students on a common interactive platform.

Features :• Fully browser-based Software• Software can be run on intranet and public

internet. • It runs on minimal hardware and easily fits in

the budget of college. • Reports in PDF & Excel.• Support Smart Phones. (Apps available for

Splash).

Splash School / College Management System

ERP Software



The key stake holders in the system are:

Staff

Student

Teacher

Parent

Administrator



Modules :


Virtual Campus


Finance

Sales

Production/Projects

HR & Payroll

Inventory

Purchase

Marketing & CRM

ERP Software

Secura ERP for Manufacturing Industries.


Scientech offers SKU and Simtel Softwares comprising College and School level learning content.

E-Learning

Learning is Social

“Technology will not replace traditional learning. It will only help to improve it.”

SPLASH : Virtual Campus


• Mobile Computing• Connectivity• E-Business• Human-Computer Interaction• Social Networking• Biometric Technologies

Trends

Mobile Computing

Smart Phones

Tablets

iPads

GPS Systems

PDAs

Connectivity

Process

Popular Websites

E-Buisness

Human Computer Interaction

Touch Screen in Cell Phones

ATMs

Tablet PCs

GPS Devices

Social Networking


Identification of humans by their characteristics or traits.

Biometrics

2D Biometrics (CCD,IR, Laser, Scanner) 1D Biometrics


Technologies for Development

• Microsoft : VB.Net, C#.Net, Silverlight, WCF, WPF, VB6 • Java• PHP (Server Side Scripting Language)• Android• Web Development 2.0: HTML, CSS3, HTML5• Jquery, JavaScript, Ajax Scripting Languages• Database: SQLServer, MySQL, Oracle…


3D Graphics and Animations

3Ds Studio Max

Autodesk Maya

SoftImage

MudBox

3D Computer Graphics Software:

3D is the best way to show complex details of subject in a very simple and attractive manner which helps everyone to learn with an ease.

http://en.wikipedia.org/wiki/3D_computer_graphics_software


• Accounts Management Software• Airline Reservation System• Army Management System• ATM System• Auto Repair Shop Management System• Automotive Store Management System• Banking System• Bus Ticket Reservation• Car Rental System• Cafeteria Ordering System• Car Insurance System• Clothing Store Management• College Management System• Ebook Shopping• Enterprise Resource Planning System• Event Organizing, Planning and Management• Hospital Management System• Hostel Accommodation System• Hotel Management System• Household Budget Management System• Human Resource Management

Some Common Project Titles• Library Management System• Medical Store System• Mess Management System• Online Admission System• Online Auction System• Online Education System• Online Examination System• Online Food Ordering• Online Movie Ticket Booking System• Online Recruitment System• Online Shopping Inventory System• Online Travel Portal• Railway Reservation System• RTO Management System• School Management System• Student Attendance Management System• Super Market Management System• Toll Gate Check System• Traffic Management System• Vehicle Tracking System• Web Publishing System


• Software Application Development

• Web Development and Web Design

• Setups and Server Installation

• Networking

• ERP: Management Software's

• CRM Applications

• Software Testing

• Multimedia

• Internet Marketing

Opportunities in Computer Science


Future Trends

Augmented reality (AR) is a live, direct or indirect, view of a physical, real-world environment whose elements are augmented by computer-generated sensory input such as sound, video, graphics or GPS data. It is related to a more general concept called mediated reality, in which a view of reality is modified (possibly even diminished rather than augmented) by a computer.

Augmented Reality

Augmented Reality

Future Screen Technology

Google Glass is a wearable computer with a head-mounted display (HMD) that is being developed by Google in the Project Glass research and development project, with the mission of producing a mass-market ubiquitous computer. Google Glass displays information in a Smartphone-like hands-free format, that can interact with the Internet via natural language voice commands.

Google Glass

Google Glass


Gesture Recognition Technology


Thank you

Webdesigning and Emerging Trends

Documents

Transcript of Webdesigning and Emerging Trends