Cutting Edge Technologiesand Professional Matters onDesign and Development ofWeb Applications
Ilias IovisWeb & Graphics DesignerWeb Developerwww.iliasiovis.cominfo@iliasiovis.com@iliasiovis
Cutting Edge Technologieson Design and Developmentof Web ApplicationsProfessional Matters onDesign and Development ofWeb A...
Cutting Edge Technologies on Design and    Development of Web Applications          1 Front-End          2 Back-End       ...
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/xhtm...
New HTML5 Elements<article>            <header><aside>              <hgroup><details>            <mark><figure>           ...
Sample Page                           Sample PageMarkup XHTML 1.0                      Markup HTML5cont.                  ...
Audio and Video Elements<audio><audio autoplay controls>    <source src=”audio-file.ogg” type=”audio/ogg” />              ...
Native Audio and VideoBrowser Players Firefox Audio Player Controls                                 Chrome Audio Player Co...
Other New Features •	 Canvas  element <canvas> •	 Local Storage •	 Offline	Cache                               And how abo...
Browser Support                  10+   3.6 4+   11.1   5   7 8 9 <new elements> <audio> <video> <canvas> LocalStorage Offl...
Browser Support    html5shiv <!--[if lt IE 9]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> ...
CSS3Border Radius (pixels)div.radius                    div.radius-top-left               Browser Prefixes:{              ...
Shadows Text Shadow (x-coord, y-coord, blur, color) h1.shadow                               h1.shadow {                   ...
Gradients Linear Gradient (position, color, color) background: -moz-linear-gradient(top, #feffff 0%, #686f7a 100%); backgr...
Browser Support                 10+   3.6 4+   11.1   5   7 8 9 border-radius text-shadow box-shadow gradients
Browser Support CSS3Pie Add support for: •	 border-radius •	 gradients                                http://www.css3pie.c...
jQueryOpen-source Javascript Framework•	 Lightweight•	 CSS3 Compliant•	 Cross-BrowserInstallationGoogle Code RepositoryMin...
Selecting Elements  Selecting Elements                       $(“div“)                     $(“p > img“)  Selecting Elements...
Some Simple Functions $(“div#gallery”).addClass(“active“); $(“div.post”).append(“<p>Posted by User</p>“); $(“a.path”).html...
Chaining $(“div#gallery”).addClass(“active“) .animate({width: ‘200px’},’slow’, function(){     //function to do after anim...
Plugins                  jQuery Plugins                  Image Galleries                    Slideshows          Form submi...
2    Back-End    // CMSs    // MVC Frameworks
CMSsReady-made, PHP-based, content managementsystem for easy dynamic HTML pagesWikipedia on CMSs:“    A web content manage...
Top CMSs  Vast selection of community supported, open  source CMSs
MVC FrameworksM-V-C stands for Model - View - ControllerWikipedia on MVCs:“    Model–view–controller (MVC) is a software a...
How they work Model Connects to the DB and is made up of data (most of the times it’s a table). It also includes relations...
Top MVC Frameworks
3    A bit of SEO    // Semantic Markup    // URL Re-Writing
Semantic MarkupBenefits:•	 Ease of use•	 Accessibility•	 Search Engine Optimisation•	 RepurposingGuidelines:•	 Write clean...
Semantic Markup examples <div class=”red”></div>              <div class=”article”></div>                                 ...
URL ReWritting          Nicer/Readable URLs = Better SEOhttp://www.google.gr/search?q=joomla&ie=utf-8&oe=utf-8&aq=t&rls=or...
Professional Matters on Design and Development of Web Applications    1 Design Agencies    2 Freelancing
1    Design Agencies    // Requirements    // Project Workflow    // Working in an Agency
RequirementsUI/Web Designer           Web Developer•	 Past Experience        •	 Past Experience•	 Impressive Portfolio   •...
Project Workflow                  Client Questionnaire                Finalize Requirements     1. Information Gathering  ...
Working in an AgencyPros:•	 No worries at home•	 Focus on your skills•	 Surrounded by creative   individuals•	 Develop a f...
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 ...
YOUR WORST ENEMY
Time Management  •	 Turn	off	all	possible	distractions  •	 No Facebook, YouTube or Twitter etc  •	 Stay focused (Max of 1-...
Client Management7 Guidelines:1. Marketing - Your service is your product.2. Payment Options (Per hour/Per project, upfron...
Thank you :)               www.iliasiovis.com               info@iliasiovis.com               @iliasiovis
Cutting edge technologies and professional matters on design and development of web applications
Cutting edge technologies and professional matters on design and development of web applications
Cutting edge technologies and professional matters on design and development of web applications
Cutting edge technologies and professional matters on design and development of web applications
Upcoming SlideShare
Loading in...5
×

Cutting edge technologies and professional matters on design and development of web applications

1,352

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,352
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Cutting edge technologies and professional matters on design and development of web applications"

  1. 1. Cutting Edge Technologiesand Professional Matters onDesign and Development ofWeb Applications
  2. 2. Ilias IovisWeb & Graphics DesignerWeb Developerwww.iliasiovis.cominfo@iliasiovis.com@iliasiovis
  3. 3. Cutting Edge Technologieson Design and Developmentof Web ApplicationsProfessional Matters onDesign and Development ofWeb Applications
  4. 4. Cutting Edge Technologies on Design and Development of Web Applications 1 Front-End 2 Back-End 3 A bit of SEO
  5. 5. 1 Front-End // HTML5 // CSS3 // JQUERY
  6. 6. 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>Sample Page Markup HTML5<!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>
  7. 7. New HTML5 Elements<article> <header><aside> <hgroup><details> <mark><figure> <nav><figcaption> <section><footer> <time>
  8. 8. Sample Page Sample PageMarkup XHTML 1.0 Markup HTML5cont. cont.<body> <body><div id=”wrap”> <div id=”wrap”> <div id=”header”> <header> <h1>Web Page Name</h1> <h1>Web Page Name</h1> </div> </header> <div id=”content”> <section> <div class=”article”> <article> <div class=”post-info”> <hgroup> <h1>Headline</h1> <h1>Headline</h1> <h2>Subtitle</h2> <h2>Subtitle</h2> </div> </hgroup> <div class=”post”> <section> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> </div> </section> </div> </article> <div class=”article”> <article> <!-- Second article --> <!-- Second article --> </div> </article> </div> </section> <div id=”sidebar”> <aside> </div> <!-- Sidebar --> <div id=”footer”> </aside> </div> <footer></footer></div> </div></body> </body>
  9. 9. Audio and Video Elements<audio><audio autoplay controls> <source src=”audio-file.ogg” type=”audio/ogg” /> Attributes: <source src=”audio-file.mp3” type=”audio/mpeg” /></audio> controls autoplay loop preload (auto,none)<video><video controls preload=”auto”> <source src=”video-file.mp4” type=”video/mp4”/> All the above plus: <source src=”video-file.ogv” type=”video/ogg”/><p>Fallback message - Your browser does not support height/widththe video element.</p></video> poster
  10. 10. Native Audio and VideoBrowser Players Firefox Audio Player Controls Chrome Audio Player Controls Safari Audio Player Controls Chrome Audio Player Controls Firefox Audio Player Controls with Thumbnail
  11. 11. Other New Features • Canvas element <canvas> • Local Storage • Offline Cache And how about Browser Support?
  12. 12. Browser Support 10+ 3.6 4+ 11.1 5 7 8 9 <new elements> <audio> <video> <canvas> LocalStorage Offline Cache
  13. 13. Browser Support html5shiv <!--[if lt IE 9]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]--> Modernizr <script src=”modernizr-1.5.min.js”></script> <html class=”js no-boxshadow opacity cssanimations no-cssgradients”>
  14. 14. CSS3Border Radius (pixels)div.radius div.radius-top-left Browser Prefixes:{ { -webkit-border-radius border:1px solid white; border:1px solid white; -moz-border-radius border-radius:5px; border-top-left-radius:5px;} }
  15. 15. Shadows Text Shadow (x-coord, y-coord, blur, color) h1.shadow h1.shadow { { text-shadow:2px 2px 3px black; 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 div.shadow { { box-shadow:2px 2px 3px 1px black; box-shadow:1px 1px 0 white, } 2px 2px 0 #999999, 3px 3px 0 #999999, 4px 4px 0 #999999; }
  16. 16. Gradients Linear Gradient (position, color, color) 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%);
  17. 17. Browser Support 10+ 3.6 4+ 11.1 5 7 8 9 border-radius text-shadow box-shadow gradients
  18. 18. Browser Support CSS3Pie Add support for: • border-radius • gradients http://www.css3pie.com/ • box-shadow background: linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(/PIE.htc);
  19. 19. jQueryOpen-source Javascript Framework• Lightweight• CSS3 Compliant• Cross-BrowserInstallationGoogle Code RepositoryMinified 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>
  20. 20. Selecting Elements Selecting Elements $(“div“) $(“p > img“) Selecting Elements by ID $(“#header“) $(“div a#next“) Selecting Elements by Class $(“.gallery-img“) $(“img.bordered“) $(“div#nav ul li.active“)
  21. 21. 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’);
  22. 22. 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 }); }); });
  23. 23. Plugins jQuery Plugins Image Galleries Slideshows Form submissions and validation AJAX requests UI elements Animations etc, etc
  24. 24. 2 Back-End // CMSs // MVC Frameworks
  25. 25. CMSsReady-made, PHP-based, content managementsystem for easy dynamic HTML pagesWikipedia 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.
  26. 26. Top CMSs Vast selection of community supported, open source CMSs
  27. 27. MVC FrameworksM-V-C stands for Model - View - ControllerWikipedia 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).Benefits:• Rapid Prototyping• Simpler & easier maintenance• Independent front & back end development• Small learning curve
  28. 28. How they work Model 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. View Displays Model data received from Controllers to the user usually in HTML format. Controller Gets data from Models using Actions and passes them on to the Views.
  29. 29. Top MVC Frameworks
  30. 30. 3 A bit of SEO // Semantic Markup // URL Re-Writing
  31. 31. Semantic MarkupBenefits:• Ease of use• Accessibility• Search Engine Optimisation• RepurposingGuidelines:• Write clean HTML (correct use of tags, headings etc)• Separate Content from Design• Use meaningful IDs and reusable Class names
  32. 32. Semantic Markup examples <div class=”red”></div> <div class=”article”></div> (or <article></article>) <div class=”grid_6”></div> <div class=”content”></div> (or <section></section> <b><font size=”3″ color=”#000000″> <h1>Heading</h1> Headline <h2>Heading 2</h2> </font></b> <div class=”circle”> <div class=”widgetname”> Content inside a Circle Content inside a Circle </div> </div>
  33. 33. URL ReWritting Nicer/Readable URLs = Better SEOhttp://www.google.gr/search?q=joomla&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-ahttp://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
  34. 34. Professional Matters on Design and Development of Web Applications 1 Design Agencies 2 Freelancing
  35. 35. 1 Design Agencies // Requirements // Project Workflow // Working in an Agency
  36. 36. RequirementsUI/Web Designer Web Developer• Past Experience • Past Experience• Impressive Portfolio • PHP & MySQL (or .ASP• Design Skills & etc) Aesthetics • Familiar with MVC• Adobe Photoshop or Frameworks Fireworks • Experience with• Compliance with Web ready-made CMSs and Standards E-Commerce Systems• Front-end coding • Compliance with Web experience Standards• Team Player • Team Player
  37. 37. Project Workflow Client Questionnaire Finalize Requirements 1. Information Gathering Project Management Time Diagram Drafts 2. Planning Task Analysis Design Prototyping Client Consultation 3. Design Application Prototyping Review Requirements 4. Development Test Application Fix Bugs and Deliver 5. Testing and DeliveryFurther Support or Additional Features 6. Maintenance
  38. 38. Working in an AgencyPros:• No worries at home• Focus on your skills• Surrounded by creative individuals• Develop a future career Cons:• Bigger projects / Bigger • Strict hours clients • No compulsive vacations• No dealing with clients in • Boss/Manager over your person head • Compromise (bigger picture)
  39. 39. 2 Freelancing // Time management // Client management
  40. 40. 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
  41. 41. YOUR WORST ENEMY
  42. 42. Time Management • Turn off all possible distractions • No Facebook, YouTube or Twitter etc • Stay focused (Max of 1-2 tasks at a time)
  43. 43. Client Management7 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.
  44. 44. Thank you :) www.iliasiovis.com info@iliasiovis.com @iliasiovis
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×