Presentation Angie Biotech

Document Sample
Presentation Angie Biotech Powered By Docstoc
					Session 6
                         Course Outline
                                  Session 7
Session 6
Hosting and Domain Names          Pixels and Resolution
                                  Formats and Sizing
More on Usability
Tables, Lists, and CSS            Erasing the Background
                                  Increase Image Size
Just Browse Around Dreamweaver    Crop an Image

                                  Session 8
Speeding up Your Website load
                                  Microsoft Office Picture Manager
                                  Additional Free Graphics Products
                                  To Flash or not to Flash? A Controversy.
                                  Delete Your Files
                                  Recap and Student evaluations
                                   Web Hosting

A web hоsting service is a type of Internet hosting service that allows
individuals and organizations to make their website accessible via the
World Wide Web.

Web hosts are companies that provide space on a server owned or leased
for use by clients, as well as, providing Internet connectivity, typically in a
data center.
                               Web Hosting


Considerations for Web Hosting:
1. Space: How much file space do you need?
2. Support: Are technicians or web personnel available to help you?
3. Cost: Hosting can range from a few dollars to thousands per month.
4. Feature Support: Support for databases or programming languages.
5. User Interface: Easy to use C-Panel or other user interface
6. Availability: percentage of a year in which the website is publically
   accessible and reachable via the internet (“Website Uptime”)
Web Hosting

Uptime and Downtime
Website Uptime:              Notice the BIG difference between 99% and 99.99%!

 Availability %           Downtime per year   Downtime per month*   Downtime per week

 90% ("one nine")               36.5 days           72 hours             16.8 hours
 95%                           18.25 days           36 hours              8.4 hours
 97%                           10.96 days          21.6 hours            5.04 hours
 98%                            7.30 days          14.4 hours            3.36 hours
 99% ("two nines")              3.65 days          7.20 hours            1.68 hours
 99.5%                          1.83 days          3.60 hours           50.4 minutes
 99.8%                         17.52 hours        86.23 minutes         20.16 minutes

 99.9% ("three nines")         8.76 hours         43.2 minutes          10.1 minutes

 99.95%                        4.38 hours         21.56 minutes         5.04 minutes

 99.99% ("four nines")        52.56 minutes       4.32 minutes          1.01 minutes

 99.999% ("five nines")       5.26 minutes        25.9 seconds          6.05 seconds

 99.9999% ("six nines")       31.5 seconds        2.59 seconds          0.605 seconds
                              Web Hosting


Hosting by cost (least expensive to most expensive, next pages):
                             Web Hosting


Hosting Types:

Free web hosting service: Offered by different companies with
limited services, sometimes supported by advertisements, and often
limited when compared to paid hosting.

Shared web hosting service: One's website is placed on the same
server as many other sites, ranging from a few to hundreds or
thousands sharing resources. Typically, all domains may share a
common pool of server resources. The features available with this
type of service can be quite extensive. A shared website may be
hosted with a reseller.
                                Web Hosting


Free Hosting (usually ad supported)
List of free webhosts:

Shared Hosting (what you normal by as an individual or small
                              Web Hosting


Hosting Types:

Reseller web hosting: Allows clients
to become web hosts.

Virtual Dedicated Server: Divides a
single powerful server’s resources into
many smaller “virtual” servers.

Dedicated Hosting Server: The user
gets his or her own Web server and
gains full control over it.
                              Web Hosting


Hosting Types:
Managed hosting service: The user gets his or her
own Web server but is not allowed full control
over it for security and maintenance.

Colocation web hosting service: The user owns
the server, but the hosting company provides
physical space that the server takes up and takes
care of the server. This is the most powerful and
expensive type of web hosting service because
you are paying someone else to manage your
                              Web Hosting


Hosting Types:

Cloud Hosting: A new type of hosting
platform that allows customers
powerful, scalable and reliable
hosting based on clustered load-
balanced servers and utility billing.
Security is an issue. Usually used for
data backup and archiving, currently.
                                 Web Hosting


Hosting Types:

Clustered hosting: Multiple
servers hosting the same
content for better resource
utilization. Clustered Servers
are a perfect solution for
high-availability dedicated

Grid hosting: Cluster grids
with multiple nodes.
                             Web Usability


Web Usability:

Web usability is an approach to
make web sites easy to use for
an end-user, without the
requirement that any
specialized training be
undertaken. This must be done
at all phases of web design!
                             Web Usability


The broad goals of usability are:
• Present the information to the user
  in a clear and concise way.
• Give the correct choices to the
  users, in a very obvious way.
• Remove any ambiguity regarding
  the consequences of an action (i.e.
  the user can “figure out” what
  buttons and objects do)
• Put the most important thing in the
  right place on a web page or a web
                              Web Usability


History of Web Usability:
In the context of ecommerce websites, the meaning of web-usability
is narrowed down to efficiency: triggering sales and/or performing
other transactions valuable to the business.

1990s: Characterized by fancy graphic design and big bold colors and
coloredbackgrounds, often pretty but not functional.
2000s: Many eBusinesses started to fail, renewing interest in Web
usability. Web design got more streamlined, more animation, and
more photo-dependent (much like magazine art!).
2007-Present: With the release of ipad, ipod touch, and mobile
devices, reactive web design has become important in usibility.
History of Web Usability: Websites Then and Now
History of Web Usability: Websites Then and Now
History of Web Usability: Websites Then and Now
History of Web Usability: Websites Then and Now
History of Web Usability: Websites Then and Now
History of Web Usability: Websites Then and Now
                              Web Usability


History of Web Usability:
Taking key elements of graphic
design, much like magazine art before
them, websites started to realize that
space is valuable!

Users should be able to get to the
most important information at a
glance, much like a magazine cover.

Think of your home page as your
“Cover Page” when designing.
Think of your home page as your “Cover Page” when designing–
only clickable! What information is important?
You can use content blocking the same way on your site!
                               Web Usability


Why is Eye-Tracking important:

Eye-tracking is the science of how a viewer looks at a subject, either
printed page or– in our case– a website. What do you look at first?

                                 As Americans, we are conditions to read right
                                 to left, front to back– this is not the same in all
                              Web Usability


Eye-tracking is the science shows
the path the eye takes when         Did you know people tend to look at faces first
looking at an image…                  in any image? How can we use this in web
                                Web Usability


Think about Eye-Tracking when you place your elements on the
page. What will your users look at first?
Can you draw attention to a certain area using photos, colors,
animation, or reactive design?

                    From the Graphic Design Sins and Virtues
                             Web Usability


Web Navigation and Usability
Web navigation refers to the process of navigating a network of web
resources and the user interface that is used to do so.

A central theme in web design is the development of a web
navigation interface that maximizes usability.

Let’s look at what’s important in web navigation…
Web Usability

                                Web Usability


Navigation menus come any many classifications that may require
HTML, CSS, or JavaScript to function.

•   Graphic Buttons or Icons (like we built using Adobe save-to-web)
•   Vertical or Horizontal Text Menus
•   Drop-Down and Fly-out Menus
•   Tabs Navigation
•   Tags Navigation
•   Text-Description Menus (i.e. footer menus)
•   Dynamic Menus (i.e. Search and Guided Search Menus)
•   Reactive Buttons (think iPod or flash sliders, point-and-click, drag-
                                                        Horizontal Menu
Horizontal and Vertical Menus

Top Horizontal Bar Navigation
Top horizontal bar navigation is one of the two most popular kinds of
site navigation menu design patterns out there.

Common Characteristics of Top Horizontal Bar Navigation
• Navigation items are text links, button-shaped, or tabbed-shaped
• Horizontal navigation is often placed directly adjacent to the site’s
• It is often located above the fold

The main drawback is that only a limited number of links (5-12) can
be displayed. Sometimes drop-downs are used to overcome this.
Horizontal and Vertical Menus

Vertical Bar/Sidebar Navigation
Vertical bar/sidebar navigation is when
navigation items are arranged in a
single column, one on top of another.

Common Characteristics of Top
Horizontal Bar Navigation
• Text links for navigation items are
    very common (with and without
                                          Vertical Menu
• Tabs are rarely used (except for the
    stacked tabs navigation pattern)
• Vertical navigation menus usually
    have plenty of links
Main drawback: can be overwhelming
if to lengthy or complex.
Tabs Navigation
Tabs navigation can be styled virtually any way you want, from realistic,
textured tabs that look straight out of a notebook to glossy, rounded
tabs and simple, squared-edge tabs.

Main drawback: The biggest drawback to tabs is that they’re more work
to design than simple top horizontal bars; requiring CSS, JavaScript,etc.

                                               Tabs Menu
Breadcrumb Navigation
Breadcrumbs, which get their name from the Hansel and Gretal fairy–
they lead you Home! They are a form of secondary navigation,
helping support the site’s primary navigation system.

Common Characteristics of Breadcrumb Navigation
• Usually formatted as a horizontal list of text links, often with left-
  pointing arrows between them to denote hierarchy
• Never used for primary navigation

Main drawback: Breadcrumbs don’t work well on sites with shallow
navigation and they are difficult without programming (PHP, etc.)

                         Breadcrumbs navigation
Tags Navigation
Tags are commonly used on blogs and news sites. They’re often
organized into a tag cloud, which may arrange the navigation items
alphabetically (often with different-sized links to indicate how much
content is filed under a particular tag), or in order of popularity.

Main drawback: Only text links, generally blogs and news sites. Plus it
involves work because each post needs to be tagged with relevatn

                                Tags navigation
Search Navigation
Site search has become a popular navigation method in recent years.
It’s well-suited for sites with tons of content (like Wikipedia), which
are difficult to navigate otherwise.

Main drawback: May not suggest important links, depends on user
input. You may needs to provide “hints” to help.

                              Search navigation
Faceted/Guided Search Navigation
Faceted/guided navigation (also called
faceted search or guided search) is
most commonly seen on e-commerce
sites. Basically, guided navigation
presents you with additional filters of
content attributes.

Common Characteristics of
Faceted/Guided Navigation
• Mostly on e-commerce sites
• Multiple search selections
• Uses text links                         Faceted Search navigation
• Works well with breadcrumbs

Main drawback: If too many options,
can be confusing or overwhelming.
Fly-Out Menu and Drop-Down           Fly-out menu navigation
Menu Navigation
Great for complex navigation.

Common Characteristics Fly-Out
Menu and Drop-Down Menu
• Used for multi-level information
• Uses JavaScript and/or CSS for
  hiding and showing the menus
• Links displayed in the menus are
  child items of the primary item
• Menus are most often activated
  by mouse hover, but sometimes
  also mouse click
Main drawback: Visitors may not
notice the drop-down or fly-out!
Footer Navigation
Footer navigation is mostly used as
secondary navigation, and may
contain links that don’t fit within the
main navigation, or include a
simplified site map of links.

Common Characteristics of Footer
• Footer navigation is often used as
  a catch-all for navigation items
  that don’t fit elsewhere
• Usually uses text links/icon only
• Repeat contact info
Main drawback: Many visitors may          Footer navigation
not scroll down and see it. Use it
mainly for simply repeating
important links (like contact info!)
Reactive Navigation
Usually seen on mobile devices,
involves pieces that move as if they
were real.

Common Characteristics of Footer                                    GPS Touchscreen

• Intuitive to use
• Act “real”
• Normally on mobile/iPod
                                      iPod/iPad Apps with touchable Slider and Dials

Main drawback: Require complex
programming to develop.

                  Mobile interfaces
                                Web Usability

                                Building a CSS Menu Tutorial

Let’s build a CSS-based Drop-down
• It’s going to be vertical (easier)
• FORGET Internet Explorer for Now.
   Use FIREFOX (a compliant web
   browser!!! IE requires special fixes for
   using CSS code)

• ALWAYS create your file structure first
                               Web Usability

                               Building a CSS Menu Tutorial

Create and Save Your File structure:
Create a new folder, and inside it place:
1. my-page.html
2. my-stylesheet.css

(you can use Dreamweaver to easily create
blank documents)
3. You can link the CSS tylesheet to your HTML
    page by inserting into the header:
<link rel="stylesheet" type="text/css" href="my-stylesheet.css" />
                               Web Usability

                               Building a CSS Menu Tutorial

Create your text menu items in HTML using unordered lists:
You can nest list items to create subcategories (add to Body!!!):
                          <li><h2>Category Name</h2></li>
                             <li><a href="#">Category 1</a>
                                <li><a href="#">subcategory 1</a></li>
                                <li><a href="#">subcategory 2</a></li>
                             <li><a href="#">Category 2</a></li>
                               Web Usability

                               Building a CSS Menu Tutorial

Insert the CSS tag around your html tables:
                          <div id="menu">
                         <li><h2>Category Name</h2></li>
                            <li><a href="#">Category 1</a>
                                <li><a href="#">subcategory 1</a></li>
                                <li><a href="#">subcategory 2</a></li>
   Dreamweaver View         </li>
      (no CSS yet)          <li><a href="#">Category 2</a></li>
                              Web Usability

                              Building a CSS Menu Tutorial

Let’s create the CSS code:
 Create an ID called “menu”:
                       #menu { width: 12em;
                               background: #eee; }
And then set properties for unordered lists within this tag…
                       #menu ul { list-style: none;
                        margin: 0;
                        padding: 0; }
Add to the CSS code:

#menu a, #menu h2 {            Web Usability
      font: bold 11px/16px arial, helvetica, sans-serif;
      display: block;          Building a CSS Menu Tutorial
      border-width: 1px;
      border-style: solid;
      border-color: #ccc #888 #555 #bbb;
      margin: 0;
      padding: 2px 3px; }
#menu h2 { color: #fff;
      background: #000;
      text-transform: uppercase; }
#menu a { color: #000;
      background: #efefef;
      text-decoration: none; }
#menu a:hover {
      color: #a00;
      background: #fff; }
Add to the CSS code:

#menu li {                      Web Usability
       position: relative;}
                                Building a CSS Menu Tutorial
#menu ul ul ul {
      position: absolute;
      top: 0;
      left: 100%;
      width: 100%;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Now let’s add special code that affects ONLY Internet Explorer:
<!--[if IE]>
#menu ul li {float: left; width: 100%;} Usability
<![endif]-->                        Building a CSS Menu Tutorial
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(;
font-size: 100%;
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
Check out full explanations of each CSS tag here:

                               Web Usability

                                Building a CSS Menu Tutorial
Then check out what the HTML looks like step by step:
                             Web Usability

                             Speeding up Your site

Let’s look at the major things we can do to make our site go
                              Web Usability

                              Speeding up Your site

Reduce file sizes
• Use smaller images at 72 DPI (standard low-resolution for web)
  when you can
• Large Files, particularly images, require much bigger load times.
• Do not use Animated GIFs– each frame is like adding an extra
  image to the page
• NEVER resize image using HTML width/height properties
                             Web Usability

                             Speeding up Your site

Minimize HTTP Requests
• Simplify page design
• Use CSS to call images used repeatedly (such as backgrounds or
  buttons), that way each image is loaded only once– not for every
  page load
                             Web Usability

                             Speeding up Your site

Add an Expires or a Cache-Control Header Meta Tag
• This can speed up load, but watch the expiration date!
                             Web Usability

                             Speeding up Your site

Placement of StyleSheets and Scripts
• The more “stuff” in your header, the slower the page loads, so
   keep only the essentials
• Place CSS Stylesheets in header
• Place Javascript at bottom of page, its bulky and slow loading
       **When possible! Note that some javascript is involved in
       rendering the page and will not work at page bottom!
                             Web Usability

                             Speeding up Your site

Make JavaScript and CSS External
• Use the HTML Link tags instead of writing directly in your HTML
  page (you can also then reuse the code on other pages easier!)

Avoid page redirects when you can
• These add seconds to your load time.

Ensure No broken links
• These slow the browser down

Preload Components on complex pages
• Use scripting to preload images or media