building your first website with hypernumbers

8/9/2019 Building Your First Website With Hypernumbers

1/21

Building Your First Website

A hypernumbers Tutorial

1


2/21

1 Table Of Contents

1Table Of Contents...............................................................................................................................2

2Introduction........................................................................................................................................3

2.aWhat This Document Covers.......................................................................................................3

2.bWhat This Document Doesnt Cover..........................................................................................3

2.cGetting Help.................................................................................................................................33Choosing Your Colours......................................................................................................................4

3.aUse A Designer............................................................................................................................4

3.bFinding Colours...........................................................................................................................4

3.cUnderstanding Colours................................................................................................................4

3.dFinally..........................................................................................................................................4

4Planning Your Site.............................................................................................................................5

4.aIntroduction..................................................................................................................................5

4.bCore Components........................................................................................................................5

4.cAn Example.................................................................................................................................6

4.dPutting It Together.......................................................................................................................84.eHelp Us Improve Hypernumbers.................................................................................................8

5Planning Your Site Layout.................................................................................................................9

5.aIntroduction..................................................................................................................................9

5.bHypernumbers Site Layouts........................................................................................................9

5.cSite Layouts For Search Engines...............................................................................................10

6Your Logo........................................................................................................................................11

6.aIntroduction................................................................................................................................11

6.bFree Tools..................................................................................................................................11

6.cLogo Design Tips......................................................................................................................11

6.dGetting Your Logo On The Web...............................................................................................11

7Designing Your Site.........................................................................................................................127.aIntroduction................................................................................................................................12

7.bDont Go Crazy!........................................................................................................................12

7.cCommon Page Elements............................................................................................................13

7.dBuilding Forms..........................................................................................................................15

8Building The Site..............................................................................................................................16

8.aRecap.........................................................................................................................................16

8.bGet Building..............................................................................................................................16

Appendix 1 Referencing Cells On Other Pages..............................................................................17

Appendix 2 Colour Theory..............................................................................................................18

2


3/21

2 Introduction

2.a What This Document Covers

This tutorial will take you through the following steps:

choosing your colours

planning your site

planning your site layout

designing your site

building the site

your logo

All these discussed in the right order, the order that will make the process as easy and painless as

possible, but I know you are going to skip ahead and start building anyway.

This guide assumes that you are going to build the site yourself and not use a designer to help you

bear in mind that sometimes you really maybe should get a professional to do it for you.

2.b What This Document DoesntCover

This document doesnt cover using the Hypernumbers spreadsheet. There is a comprehensive help

over at:

http://hypernumbers.com/support/

Wherever possible Hypernumbers is compatible with Excel but it has particular extensions, for

instance Twitter buttons on webpages.

2.c Getting Help

There are help videos on our YouTube channel:

http://www.youtube.com/user/hypernumbers

You can get support at:

http://hypernumbers.com/support/

3
http://hypernumbers.com/support/http://www.youtube.com/user/hypernumbershttp://hypernumbers.com/support/http://hypernumbers.com/support/http://www.youtube.com/user/hypernumbershttp://hypernumbers.com/support/


4/21

3 Choosing Your Colours

3.a Use A Designer

Designers are good at choosing colours, you might not be. If you are getting a corporate design

done you might want to skip this bit.

3.b Finding Colours

Choosing colours is one of the hardest parts of site design. Luckily there are a lot of resources

available on the web to help you to do it.

Our favourite resource is a community of designers over at http:///kulor.adobe.com who design and

publish colour swatches.

These swatches consist of 5 colours. Look for a mixture of light and dark colours so that you can

use different colours for emphasis and highlighting.

3.c Understanding Colours

If you want more tips on understanding colours there is a special Appendix on Colour Theory at the

end of this document.

3.d Finally

Now you have chosen your colour set write it down and save it somewhere.

4


5/21

4 Planning Your Site

4.a Introduction

You need to work out what the purpose of your site is. Few people have a single identity on the

internet these days, most people and businesses have one or more of the following:

a website

an e-mail address

a Twitter account

a Facebook page

In addition there may be specialist web identities involved, like:

LinedIn accounts

Flickr accounts

a YouTube channel

a Scribd account

making a Google Calendar publically available

You will also want to think about other web properties you might want to use like:

a map showing your office location

Buy Now buttons to a Google Checkout account or Paypal

Essentially any website that offers an embed thisoption can be used with Hypernumbers.

4.b Core Components

A Hypernumbers page can be displayed in three forms: a spreadsheet view

a webpage view

a table view

5


6/21

These different views can be set to be public and private with the view menu in the top right hand

side of the spreadsheet view:

4.c An Example

Your Hypernumbers site is where all these pieces are glued together.

To see how you can put all these things together it is worth looking at how Hypernumbers do it

ourselves:

ourwebsite

ourTwitter account

ourFacebook page

ourYouTube channel

ourScribd page (where this manual is also published) Gordon Guthries Google Calendar

themap showing our office

6
http://hypernumbers.com/http://twitter.com/hypernumbershttp://www.facebook.com/home.php?#!/pages/hypernumbers/336874434418http://www.youtube.com/user/hypernumbershttp://www.scribd.com/hypernumbershttp://hypernumbers.com/u/gordon/calendar/http://hypernumbers.com/contact/http://hypernumbers.com/contact/http://hypernumbers.com/http://twitter.com/hypernumbershttp://www.facebook.com/home.php?#!/pages/hypernumbers/336874434418http://www.youtube.com/user/hypernumbershttp://www.scribd.com/hypernumbershttp://hypernumbers.com/u/gordon/calendar/http://hypernumbers.com/contact/


7/21

ourGoogle Checkout buttons

Twitter is a great way to publish announcements, special offers and other communications to your

users and customers but you have to have a strategy to get them to sign-up to you.

Likewise Facebook is a place where a lot of your customers and contacts are and it has a set of tools

for you to manage active conversations with them.

The key is to work out what you are trying to do, with whom and where is the right place to do it.

So look around hypernumbers.com,sign-up for our Twitter account, become afan of our Facebook

page, look at our videos and think what is the best way to promote my business.

7
http://hypernumbers.com/pricing/http://hypernumbers.com/http://twitter.com/hypernumbershttp://twitter.com/hypernumbershttp://www.facebook.com/home.php?#!/pages/hypernumbers/336874434418http://www.facebook.com/home.php?#!/pages/hypernumbers/336874434418http://hypernumbers.com/pricing/http://hypernumbers.com/http://twitter.com/hypernumbershttp://www.facebook.com/home.php?#!/pages/hypernumbers/336874434418


8/21

4.d Putting It Together

Now that you know what you want to do you need to make sure you can do it.

What domain name do you want1:

bobsmith.uses.hn

bobsmith.com

Is that domain available?

What associated accounts do you want and are they available as well:

can you get the twitter account bobsmith

can you get the facebook page bobsmith

etc, etc

4.e Help Us Improve Hypernumbers

We have a range of special functions to make it easy for you to glue your online life together in

Hypernumbers, for example =twitter.button(hypernumbers)will create a twitter

button that takes you to twitter to follow Hypernumbers.

If there is a piece of integration that you badly want, a widget or some embedded component, dont

be shy in asking, email me [email protected] or ring me on +44 7776 251669

1 both of the above domain types are only available in a paid option

8
mailto:[email protected]:[email protected]


9/21

5 Planning Your Site Layout

5.a Introduction

You need to plan what pages you are going to create on your website.

Remember when you have created a webpage you will want to get people to link to it. Theseinbound links are valuable and increase your websites importance in search engines. This means

that once you have created a page structureyou really are stuck with itso it is important to think it

through at the beginning.

Planning your site layout seems intimidating at first, but it is really quite simple.

5.b Hypernumbers Site Layouts

We are all familiar with saving files to disk:

We create some high-level folders, and into them we put lower-level folders and finally we put

documents and files in the right place.

Hypernumbers websites are just the same we create Hypernumbers pages and underneath them we

put other Hypernumbers pages:

9


10/21

Hypernumbers pages can be public or private by default they can be shown as a webpage or as a

spreadsheet.

(Soon you will be able to share a particular page as a spreadsheet or webpage withinvidividuals.)

The normal top level pages on a website are something like:

What We Do

About Us

Contact Us

Pricing

Support

Privacy

Terms And Conditions

5.c Site Layouts For Search Engines

Search Engine Optimisation involves a lot of techniques, most of which are not relevant here.

The key point in your layout is to use keywords in your URL paths, so if you are writing content

that you want search engines to find, use the search terms you think are important in your URLs

like, separated by dashes:/info/dilithium-crystal-tuning/

/info/how-to-install-a-frobulator/

/info/how-to-remove-a-detuned-wibulator/

10


11/21

6 Your Logo

6.a Introduction

Often you will want your designer to provide you with a logo but if you dont this section will

show you how.

6.b Free Tools

The best free programme for building logos is Inkscape:

http://inkscape.org/download/?lang=en

To get good and original fonts to use in your logo you can go to:

http://www.fontsquirrel.com/

6.c Logo Design Tips

use colours that are compatible with your chosen colour scheme

remember to use a combination of a picture logo and text on the webpage to describe yourbusiness

the search engines cant read logos only normal text

the most common logo error is poorly kerned letters

kerning is the space between individual letters. Normally at small sizes it doesnt matter,

but a big sizes it matters a lot

compare the two logos below. The second one has been hand-kerned (using [ALT]

[LEFT ARROW] in Inkscape:

6.d Getting Your Logo On The Web

Hypernumbers dont store images (we may do later). So you will need to put your image on an

image store website.

The most popular one is:

http://imgur.com

11
http://inkscape.org/download/?lang=enhttp://www.fontsquirrel.com/http://imgur.com/http://inkscape.org/download/?lang=enhttp://www.fontsquirrel.com/http://imgur.com/


12/21

7 Designing Your Site

7.a Introduction

You want your website to appear structured and coherent and have a consistent look and feel. This

section will take you through the stages required to do that.

7.b Dont Go Crazy!

There is a big temptation when first building Hypernumbers sites to go crazy with the column

widths and row heights. It all seems to easy:

Unfortunately you soon get bogged down with that. Much better to merge cells to get the sizes you

need and to resize rows to get good layout and try and avoid resizing columns at all

12


13/21

7.c Common Page Elements

To give consistency to your website you want to use common page elements that you will use

everywhere in the site.

The most important of these is the navigation. This section will show you how to build a navigation

bar in Hypernumbers and share it across your site.

The other obvious one is the footer page.

This layout is fairly straight forward a logo, 4 sub-pages and links to Twitter and Facebook

accounts.

First up we merge some cells to get the header bar and create a thin row of cells with a gray

background to give us a line:

Then we populate the various cells:

Once we have built our master header bar we can include it on other pages using the special

Hypernumbers function include(). This just takes a range and simply says, whatever that range

looks like, return it to me.

The formula for this header bar is:=include(/$b$2:$i$7)

The range we are including is on the home page of the website which is why it starts with a /. If

you want to understand why this is, please read Appendix 1 of this document.

13


14/21

Notice that we are using dollared cell references so that they are not rewritten if we copy the

formula elsewhere.

To use this include on another page simply merge the cells b2:i7 on that page and put the formula

in.

If you edit the master header on the home page, all the other pages will now update!

And here is the final site:

14


15/21

7.d Building Forms

Forms are easy to build. Select the range where you want to put the form and right-click your

mouse. From the right-click menu you can select Create Form. This will generate a simple

form. You can add more complex elements with the form builder buttons.

By default there is only one form on a page and all the input is posted to a default subpage called./replies/

What this means is that if you put a form on the page /some/page/ the form entries will appear

on the page /some/page/replies/

15


16/21

8 Building The Site

8.a Recap

So youve done the preparation, and you have:

picked your colours (Chapter 3)

planned your site, choose your domain name and open all the other accounts you need (Chapter

4)

worked out your site layout (Chapter 5)

designed your logo (Chapter 6)

laid out your common page elements (Chapter 7)

8.b Get Building

Building the site is easy now:

create all the pages from Chapter 4 in the site administration panel (click on the Hypernumbers

icon in the top left) set them all to be web pages and not spreadsheets

on each page merge a block of cells the same size as your original header on the home page

insert the include() function in that cell

check that when you click from page to page the header is lined up on all pages

if there is text off to the right of the columns under the header the page will jump left

put in the page specific content for all pages

e-mail your friends and colleagues to get them to have a look

contact us to tell us how you got on, or what problems you have had:

[email protected]

twitter @hypernumbers phone +44 7776 251669

16
mailto:[email protected]:[email protected]:[email protected]


17/21

Appendix 1 Referencing Cells On Other Pages

Excel is a tab-based spreadsheet with many pages in the same workbook. In Excel, cells on another

page can be addressed by sheet addresses:=!Sheet1!a1

But Hypernumbers and desktop spreadsheets are subtly different in how they handle pages. In Excelall spreadsheet pages are siblings brothers and sisters of each other and they have a single parent

the workbook2. In Hypernumbers spreadsheet (and web) pages can have brothers and sisters, a

single parent, children, grand-children, cousins, etc, etc/

/my-page/

/my-pages-brother/

/my-pages-sister/

/my-page/child1/

/my-page/child2/

/my-page/child1/grand-child1/

etc, etc

In Hypernumbers you can refer to cells on other pages using Excel notation, eg:=!my-page!child1!grand-child1!a1

or normal web notation=/my-page/child1/grand-child1/a1

Excel notation is absolute it always refers to the page from the top parent. Hypernumbers also has a

relative page reference system which uses normal web notation. In this notation:

. means this page.. means this pages parent

So on the page /my-page/ the following references would resolve to the following pages:. /my-page/

.. /

../my-pages-brother/ /my-pages-brother/

./child1/ /my-page/child1/

../my-pages-brother/nephew1/ /my-pages-brother/nephew1/

2 the parent is only important for Visual Basic scripts and names in Excel

17


18/21

Appendix 2 Colour Theory

Colours are normally expressed as RBG numbers, which can be quite perplexing. RGB stands for

Red, Blue and Green and tell you how much of each base colour is in the total colour.

RGB values are given in 2 separate ways:

Decimal values eg {123, 45, 67}Hex Values eg #7D2B43

These two are the same colour a sort ofdark purple

Different programmes refer to colours in different ways:

Microsoft Word uses Decimal Inkscape uses both plus an opacity figure

18


19/21

The calculator in Windows will easily allow you to convert decimal to hex and vice versa:

Put the number in the calculator in decimal and toggle to hexadecimal to get it converted, and vice

versa.

One of the biggest problems with designing pages is that you need to do 2 things:

choose colours for your background

choose colours for your text

make sure that the text can be read against the background

Most programmes make it easy for you to choose background or text colours but none help youwith ensuring they work together. These are some of default colours from Microsoft Word:

About this Time the Emperor Augustus

pat furth an edic

ordeinin

at aa the fowk i the hail warld suid

be registrate.

This wis whan Quirnius wis Governor

o Sria,

an it wis the first time at siccan a thinghed been dune. Sae aabodie gaed tae be registrat

e,ilkane

til his ain toun, Joseph amang the lave. He belonged

til the stock an faimlie o Dauvit,

an sae it

wis tae Dauvit's Toun, Bethlehem in Judea, at he gaed

doun frae Nazareth

in Galilee for tae ge in his

name, takking Mary, at wis haudfastit

til him, wi him

Hypernumbers think that you should never set a font colour or a background colour, but always

think of a font colour on a background colour. Often that background is just white, but it is still a

background.

Putting a coloured font on a coloured background is a tricky business even deciding if the font on

a particular background should be white or black is difficult.

Luckily there is a simple formula for that which you can use in your Hypernumbers spreadsheet.

19


20/21

=if((0.3*RED + 0.59*BLUE + 0.11*GREEN)/255) > 0.5, black, white)

where RED, BLUEand GREENare the decimal colour values.

20


21/21

Often websites use a range of gray scales for emphasis. Grays are very easy to specify if each

RED, BLUE and GREEN value is the same the colour is a gray, eg:{123, 123, 123}

{77,77,77}

#ababab

#111111

building your first website with hypernumbers

Documents