1. Lee Assam 09/14/2011 TEC 348.06 Guest Speaker

2. Agenda  About me  Analysis and requirements  Designing your site  Development and tools  Testing  Deployment and Maintenance

3. About me  Lee Assam  About 12 years Web Development experience  BSc in Electrical & Comp Engineering (UWI) and MSc in Information Systems (ISU)  Owner and Chief Software Architect of Treadstone Web Services, Bloomington IL http://www.treadstoneweb.com http://www.treadstoneweb.com  Senior Application Developer at Country Financial  Primarily work with Java, JSPs, PHP, jQuery  Develop web based applications and mobile applications  I prefer development that utilizes Open Source projects and software

4. Analysis and requirements  Understand the following Ultimate goal of website (conversions) Establish a content owner or group responsible for providing direction Determine target audience Process flow Map out hierarchy Estimate scope of site Come up with a plan for maintaining content

5. Designing and coding your site  Latest web development standards HTML 5 CSS 3  Frameworks for web design Javascript – jQuery PHP – Zend, Symfony, Cake JSP – Spring Webflow, Struts ASP.NET MVC  Search Engine Optimization

6. HTML 5   Resources http://diveintohtml5.org/ http://www.html5rocks.com/en/  New semantic elements Examples include ○ nav - navigation ○ article – news article web blog or forum post ○ figure – image, graphic or code sample ○ section – section of the page ○ aside – tangentially related page or content sidebar ○ header ○ footer

7. Your Website Your menu Article title Posted on September 4th 2009 by Writer - 6 comments Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Article title Posted on September 4th 2009 by Writer - 6 comments Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. About section Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Copyright 2009 Your name

8. HTML5 cont’d  New Input types with form validation where appropriate email date time url number search color

9. HTML5 cont’d  Local storage Mechanism for storing name value pairs that persist in the browser Data is stored as a string Local storage is domain specific (one instance per domain) Browser specific quotas ~ 5 MB limit Data never transmitted to remote web server and can be retrieved even if browser is closed localStorage.setItem(“name", “lee”); var user = localStorage.getItem(“name"); //... localStorage[“name"] = “lee”; var user = localStorage[“name"]; //... localstorage.removeItem(“name”); //removes value from local storage localstorage.clear(); //deletes everything from local storage

10. HTML5 cont’d  Video tags to play video natively without requiring third party plugin such as Flash Your browser does not support the video tag.  Web workers to spawn multiple threads in javascript Single thread in browser executes javascript code Web workers create multiple javascript threads that run independently of each other Example

11. CSS 3  CSS Roadmap http://www.w3.org/TR/CSS/http://www.w3.org/TR/CSS/  New options allow styles to be used instead of traditional graphics for professional looking websites  http://www.css3.info/preview/ http://www.css3.info/preview/ curved borders box shadows multiple backgrounds colors and opacity text effects

12. Frameworks for web design  Always use a framework for large projects  Do not reinvent the wheel  Use methods that have been tried and tested  Apply MVC (Model View Controller) architecture so your applications will Scale better Be easier to maintain Have separation of concerns Can be unit tested more easily

13. MVC  Model Manages and processes data from application data source (database, LDAP, flat file, web service etc)  View Presents information to user in a specific format (HTML 5, PDF, XML, SOAP)  Controller ○ Processes client requests and handles communication between model and view

14. MVC Image Source: http://php-html.net/tutorials/model-view-controller-in-php/http://php-html.net/tutorials/model-view-controller-in-php/

15. Javascript Framework  jQuery http://jquery.com/http://jquery.com/ Definition from jQuery website “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.“ Uses concept of chaining to make javascript code terse and efficient Works across all browsers and is platform independent Abstracts out complexities of Ajax calls For me personally, it makes web development a joy Start here http://docs.jquery.com/How_jQuery_Works http://docs.jquery.com/How_jQuery_Works

16. jQuery code example jQuery selector Selects a dom element or group of elements on the page $(“a”).click(function() { console.log(“A link was clicked!”); }); //Concept of chaining $("a").click(function() { console.log("A link was clicked!"); return false; }).css("color","#f00").fadeIn("slow");

17. Firebug Demo  What is firebug?  How can it assist in Web development?  What are some of the useful features?

18. PHP MVC Frameworks  Zend http://www.zend.com/en/  Symfony http://www.symfony-project.org/  Cake PHP http://cakephp.org/

19. Java Web MVC Frameworks  Used to develop JSPs (Java Server Pages) and JSF (Java Server Faces)  Struts http://struts.apache.org/  Spring Web Flow Spring Web MVC http://www.springsource.org/go-webflow2

20. ASP.NET MVC Framework  ASP.NET MVC http://www.asp.net/mvc

21. Search Engine Optimization SEO  You should design your site from the ground up with SEO in mind  Techniques Use heading tags for relevant content (, etc) Make effective use of meta keywords and description tags Use friendly urls ○ eg http://www.yoursite.com/products/books/fiction instead of http://www.yoursite.com?category=products&subcategory=123&lcatListingId=56 http://www.yoursite.com/products/books/fiction http://www.yoursite.com?category=products&subcategory=123&lcatListingId=56 Create a sitemap in xml format Have a robots.txt file

22. SEO cont’d  Add alt tags to images  Have a blog as search engine crawlers like updated content  Have reputable sites link to you  Cross link your site  Avoid flash based website design if possible  Ensure your code is well formed  Update your site content!

23. Development and tools  Coding Techniques  Performance Issues  Security  Tools and software

24. Coding Techniques  Use MVC for large projects  Use subversion or version control for your code. This helps in software development with multiple resources to prevent collisions  Continuous integration builds Jenkins and Maven JenkinsMaven  Use frameworks where possible

25. Coding Techniques cont’d  Abstract service design Your models can interact with Web services Website should not query database directly Should be done through an intermediate service layer  Use progressive enhancement for javascript design

26. Performance Issues  Minify javascript and css  Limit results of queries and lazy load pages  Index key fields on database tables Use of Apache Solr Open Source project for Google like search resultsApache Solr Open Source  Consolidate javascript into one file  Use HTML5 instead of images and backgrounds for styling  Use JSON instead of XML for AJAX calls ○ It is leaner and has a smaller payload on the wire ○ Easier to work with json in javascript

27. Security  SQL Injection  Cross site scripting  Use SSL certificates for parts of the site that collect sensitive information  For eCommerce use third party vendor for processing payments to protect against credit card theft (e.g. PayPal)

28. Tools and Software  PHP and Java development NetBeans Eclipse  Javascript Development Firebug plugin for Firefox  ASP.Net Development Microsoft Visual Studio Web Developer Express  Browsers Firefox and Google Chrome as they conform most to latest standards (HTML 5 and CSS 3) FirefoxGoogle Chrome  Testing Selenium for web testing Selenium JUnit for Java JUnit PHPUnit for PHP PHPUnit

29. Servers and software  Jenkins (Integration Builds) Jenkins  Subversion (installs for Linux and Visual SVN in Windows)Visual SVN  Apache / IIS (Web) ApacheIIS  Tomcat or JBoss (JSPs and EJBs) TomcatJBoss  Tortoise (SVN Client) Tortoise

30. Testing  For web apps unit test application logic  Selenium can be used to test functional and user interface sequence logic Selenium  JMeter can be used for backend services stress tests JMeter  Have different development environments Development testing Integration testing Acceptance testing Production

31. Deployment and maintenance  Any code that is deployed should be minified  Changes and deployments should be locked down and versioned in version control  Website content should be updated regularly to help SEO  Install Google Analytics to see trends and analyze site trafficGoogle Analytics

32. Open Source Shopping Carts  PHP Zen Cart osCommerce OpenCart PrestaShop

33. Questions  Thanks for your attention These images are trademarks of the various open source projects discussed in this presentation. Links to these resources have been provided.