cutting edge technologies and professional matters on design and development of web applications
DESCRIPTION
TRANSCRIPT
Cutting Edge Technologies
and Professional Matters on
Design and Development of
Web Applications
Cutting Edge Technologies
on Design and Development
of Web Applications
Professional Matters on
Design and Development of
Web Applications
Cutting Edge Technologies on Design and
Development of Web Applications
123
Front-EndBack-EndA bit of SEO
1 Front-End
// HTML5// CSS3// JQUERY
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
New HTML5 Elements
<article>
<aside>
<details>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<nav>
<section>
<time>
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>
<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
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
Other New Features
And how about Browser Support?
•Canvas element <canvas>•Local Storage•OfflineCache
Browser Support
<new elements>
<audio>
<video>
<canvas>
LocalStorage
Offline Cache
53.6 4+ 11.110+ 7 8 9
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”>
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
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;}
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)
Browser Support
border-radius
text-shadow
box-shadow
gradients
53.6 4+ 11.110+ 7 8 9
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/
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
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“)
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’);
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 }); });});
Plugins
Image GalleriesSlideshows
Form submissions and validationAJAX requestsUI elementsAnimations
etc, etc
jQuery Plugins
2 Back-End
// CMSs// MVC Frameworks
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
Top CMSs
Vast selection of community supported, open source CMSs
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
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.
Top MVC Frameworks
3 A bit of SEO
// Semantic Markup// URL Re-Writing
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
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>
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
Professional Matters on Design and
Development of Web Applications
12
Design AgenciesFreelancing
1 Design Agencies
// Requirements// Project Workflow// Working in an Agency
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
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
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)
2 Freelancing
// Time management// Client management
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
YOUR WORST ENEMY
Time Management
•Turnoffallpossibledistractions•No Facebook, YouTube or Twitter etc•Stay focused (Max of 1-2 tasks at a time)
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.
