Upload
scientech
View
9
Download
4
Embed Size (px)
DESCRIPTION
Webdesigning
Citation preview
Because Learning is not only in Classroom
Welcome
Web Technologies(HTML, CSS, HTML5, Jquery,
JavaScript)
and
Emerging Trends in IT
Because Learning is not only in Classroom
Topics
• HTML
• CSS
• HTML5
• Javascript
• Jquery
• Live Demo
• Emerging Trends
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
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>
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
<html><head>
head content</head><body>
body content</body>
</html>
Structure of HTML
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
<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&" /></object>
HTML5 New Features
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)
Because Learning is not only in Classroom
Behavior(JavaScript)
Presentation
(CSS)
Content (HTML)
Cascading Style Sheets (CSS)
form the presentation layer of
the user interface.
CSS(Cascading Style Sheet)
Because Learning is not only in Classroom
CSS(Cascading Style Sheet)
Tells the browser agent how the element is to be presented to the
user.
<link rel=“stylesheet” type=“text/css” href=“path_to_css_document.css” />
Value of rel attribute is almost always stylesheet
Value of type is always text/css
Attaching CSS
Path of CSS document href
<head>
</head>
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
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
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)
Because Learning is not only in Classroom
Through external references
In external .js files (immediate/deferred)Much like CSS external reference
<script src=“script.js”></script>
Implementing Javascript(1I)
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
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)
Because Learning is not only in Classroom
$(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
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
• Cloud Computing
• ERP
• Virtual Campus
• Digital Learning
Trends in Computer Science + Data Management
Because Learning is not only in Classroom
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.
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
SPLASH : College Management System
The key stake holders in the system are:
Staff
Student
Teacher
Parent
Administrator
Because Learning is not only in Classroom
Finance
Sales
Production/Projects
HR & Payroll
Inventory
Purchase
Marketing & CRM
ERP Software
Secura ERP for Manufacturing Industries.
Because Learning is not only in Classroom
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
Because Learning is not only in Classroom
• Mobile Computing• Connectivity• E-Business• Human-Computer Interaction• Social Networking• Biometric Technologies
Trends
Because Learning is not only in Classroom
Identification of humans by their characteristics or traits.
Biometrics
2D Biometrics (CCD,IR, Laser, Scanner) 1D Biometrics
Because Learning is not only in Classroom
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…
Because Learning is not only in Classroom
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.
Because Learning is not only in Classroom
• 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
Because Learning is not only in Classroom
• 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
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
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