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


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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
  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” “”><html xmlns=””><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=””></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 • box-shadow background: linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(/;
  19. 19. jQueryOpen-source Javascript Framework• Lightweight• CSS3 Compliant• Cross-BrowserInstallationGoogle Code RepositoryMinified Version - 31KB<script src=””></script>Developer Version - 229KB<script src=””></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“)
  21. 21. Some Simple Functions $(“div#gallery”).addClass(“active“); $(“”).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”); $(“”).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 SEO BAD (single article),HTML (multiple tag search) 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
  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 :) @iliasiovis