design and build gis web sites like a pros3.amazonaws.com › virtualgisclassroom › design...

Design and Build GIS Web Sites Like a Pro

E-Learning for the GIS Professional – Any Time, Any Place! geospatialtraining.com

Fundamentals of Web Design


The Quest for Great Web Design

In the Quest for Great Web Design, we’ll take a look at several key components that every

designer should consider before starting a new project. Staring at a blank canvas can be

very intimidating. Here are a few things to consider before jumping off the deep end of

design:

• Search for the Best

• Design is Reflective of the Brand

• Less is Often More

• Getting Inspired

3

Want to Design Like the Best? Seek out the Best.

• The best way to learn is simply to

experience the variety of website designs

available.

– Seek websites that catalog great web site

design

• http://www.thebestdesigns.com/

• http://bestwebgallery.com/

– Seek websites that catalog the worst of

web site design

• Google “worst web site design on the

web.

4

Clean design sample

Terrible design sample

http://www.thebestdesigns.com/

http://bestwebgallery.com/

Design is Reflective of the Brand

• Branding

– More than a logo and a set of colors.

– Al Ries - “a singular idea or concept that

you own inside the mind of the prospect”

• Central core that defines the look, feel, and

emotion of the site.

• Apple is a great case study!

– Sleek, solid, easy to use hardware with

great user interfaces

5

Less is Often More

• Less is More

• Don’t be afraid of whitespace

• Don’t overwhelm your users with

mountains of data

• Use a little texture here and there to

create a custom feel and depth

• Add small animations ONLY as needed and

use them sparingly.

6

Getting Inspired

• When looking for inspiration, two quotes

come to mind:

– “Imitation is the sincerest form of

flattery” by Charles Caleb Colton

– “Innovate when you have a better idea

but take advantage of conventions when

you don’t” by Steve Krug, author of

“Don’t Make Me Think”.

• Look all around you!

• Follow design blogs and Twitter accounts

of people you respect

• “Best of the Web” sites

• traditional print media

• Scour template sites like

templatemonster.com

7

Designing Effective Websites

• What does it mean to have an effective website? There are quite a few measures of

effectiveness:

– User Retention

– Information that is relevant to the customer

– Professional Appearance

– Clear and concise information

– Search Engine Optimization

– Usefulness

– [Insert your own measure here]

8

Important Elements of Effective Website Design

• Organize – Present information in a

consistent manner

• Orchestrate – Create the initial focus and

orchestrate the user from one piece of

information to the next.

• Simplify – Strive for clarity and simplicity in

communication.

• Balance – Balance readability with

typography, color and texture

• Color – Stick to the color palette and use

color to draw the attention of the user.

9

Designing Effective User Interfaces

• What is a User Interface?

– According to Wikipedia.org, a user

interface “is the space where interaction

between humans and machines occur.”

• Use consistent and localized iconography

• Consistent methods of interface

• Hiding links navigation from the user is

generally bad

• Minimize unnecessary animation

10

User Interface elements by www.theskinsfactory.com

Injecting Usability into the Equation

• Vitaly Friedman’s 10 Principles of Effective Web Design

– Don’t make users think

– Don’t squander users’ patience

– Manage to focus user’s attention

– Strive for feature exposure

– Make use of effective writing

– Strive for Simplicity (KIS – Keep it Simple)

– Don’t be afraid of whitespace

– Communicate effectively with a “Visible Language”

– Conventions are our friends

– Test early, test often (TETO-principle)

11

Don’t Make Users Think

• the first law of usability states that a

website should be obvious and self-

explanatory.

• Users should need only a split second to

determine the various components of a

site.

• Avoid dizzying eye movement at all costs!

12

Just to poke a little fun. The designers of

arngren.net probably never read Krug’s book.

Arngren is famous amongst the worst of the web

folks. Arngren invokes dizzying eye movement

rather than effective usability.

The Only Acceptable ‘F’

According to Jakob Nielsen of

www.useit.com, the average user reads

website content in an ‘F’ pattern.

• Users will most likely only scan your

information.

• The first two paragraphs on your page are

crucial to your success.

• Begin paragraphs, sub-headings, and bullet

points with information carrying words.

13

F-Shaped Pattern, eye tracking heatmaps conducted by Dr.

Jakob Nielsen of http://www.useit.com/. See the full article at:

http://www.useit.com/alertbox/reading_pattern.html

http://www.useit.com/

http://www.useit.com/



Usability Nightmares

• Hidden login links

• Pop-ups

• Invisible Links

• Visual Noise

• Drop-Down Menus

• Blinking Images

• Unwanted resolution or size changes

• Too small of fonts

• Unclear link text

• Dead links

• No more than one animation per page

• Links opening in different windows

14

Website Wireframing

• Wireframing allows designers to rapidly

block and re-arrange information without

getting bogged down in the particulars of

the look and feel.

• Wireframing is very fast and cost effective

at the earliest stages of development

15

Website Wireframing (continued)

Incorporate the ‘F’ Pattern research at the

wireframing process:

• First two rows are the most important

• Users spend the majority of their time on

the left half of the page

• Block your important data using

whitespace, color, and supporting graphics

16

Exercise

• Please complete the following exercise:

Use Cacoo.com to rapidly generate a site wireframe

17

The End Goal

There’s been a lot of theory and information

up to this point and we finally see a light at

the end of the tunnel. We now have a

wireframe that we can start generating html

to layout the data, and a little CSS to make it

look nice.

At the end of this course we should have

html and CSS templates that look very similar

to the mockups to the right. In the next

module, we’ll jump right into learning the

basics of html so that we can eventually end

up with a site similar to the following.

18

Poor Design

19

Poor Design (cont.)

20

CASE STUDY: ADIDAS DESIGN STUDIOS

Exploration of the Adidas Studio Site

21

Adidas Design Studios: The Good

22


23


24

Adidas Design Studios: The Not So Good

25


26


27


28

WEB DESIGN WRAP UP

We’ve discussed some general concepts in web design. We will now

move on to putting those practices in place with a foundation of HTML.

29

Fundamentals of HTML

E-Learning for the GIS Professional – Any Time, Any Place!

The Technology Behind the Website

• The core of the modern website is built

upon a fusion of HTML , CSS, and JavaScript

• Web server languages such as Java, .NET,

and others bring advanced capabilities to

the browser

• HTML elements start <table> and end

</table> with defined markup elements

• Browsers interpret data found between

the various semantic tags when displaying

the information.

31

Building the Foundation with the HTML DOCTYPE

With HTML, there are several main

specifications and document types (DOCTYPE

or DTD):

• HTML

– Strict

– Transitional

• XHTML

– Strict

– Transitional

• HTML5

32

Transitional vs. Strict Markup

Choosing a DOCTYPE can be rather confusing. Not only is there an HTML vs. XHTML

DOCTYPE, there is also a transitional vs. strict implementation of each.

• Transitional is in the process of making it’s way from older markup to new markup

– more forgiving

– often used when you may have legacy markup that can’t be easily converted to strict

markup.

• Strict will ensure that browsers use their strictest, most standards compliant rendering

methods.

– promotes a separation between the structure and the presentation of that data.

– promotes solid markup for future maintenance and future browsers

33

Getting Started with HTML - DOCTYPE

The DOCTYPE is a declaration of the page that appears as the very first line in your html

document. This describes how your page will be parsed in the current browser.

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

– DOCTYPE

– html

– PUBLIC

– (-) or (+)

– W3C

– DTD

– XHTML 1.0 Strict

– EN

34

Elements and Attributes not available in a Strict DTD

Elements missing in Strict Mode:

• font

• iframe

• strike

• u

• center

Attributes missing in Strict Mode

• align (available in table elements only)

• background

• bgcolor

• border (available in table elements only)

• height (available in img and object elements only)

• link

• nowrap

• target

• text

• vlink

• width (available in img, object, table, col, and colgroup only)

• …other attributes are also removed

35

Sample of various DOCTYPEs

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“

"http://www.w3.org/TR/html4/loose.dtd">

2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

5. <!DOCTYPE html>

36

W3C Markup Validation Service

37

Basics of HTML

• Elements (or tags) are defined between

the less than (<) and greater than (>)

symbols (e.g. <div> ).

• Attributes take the form of attribute name

equals value (e.g. id=“myElement” )

• Attributes should always be quoted

• All HTML source code is easily viewable

through the browser

38

What Browsers should I target?

• What browsers do I need to target

– Internet Explorer 6.0+

– Mozilla Firefox

– Google Chrome

– Apple Safari

– Opera

• Why do I need to test against each of

these?

39

The Page Framework

• Every page starts with our DTD:

<!DOCTYPE html>

• The <html></html> tags define (and

enclose the page to come.

• The <head></head> tags define

information about the current page.

• The <body></body> tags define everything

else.

40

<head> element

The <head> tags enclose information about the current page. There are six elements that

can be found in the head tags. Only the title element is required.

• <title></title>

• <meta />

• <base></base>

• <link />

• <style></style>

• <script></script>

• <noscript></noscript>

41

<title> and <meta> elements

• <title></title>

– Defines the title of the current page

– Defines the information that is bookmarked

• <meta></meta>

– Defines information about a page.

– Requires the name/http-equiv attribute

– Requires the content attribute

– Meta data no longer plays important role in Search Engine Optimization

42

Meta data elements and attributes

43

Exercise


Create a Skeletal HTML Document

46

Standard HTML Attributes

Most elements have a standard list of attributes that can be bound to the element

• class

• id

• style

• title

For a complete list: http://www.w3schools.com/tags/ref_standardattributes.asp

47

http://www.w3schools.com/tags/ref_standardattributes.asp

Standard HTML Events

Most elements have a standard list of events that can be bound to the element. A script

(often referred to as an event handler) is tied to the event’s attribute value.

48

A simple JavaScript function called by the onload event bound to the body

The result of that function:

Standard HTML Events (cont.)

A list of some of the most common events:

• onclick

• ondblclick

• onmousedown

• onmouseout

• onmouseover

• onmouseup

• onkeydown

• onkeypress

• onkeyup

49

<body> element

The <body> element

• main container for all of the content in the

page

• supports the standard attributes such as

class, id, etc.

• supports multiple standard event

attributes

• two reserved events:

– onload

– onunload

50

<h1>,<p>, and <blockquote> elements

The <h1>…<h6> elements

• defines headers in order of importance

The <p> element

• encloses normal paragraph information

The <blockquote> element

• encloses indented text information

51

<div>, <a> and <img> elements

The <div> element

• defines a block of space or container for

information

The <a> element

• commonly used for links to other pages

or to jump to other points in the page

The <img> element

• used to display an image on the page

52

Exercise


Adding block-level vs inline elements

53

<ul>, <ol>, and <li> List Elements

The <li> element

• defines the individual list items in an

ordered or unordered list.

The <ul> element

• defines an unordered list of items using the

<li> element.

The <ol> element

• defines an ordered list of items using the

<li> element. Numerals can be styled

through css.

54

<form> element

The <form> element

• wraps <input> elements to gather user

input

• two methods of sending data

– GET

– POST

55

<input> element

The <input> element

• used to gather user input

• many input types:

– Button

– Checkbox

– Hidden

– Password

– Radio

– Submit

– Text

56

Exercise

• Please complete the following exercises:

Understanding Forms

57

Displaying Tabular Data

HTML provides a solution for displaying

tabular data through the use of the <table>

element.

A table is constructed of seven elements,

three of which are mandatory:

• <table>

• <tr>

• <td>

58

Simplest form of table

Displaying Tabular Data (cont.)

The seven elements of a table are:

• <table>

• <tr>

• <td>

• <thead>

• <th>

• <tbody>

• <tfoot>

59

<table> and tabular data (cont.)

Tables have several additional properties

that are available.

• <caption>

• <colgroup>

60

HTML Styling Elements

Before getting into CSS styling, there are some built in HTML styling elements that we will cover.

• <i>

• <em>

• <b>

• <strong>

• <s>

• <sub>

• <sup>

• <u>

• <span>

• <br />

61

Exercise


Understanding Table Elements

62

Exercise


HTML Overview

63

HTML5

HTML5 is the latest specification of the

HyperText Markup Language. This latest

specification adds some important new

features to the capabilities of the modern

web browser.

• <canvas>

• <audio>

• <video>

64

Current Browser Support

65

HTML5 Video Tag

• Creates a standardized, and simplified method of embedding video into a web page.

• Video Codecs

– MP4

– H.264

– Ogg/Theora

– WebM

• Video Tags

– <video width=“600” height=“400” controls=“controls”>

– <source src=“myMovie.mp4” type=“video/mp4”>

66

HTML5 Canvas Tag

67

View some examples at: http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-

html5-canvas-experiments/

http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/













HTML5 Canvas (cont.)

• <canvas> is a container for graphics

– can have multiple canvases per page

• <canvas> has a few attributes:

– id

– width

– Height

• Draw in <canvas> with JavaScript

– 2D Context

– 3D Context???

68

HTML5 Canvas (cont.)

• <canvas> coordinates start in upper-left

– Positive X increments left to right

– Positive Y increments top to bottom

• <canvas> drawing tools API

– Line Drawing

– Arcs

– Text

– Gradients and Fills

– Bitmaps

– …and much more!

69

HTML5 Video Codec Support

70

HTML5 Audio Tag

• Simplifies the insertion of audio into a web page

• Audio Codecs:

– MP3

– WAV

– Ogg/Vorbis

– AAC

• Audio Tags

– <audio controls=“controls”>

– <source src=“myAudio.mp3” type=“audio/mp3”>

71

HTML5 Audio Codec Support

72

HTML WRAP UP

We’ve covered a lot of HTML, let’s get to styling it!

73

Fundamentals of Cascading StyleSheets (CSS)

E-Learning for the GIS Professional – Any Time, Any Place!

Exercise


Adding Style Information

76

Understanding the Cascade in Cascading Style Sheets

Understanding the Cascade in Cascading Style Sheets.

1. Browser finds all CSS declarations that apply to the element

2. Elements sorted by origin and weight

3. Calculate the specificity

4. If two rules are found to be equal, the last in line wins the race

77

What do we use CSS for?

CSS was developed to help us add styling

information to our pages such as:

• Text styling such as font, color, size, weight

and other attributes

• Margins and padding information

• Background colors and graphics.

• Borders and outlines

• Positional information for our html

elements

• …much more

78

Just about every site you encounter on the

web uses CSS to bring their sites to life.

Anatomy of a CSS Rule

79

CSS selectors can be elements, classes, or id

attributes. You can also combine these types

for a more specific combination of selectors.

There are more advanced methods of

selecting elements but are beyond the scope

of this course. For this course, we will stick

with simple selectors.

CSS Generalities

Before getting into specifics, here are a few additional generalities when it comes to CSS:

• CSS Comments are written like /* Here is my comment */

• CSS classes cannot start with a number

• To avoid problems with older browsers, zero your margins and padding in the html

element ( e.g. html { margin:0; padding:0 } )

• Say “NO” to the <font> tag.

• CSS Minification

80

The Three Basic CSS Selector Types

There are three basic selector types:

1. element selector such as ‘p’

– Acts as a global element style

2. id selector such as ‘#myId’

– Applied to the element with the specific

id=“myId”

3. class selector such as ‘.myClass’

– Applied to any element bound to the

class=“myClass” style

81

Selector Sample

82

Exercise


Working with CSS Selectors

83

Block Elements vs. Inline Elements

HTML elements generally fall into two layout

categories:

• Block elements: <p> <div> <h1>

• Inline elements: <span> <a> <img>

84

Styling the Background with CSS

We can use CSS to style the background of any html element that accepts a background.

• Background color (hex, rgb, name, etc.)

– background-color: #ff0000;

• Background images

– background-image: url(‘myimage.png’);

• Background repeat

– background-repeat: repeat-x;

– background-repeat: no-repeat;

• Background size

– background-size: 200px 300px; (w h)

– background-size: 80% 60%; (w h)

• Background clip

– background-clip: border-box;

– background-clip: padding-box;

– background-clip: content-box;

85

Styling the Background with CSS (cont.)

• Background attachment

– Background-attachment: fixed;

– Background-attachment: scroll;

• Background position

– background-position: left top;

– background-position: 10% 10%;

– background-position: 25px 15px;

• Background origin

– background-origin: border-box;

– background-origin: padding-box;

– background-origin: content-box;

86

Styling Text with CSS

One of the most common uses of CSS is to

style text.

• Color

– color:#ff0000;

– color:rgb(255,0,0);

– color:red;

• Alignment

– text-align:center;

– text-align:left;

– text-align:right;

– text-align:justify;

• Decoration

– text-decoration:none;

– text-decoration:overline;

– text-decoration:underline;

– text-decoration:line-through;

• Transformation

– text-transform:uppercase;

– text-transform:lowercase;

– text-tranform:capitalize;

87

Styling Text with CSS (cont.)

• Font Family

– font-family: “Times New Roman”, Times, serif;

• Font Style

– font-style:normal

– font-style:italic;

– font-style:oblique;

• Font Size

– font-size:12px;

– font-size: .85em;

• Font Weight

– font-weight: bold;

– font-weight: normal;

– font-weight: 700;

88

Styling Text with CSS (cont.)

• Use a combination of percent and em for

browser consistency

• Short-hand methods in CSS.

89

Example of the font style in shorthand.

(order is important when it comes to

specifying the shorthand components.

You can however omit items that are not

needed.

Styling Links with CSS

HTML anchor <a> elements have for distinct states:

1. link

– a:link { color:blue; }

2. hover

– a:hover { color:green; }

3. visited

– a:visited { color:purple; }

4. active

– a:active { color:red; }

90

Styling Links with CSS (cont.)

• Create additional CSS classes for anchor

<a> elements:

– a.altLink:link { color:red; }

– a.altLink:hover { color:pink; }

– a.altLink:active { color:brown; }

– a.altLink:visited { color:green; }

91

Exercise


Styling text and backgrounds with CSS

92

Understanding Margin and Padding in CSS

• Margins are the spacing areas outside of

our content

• Padding is the spacing area inside of our

elements.

• Each side (top, right, bottom, left) can be

sized independently

93

Margins in CSS

• Defines the area outside an element.

• Defined by four possible attributes:

– margin-top: 6px;

– margin-right: 2px;

– margin-bottom: 20px;

– margin-left: 10px;

• Shorthand method is defined top, right, bottom, left

– margin: 6px 2px 20px 10px;

• Specified in a number of CSS units

– http://www.w3schools.com/cssref/css_units.asp

94

http://www.w3schools.com/cssref/css_units.asp


Padding in CSS

• Defines the area inside an html element

• Defined by four possible attributes:

– padding-top: 7px;

– padding-right: 3px;

– padding-bottom: 7px;

– padding-left: 3px;

• Shorthand method is defined top, right, bottom, left

– padding: 7px 3px 7px 3px;

• Specified in a number of CSS units

– http://www.w3schools.com/cssref/css_units.asp

95



Understanding Border and Outline

Border and Outline on the surface appear to be the same but there is a slight difference:

• Border width figures into the CSS Box Model

• Outline DOES NOT figure into the CSS Box Model

96

CSS Borders

• Borders figure into the Box Model.

• Border Style

– border-style: dotted;

– border-style: dashed;

– border-style: solid;

– border-style: double;

– border-style: groove;

– border-style: ridge;

– border-style: inset; (also outset)

• Border Width

– border-width: 2px;

• Border Color

– border-color: #0000ff;

• Optionally, you can specify a different border for each:

– border-top-style: inset;

– border-bottom-style: dotted;

– border-left-style: dashed;

– border-right-style: solid;

97

CSS Outlines

• Outline Style

– outline-style: dotted;

– outline-style: dashed;

– outline-style: solid;

– outline-style: double;

– outline-style: groove;

– outline-style: ridge;

– outline-style: inset;

– outline-style: outset;

• Outline Width

– outline-width: 2px;

• Outline Color

– outline-color: blue;

98

Setting Width and Height in CSS

Sizing elements through width and height properties:

• width: 500px;

• min-width: 500px;

• max-width: 500px;

• height: 400px;

• min-height: 400px;

• max-height: 400px;

99

Grouping and Nesting Selectors

• Group similar selectors using commas :

– h1, h2, p { color:blue; }

• Nested selectors:

– .error p { color:red; }

100

Positioning Elements in CSS

CSS allows you to specify several position

types to help you position elements around

the screen. There are four basic types of

element positioning defined in the CSS

specification:

• Static

• Fixed

• Relative

• Absolute

101

Floating Elements

Wrap text around graphics and content blocks with float

• float:left

• float:right

• clear:both

102

Exercise


Adding Margins and Padding

103

CSS Box Model

• Defines spacing and positioning of html

elements

• Calculated by the content area, padding,

border, and margin information

• Calculate the size of each item (e.g.

content width + padding left + padding

right + border left + border right + margin

left + margin right

• IE8 and below add padding and border into

the width if a DOCTYPE is NOT declared

104

Exercise


Calculate the CSS Box Model

105

What is CSS3?

Everyone is talking about CSS3, what makes

it different from CSS?

• CSS3 is the latest specification of Cascading

Style Sheets.

• Is CSS3 fully supported in browsers? No.

• Is CSS3 a stable specification? Not yet.

• Why do I sometimes see CSS properties

like -moz-background-size or -webkit-

background-size, etc.?

106

Overview of some of the main CSS3 features

Because the CSS3 specification is not fully mature yet, we aren’t going to cover it in great

detail in this course. We will cover some of the main features that will most likely be used

the most and are fairly stable at this point.

107

• Border Properties

• Background Properties

• Text Effects

• Custom Fonts

• 2D Transforms

• 3D Transforms

• Transitions

• Animations ( limited availability and

maturity)

• Columns ( limited availability and maturity)

CSS3 Border Properties

The CSS3 specification has added some great border properties that were once the

domain of design programs such as Adobe Photoshop and a lot of hard work for the

developer.

• Border-radius

• Box-shadow

108

CSS3 Text Effects and Fonts

CSS3 has added a number of new text

properties such as text-shadow and word-

wrap.

• text-justify

• text-overflow

• text-shadow

• word-wrap

CSS3 now allows the ability for designers to

include their own fonts for display.

• OpenType Fonts (.otf)

• True Type Fonts (.ttf)

109

CSS3 2D Transforms

Rotate, move, scale, and skew your elements with CSS3 2D Transforms:

• translate()

• rotate()

• scale()

• skew()

• matrix()

110

CSS3 3D Transforms

The future of CSS looks bright. The new specification added a number of new properties

for working with element in 3D:

111

• matrix3d()

• translate3d(x,y,z)

• translateX(x)

• translateY(y)

• translateZ(z)

• scale3d(x,y,z)

• scaleX(x)

• scaleY(y)

• scaleZ(z)

• rotate3d(x,y,z)

• rotateX(angle)

• rotateY(angle)

• rotateZ(angle)

• perspective(n)

CSS3 Columns

CSS3 offers support for multiple columns:

• column-count

• column-width

• column-gap

• column-rule

112

CSS WRAP UP

We’ve covered a lot up to this point, it’s time to put it all together!

113

HTML and CSS Exercises


Exercise Module

• This module is composed of four exercises

1. Simple Fixed Width Template

2. Three-column Fluid Template

3. ESRI Style template

4. Photo Track Mapping Template

115

Exercise 13: Create a Simple Fixed width Template

• Develop a simple fixed-width template

using HTML and CSS.

• Use the provided wireframe as a guide:

– https://cacoo.com/diagrams/GrsOwEmgv

IFwY7jB

116

Exercise 13: Wireframe

117

Exercise 13: Final Solution

118

Exercise 13: Simple Fixed Width Template


Create the simple fixed-width template using the wireframe as your guide.

119

Exercise 14: Create a Three-Column Fluid Layout

• Develop a three-column fluid template

using HTML and CSS.


– https://cacoo.com/diagrams/Qkn5XREmF

N5IOARJ

120


121


122

Exercise 14: Three-column Fluid Template


Create the three column fluid template using the wireframe as your guide.

123

Exercise 15: Create an ESRI style website

• Using the ESRI site design below as

inspiration, create a similar HTML and CSS

template.


– https://cacoo.com/diagrams/4vWKiutQW

cbLISbQ

124


125


126

Exercise 15: ESRI Style Template


Using the ESRI site as inspiration, use the provided wireframe to develop a similar style

template.

127

Exercise 16: Photo Track mapping exercise

• Create the Photo Track website using

HTML and CSS with integrated ESRI

mapping component.


– https://cacoo.com/diagrams/tiXdV2sbkU

SZFUn6

128


129


130

Exercise 16: Photo Track Mapping Template


Using the provided wireframe and design to wrap HTML and CSS around a simple

mapping application.

131

COURSE WRAP UP

Congratulations, you’ve reached the end!

132

design and build gis web sites like a pros3.amazonaws.com › virtualgisclassroom › design...

Documents