WEBSITE DESIGN AND ECOMMERCE BEST PRACTICES Lee Assam 09/14/2011 TEC 348.06 Guest Speaker
Lee Assam 09/14/2011 TEC 348.06 Guest Speaker. Agenda About me Analysis and requirements Designing your site Development and tools Testing
Dec 23, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
WEBSITE DESIGN AND ECOMMERCE BEST PRACTICES
Lee Assam
09/14/2011
TEC 348.06 Guest Speaker
Agenda
About me Analysis and requirements Designing your site Development and tools Testing Deployment and Maintenance
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 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
Analysis and requirements Understand the following
Ultimate goal of website (conversions)Establish a content owner or group
responsible for providing directionDetermine target audienceProcess flowMap out hierarchyEstimate scope of siteCome up with a plan for maintaining content
Designing and coding your site Latest web development standards
HTML 5CSS 3
Frameworks for web designJavascript – jQueryPHP – Zend, Symfony, CakeJSP – Spring Webflow, StrutsASP.NET MVC
Search Engine Optimization
HTML 5
<!DOCTYPE HTML> Resources
http://diveintohtml5.org/http://www.html5rocks.com/en/
New semantic elementsExamples 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
<!DOCTYPE HTML>
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Your Website</title></head>
<body>
<header> <nav> <ul> <li>Your menu</li> </ul> </nav> </header>
<section>
<article> <header> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </article>
<article> <header> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </article>
</section>
<aside> <h2>About section</h2> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </aside>
<footer> <p>Copyright 2009 Your name</p> </footer>
</body>
</html>
HTML5 cont’d New Input types with form validation where
appropriateemail datetimeurlnumbersearchcolor
<form> <input type="email"> <input type="submit" value="Go">
</form>
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
HTML5 cont’d
Video tags to play video natively without requiring third party plugin such as Flash<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video>
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
CSS 3 CSS Roadmap 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/ curved bordersbox shadowsmultiple backgroundscolors and opacitytext effects
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 willScale betterBe easier to maintainHave separation of concernsCan be unit tested more easily
MVC Model
Manages and processes data from application data source (database, LDAP, flat file, web service etc)
ViewPresents information to user in a specific
format (HTML 5, PDF, XML, SOAP) Controller
○ Processes client requests and handles communication between model and view
MVC
Image Source: http://php-html.net/tutorials/model-view-controller-in-php/
Javascript Framework jQuery 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 callsFor me personally, it makes web development a joyStart here
http://docs.jquery.com/How_jQuery_Works
jQuery code examplejQuery 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");
Firebug Demo
What is firebug? How can it assist in Web development? What are some of the useful features?
PHP MVC Frameworks
Zendhttp://www.zend.com/en/
Symfonyhttp://www.symfony-project.org/
Cake PHPhttp://cakephp.org/
Java Web MVC Frameworks
Used to develop JSPs (Java Server Pages) and JSF (Java Server Faces)
Strutshttp://struts.apache.org/
Spring Web FlowSpring Web MVC http://www.springsource.org/go-webflow2
Search Engine Optimization SEO You should design your site from the
ground up with SEO in mind Techniques
Use heading tags for relevant content (<h1>, <h2> 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
Create a sitemap in xml formatHave a robots.txt file
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!
Development and tools
Coding Techniques Performance Issues Security Tools and software
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 buildsJenkins and Maven
Use frameworks where possible
Coding Techniques cont’d Abstract service design
Your models can interact with Web servicesWebsite should not query database directlyShould be done through an intermediate
service layer Use progressive enhancement for
javascript design
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 results
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
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)
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) Testing
Selenium for web testing JUnit for Java PHPUnit for PHP
Servers and software
Jenkins (Integration Builds) Subversion (installs for Linux and
Visual SVN in Windows) Apache / IIS (Web) Tomcat or JBoss (JSPs and EJBs) Tortoise (SVN Client)
Testing For web apps unit test application logic Selenium can be used to test functional and
user interface sequence logic JMeter can be used for backend services
stress tests Have different development environments
Development testingIntegration testingAcceptance testingProduction
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 traffic
Open Source Shopping Carts PHP
Zen CartosCommerceOpenCartPrestaShop
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.
Related Documents
