Download - Cutting edge technologies and professional matters on design and development of web applications
![Page 1: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/1.jpg)
Cutting Edge Technologies
and Professional Matters on
Design and Development of
Web Applications
![Page 3: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/3.jpg)
Cutting Edge Technologies
on Design and Development
of Web Applications
Professional Matters on
Design and Development of
Web Applications
![Page 4: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/4.jpg)
Cutting Edge Technologies on Design and
Development of Web Applications
123
Front-EndBack-EndA bit of SEO
![Page 5: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/5.jpg)
1 Front-End
// HTML5// CSS3// JQUERY
![Page 6: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/6.jpg)
HTML5Sample Page Markup XHTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> <link rel=”stylesheet” type=”text/css” href=”/css/style.css” /> <script type=”text/javascript” src=”/js/jquery.min.js”></script> <title>A page Title</title></head>
<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <link rel=”stylesheet” href=”/css/style.css” /> <script src=”/js/jquery.min.js”></script> <title>A page Title</title></head>
Sample Page Markup HTML5
![Page 7: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/7.jpg)
New HTML5 Elements
<article>
<aside>
<details>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<nav>
<section>
<time>
![Page 8: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/8.jpg)
Sample Page Markup XHTML 1.0 cont.<body><div id=”wrap”> <div id=”header”> <h1>Web Page Name</h1> </div> <div id=”content”> <div class=”article”> <div class=”post-info”> <h1>Headline</h1> <h2>Subtitle</h2> </div> <div class=”post”> <p>Lorem Ipsum</p> </div> </div> <div class=”article”> <!-- Second article --> </div> </div> <div id=”sidebar”> </div> <div id=”footer”> </div></div></body>
Sample Page Markup HTML5 cont.<body><div id=”wrap”> <header> <h1>Web Page Name</h1> </header> <section> <article> <hgroup> <h1>Headline</h1> <h2>Subtitle</h2> </hgroup> <section> <p>Lorem Ipsum</p> </section> </article> <article> <!-- Second article --> </article> </section> <aside> <!-- Sidebar --> </aside> <footer></footer></div></body>
![Page 9: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/9.jpg)
<audio>
Audio and Video Elements
<audio autoplay controls> <source src=”audio-file.ogg” type=”audio/ogg” /> <source src=”audio-file.mp3” type=”audio/mpeg” /></audio>
<video>
<video controls preload=”auto”> <source src=”video-file.mp4” type=”video/mp4”/> <source src=”video-file.ogv” type=”video/ogg”/><p>Fallback message - Your browser does not support the video element.</p></video>
Attributes:controlsautoplaylooppreload (auto,none)
All the above plus:height/widthposter
![Page 10: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/10.jpg)
Native Audio and Video Browser Players
Chrome Audio Player Controls
Safari Audio Player Controls
Firefox Audio Player Controls
Chrome Audio Player Controls
Firefox Audio Player Controls with Thumbnail
![Page 11: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/11.jpg)
Other New Features
And how about Browser Support?
•Canvas element <canvas>•Local Storage•OfflineCache
![Page 12: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/12.jpg)
![Page 13: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/13.jpg)
Browser Support
<new elements>
<audio>
<video>
<canvas>
LocalStorage
Offline Cache
53.6 4+ 11.110+ 7 8 9
![Page 14: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/14.jpg)
Browser Support
html5shiv
Modernizr
<!--[if lt IE 9]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]-->
<script src=”modernizr-1.5.min.js”></script>
<html class=”js no-boxshadow opacity cssanimations no-cssgradients”>
![Page 15: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/15.jpg)
CSS3
Border Radius (pixels)div.radius{ border:1px solid white; border-radius:5px;}
div.radius-top-left{ border:1px solid white; border-top-left-radius:5px;}
Browser Prefixes:-webkit-border-radius-moz-border-radius
![Page 16: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/16.jpg)
Shadows
Text Shadow (x-coord, y-coord, blur, color)
h1.shadow{ text-shadow:2px 2px 3px black;}
h1.shadow{ text-shadow:1px 1px 0 white, 2px 2px 0 #999999, 3px 3px 0 #999999, 4px 4px 0 #999999;}
Box Shadow (x-coord, y-coord, blur, spread,color)
div.shadow{ box-shadow:2px 2px 3px 1px black;}
div.shadow{ box-shadow:1px 1px 0 white, 2px 2px 0 #999999, 3px 3px 0 #999999, 4px 4px 0 #999999;}
![Page 17: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/17.jpg)
Gradients
background: -moz-linear-gradient(top, #feffff 0%, #686f7a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#686f7a));
background: -webkit-linear-gradient(top, #feffff 0%,#686f7a 100%);
background: -o-linear-gradient(top, #feffff 0%,#686f7a 100%);
background: -ms-linear-gradient(top, #feffff 0%,#686f7a 100%);
background: linear-gradient(top, #feffff 0%,#686f7a 100%);
Linear Gradient (position, color, color)
![Page 18: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/18.jpg)
Browser Support
border-radius
text-shadow
box-shadow
gradients
53.6 4+ 11.110+ 7 8 9
![Page 19: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/19.jpg)
![Page 20: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/20.jpg)
Browser Support
CSS3Pie
Add support for:•border-radius•gradients•box-shadow
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);
http://www.css3pie.com/
![Page 21: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/21.jpg)
![Page 22: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/22.jpg)
jQueryOpen-source Javascript Framework
Google Code Repository
Minified Version - 31KB<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>
Developer Version - 229KB<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js”></script>
Local Installation<script src=”/js/jquery.js”></script>
Installation
•Lightweight•CSS3 Compliant•Cross-Browser
![Page 23: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/23.jpg)
Selecting Elements
Selecting Elements
Selecting Elements by ID
Selecting Elements by Class
$(“div“)$(“p > img“)
$(“#header“)$(“div a#next“)
$(“.gallery-img“)$(“img.bordered“)
$(“div#nav ul li.active“)
![Page 24: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/24.jpg)
Some Simple Functions
$(“div#gallery”).addClass(“active“);
$(“div.post”).append(“<p>Posted by User</p>“);
$(“a.path”).html(“Click <span>Here</span>”);
$(“div.className”).each( function(){ //do for each div.className found});
$(“a.image”).attr(‘title’,’This is an image link’);
$(“a.white”).css(“color”,”#fff”);
$(“a.black”).css({‘background-color’: ‘#ffe’, ‘border’: ‘5px solid #ccc’, ‘color’ : ‘#000’});
$(“div.hidden”).hide();
$(“div#id”).show();
$(“div.animated”).animate({opacity: ‘0.5’, color: ‘#000’},1500);
$(“div.animated”).animate({width: ‘150px’, background-color: ‘#fff’},’fast’);
![Page 25: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/25.jpg)
Chaining
$(“div#gallery”).addClass(“active“).animate({width: ‘200px’},’slow’, function(){ //function to do after animation is completed}).fadeOut(‘fast’).fadeIn(‘slow’);
$(“a#submit”).click(function(event){ event.preventDefault(); $(“div.test-form”).each(function(){ $(this).fadeOut(“fast”, function() { //function after fade out is completed }) .children(‘form’) .submit(function(){ //ajax methods here }); });});
![Page 26: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/26.jpg)
Plugins
Image GalleriesSlideshows
Form submissions and validationAJAX requestsUI elementsAnimations
etc, etc
jQuery Plugins
![Page 27: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/27.jpg)
2 Back-End
// CMSs// MVC Frameworks
![Page 28: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/28.jpg)
CMSs
Wikipedia on CMSs:
A web content management system (WCMS or Web CMS) is a content man-agement system (CMS) software, usually implemented as a Web application, for creating and managing HTML content. It is used to manage and control a large, dynamic collection of Web material (HTML documents and their associ-ated images). A CMS facilitates content creation, content control, editing, and many essential Web maintenance functions.
“
Ready-made, PHP-based, content management system for easy dynamic HTML pages
![Page 29: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/29.jpg)
Top CMSs
Vast selection of community supported, open source CMSs
![Page 30: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/30.jpg)
![Page 31: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/31.jpg)
MVC Frameworks
Wikipedia on MVCs:
Model–view–controller (MVC) is a software architecture,currently considered an architectural pattern used in software engineering. The pattern isolates “domain logic” (the application logic for the user) from the user interface (input and presentation), permitting independent development, testing and maintenance of each (separation of concerns).
“M-V-C stands for Model - View - Controller
Benefits:•Rapid Prototyping•Simpler & easier maintenance•Independent front & back end development•Small learning curve
![Page 32: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/32.jpg)
How they work
Model
View
Controller
Connects to the DB and is made up of data (most of the times it’s a table). It also includes relationships with other Models.
Displays Model data received from Controllers to the user usually in HTML format.
Gets data from Models using Actions and passes them on to the Views.
![Page 33: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/33.jpg)
Top MVC Frameworks
![Page 34: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/34.jpg)
3 A bit of SEO
// Semantic Markup// URL Re-Writing
![Page 35: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/35.jpg)
Semantic MarkupBenefits:•Ease of use•Accessibility•Search Engine Optimisation•Repurposing
Guidelines:•Write clean HTML (correct use of tags, headings etc)
•Separate Content from Design•Use meaningful IDs and reusable Class names
![Page 36: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/36.jpg)
Semantic Markup examples
<div class=”red”></div>
<div class=”grid_6”></div>
<b><font size=”3″ color=”#000000″> Headline</font></b>
<div class=”circle”> Content inside a Circle</div>
<div class=”article”></div>(or <article></article>)
<div class=”content”></div>(or <section></section>
<h1>Heading</h1><h2>Heading 2</h2>
<div class=”widgetname”> Content inside a Circle</div>
![Page 37: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/37.jpg)
URL ReWrittingNicer/Readable URLs = Better SEO
http://www.google.gr/search?q=joomla&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
http://forum.joomla.org/viewtopic.php?p=2047158
BADhttp://www.mpougatsamekodika.gr/article/135 (single article)
http://www.mpougatsamekodika.gr/articles/DESIGN,HTML (multiple tag search)
http://www.gadget-shop.gr/products/view/15001
GOOD
![Page 38: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/38.jpg)
Professional Matters on Design and
Development of Web Applications
12
Design AgenciesFreelancing
![Page 39: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/39.jpg)
1 Design Agencies
// Requirements// Project Workflow// Working in an Agency
![Page 40: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/40.jpg)
RequirementsUI/Web Designer•Past Experience•Impressive Portfolio•Design Skills & Aesthetics
•Adobe Photoshop or Fireworks
•Compliance with Web Standards
•Front-end coding experience
•Team Player
Web Developer•Past Experience•PHP & MySQL (or .ASP etc)
•Familiar with MVC Frameworks
•Experience with ready-made CMSs and E-Commerce Systems
•Compliance with Web Standards
•Team Player
![Page 41: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/41.jpg)
1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance
Project Workflow
Client QuestionnaireFinalize Requirements
Project ManagementTime Diagram Drafts
Task Analysis
Design PrototypingClient Consultation
Application PrototypingReview Requirements
Test ApplicationFix Bugs and Deliver
Further Support or Additional Features
![Page 42: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/42.jpg)
Working in an AgencyPros:•No worries at home•Focus on your skills•Surrounded by creative individuals
•Develop a future career•Bigger projects / Bigger clients
•No dealing with clients in person
Cons:•Strict hours•No compulsive vacations•Boss/Manager over your head
•Compromise (bigger picture)
![Page 43: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/43.jpg)
2 Freelancing
// Time management// Client management
![Page 44: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/44.jpg)
Time Management
•Keep track of your time•Organize - Prioritize•Work a max of 8 to 10 hours/day•Take quick breaks throught the day•Play it safe and add 10% more hours of work when deciding on a deadline with a client
![Page 45: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/45.jpg)
YOUR WORST ENEMY
![Page 46: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/46.jpg)
Time Management
•Turnoffallpossibledistractions•No Facebook, YouTube or Twitter etc•Stay focused (Max of 1-2 tasks at a time)
![Page 47: Cutting edge technologies and professional matters on design and development of web applications](https://reader035.vdocuments.site/reader035/viewer/2022062614/54624602b1af9f7d228b4dc5/html5/thumbnails/47.jpg)
Client Management
7 Guidelines:
1. Marketing - Your service is your product.2. Payment Options (Per hour/Per project, upfront).3. Clarify Job description.4. Set service boundaries and future support.5. Provide Contracts.6. Educate them.7. Know when to say NO.