Methodist University Website Training Presentation
- 1. Presented by Holly Walden Ross
- 2. • • • • • • • • Static HTML sites vs. Web 2.0 interactive sites Responsive Web Design Cons of creating a site completely in Adobe Flash Domain Names Webhosting Creating your site Promoting your site Resources
- 3. Static HTML pages contain content that is not updated frequently (or ever) More “current” type of website design contains “web 2.0” features that are dynamic, interactive content that feeds into the site from multiple users and/or social media integration (Facebook, Twitter, RSS, blogs, etc.)
- 4. Wikipedia: “a web design approach aimed at crafting sites to aprovide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).” A cost-effective alternative to mobile applications. In late 2012, Google recommended responsive design in its Webmaster’s Guide: “Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”
- 6. Websites created completely with Adobe Flash can be aesthetically-pleasing, but realize the limitations – mainly that Flash cannot be viewed on Apple devices such as iPhones and iPads. If you choose to create a site with a heavy percentage of Flash content, then plan to provide an alternative site for Mobile and Apple users to view your content or else risk losing them from your audience. HTML 5 is taking the place of Flash because its interactive nature is viewable on mobile devices. I HIGHLY recommend using HTML 5 instead of Flash. http://showitfast.com is a drag & drop building tool ($), aimed at photographers, that uses both Flash & HTML 5
- 7. ‣ A Domain Name is www.YourNameHere.extension, for example: ‣ ‣ Optional, as most hosting provides “yourname.hostingcompany.com” URL Tips from eHow.com about registering a name: ‣ Register domains with a Domain Name Registrar ‣ www.METHODIST.edu - Also called a “URL” (Universal Resource Locator) ‣ Have a list of possible names ready when you visit the site. ‣ The more unusual the name, the more likely it will be available. Most common or well-known corporate names are taken. ‣ If the domain name is already taken and you desperately want it, you may contact the owner and offer to buy it. www.BetterWhoIs.com lets you see owner details of any domain name unless they use Privacy Protection. ‣ Most (in)famous registrar is GoDaddy.com and often cheapest ‣ Coupon codes usually available on www.RetailMeNot.com ‣ $7-10/year is a reasonable price; Should never pay $35! ‣ Use a secure password and remember it… if you forget to renew your domain name, a squatter may buy it and try to sell it back to you for $$$$. ‣ Be aware of “add-ons” and up-sales during the checkout process! ‣ Some web hosting providers provide domain names “Free for Life” or include w/ hosting
- 8. • Hosting is the computer in “Internet-land” on which you store the files for your site • Free plans: – Usually have advertising built in to your page that you cannot control – Sometimes limited access or tools for building your site without add-ons that cost $ • Paid hosting providers: – Stick with reputable companies; beware of review sites that just want to get the affiliate traffic. To get the best pricing, sign up for a multi-year package. – Great 24/7 tech support is a must for newbies!
- 9. • • • • • • http://www.HostGator.com/ – an industry leader http://ASmallOrange.com – based out of Durham, NC http://www.bluehost.com/ – another popular choice Many will provide “Unlimited” Space & Bandwidth, etc. Look for companies that offer “cPanel”, “Fantastico” or 1-Click Script Installs for Wordpress and other apps. http://www.simplescripts.com will also install over 70 top applications on your site as well. Cheaper $ is not always better. Read customer reviews.
- 10. • • • HTML coding: Notepad, Code View in Adobe Dreamweaver WYSIWYG: Adobe Dreamweaver, Microsoft FrontPage (antiquated) Free online website builders: MANY! Some good examples: www.weebly.com www.wix.com www.squarespace.com www.blogger.com – popular blogging site, free, owned by Google • sites.google.com - Google sites – good for sharing data, info www.about.me – simple one page landing site for social media (beware of advertising, gotchas, and limitations on others) Content Management Systems – Wordpress – Joomla! — Drupal — Many others too
- 13. According to Wikipedia.com: A content management system (CMS) is the collection of procedures used to manage work flow in a collaborative environment. These procedures can be manual or computer-based. The procedures are designed to do the following: ◦ Allow for a large number of people to contribute to and share stored data ◦ Control access to data, based on user roles (defining which information users or user groups can view, edit, publish, etc.) ◦ Aid in easy storage and retrieval of data ◦ Reduce repetitive duplicate input ◦ Improve the ease of report writing ◦ Improve communication between users A web content management (WCM) system is a CMS designed to simplify the publication of web content to web sites and mobile devices — in particular, allowing content creators to submit content without requiring technical knowledge of HTML or the uploading of files.
- 14. Wordpress is easily one of the standards in CMS website design right now. Millions of sites have been built using Wordpress with tens of millions of viewers daily. Wordpress.com -> hosts your site for free, but with restrictions and add-ons available for $. Wordpress.org -> Self-hosted Wordpress can be installed on a hosting package you buy from a hosting provider (like A Small Orange) and is unlimited with what you can add on through plugins and themes. A great guide for “How to launch a self-hosted Wordpress blog in 20 minutes” is here: http://michaelhyatt.com/ez-wordpress-setup.html
- 15. Great websites usually have GREAT Photography/Photos. • Using your own photos: – Free: www.Flickr.com or Google’s www.Picasaweb.com / Google+ • Pros: Free, Picasaweb integrates with Google Picasa software (picasa.google.com); Flickr now offers all users 1 TERABYTE of storage space = 537, 731 6.5 megapixel photos! • Cons: Less control over layout, Flickr is very “public”; Picasa requires Google account; additional storage space past basic limit on Google will cost you $$; Google space shared w/ Gmail and Google Drive files. – Paid: (my favorite) www.Smugmug.com • Free 14-day trial, NO ads, anyone can leave a comment, gorgeous professional layouts. Customizable with themes/CSS. Pro account lets you sell photos for a profit. $5 off annual price with coupon code: uovmhuZK0NZ2k • Using your own videos: – Upload your video to one of these sites and then embed on your page • www.YouTube.com – quickest way to spread your video virally to world • www.Vimeo.com – very popular with video professionals
- 16. You can also get stock photos from sites such as: www.sxc.hu – leading free stock photography site. A great place to start – lots of options. www.istockphoto.com (paid) – one-time cost of a few dollars per image; only need the 72 dpi version for web. Search for “stock images” to find other resources such as shutterstock.com. www.cgtextures.com – thousands of free texture and background photos
- 17. • Make some $$ – www.google.com/adsense – Use affiliate banners and code for online services you already frequent in order to get referral money or credits • • Feedburner.com creates an RSS feed with analysis Search Engine Optimization – For Wordpress – Use the “All-in-One SEO Plugin Pack” - training videos for using this SEO plugin which is THE most downloaded plugin for WP (15.8 Million downloads) – Free & Pro versions available http://ithemes.com/wordpress-seo-free-video-training-with-michael-torbert – More tips on SEO: http://www.ehow.com/how_7785778_learn-seo-online.html
- 18. http://goldentwig.weebly.com (sample site created in 20 min) http://about.me/hollywaldenross http://goldentwig.blogspot.com Wordpress examples: www.asherwin.com www.NCMathCompetition.org Dreamweaver site: www.twiceasnice4tots.com
- 19. Self-Serve Resources: http://www.meetup.com/Raleigh-WordPress-Meetup-Group http://www.meetup.com/Fayetteville-Tech-Geeks/ http://WordCampRaleigh.com – November 23-24, 2013 at NCSU http://www.lynda.com – MANY training videos, some are free http://www.smashingmagazine.com – fabulous resource for designers/creatives http://www.sitepoint.com – Targets web professionals, specifically developers & designers When in doubt about something, be specific and just Google it! There are thousands of free tutorials and websites with tips on Wordpress, Plugins, Themes, Graphic Design, HTML, and everything else you could question. Sign up for email lists, Facebook pages and blogs to feed your learning and knowledge. Professional Resource: Holly Ross, Golden Twig Creations Computer Training, Web & Graphic Design, hourly rates vary This presentation available at: http://www.slideshare.net/goldentwig/methodist-university-website-training-presentation
- 20. • Use one of the methods below to create your own site: 1. Simple Drag & Drop static site: www.Weebly.com 2. Blog www.blogger.com 3. More sophisticated, CMS site: www.Wordpress.com
- 21. Notes: