Building Your First Website With Hypernumbers
-
Upload
hypernumbers -
Category
Documents
-
view
219 -
download
0
Transcript of 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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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/ -
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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/ -
8/9/2019 Building Your First Website With Hypernumbers
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/9/2019 Building Your First Website With Hypernumbers
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] -
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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/ -
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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:
twitter @hypernumbers phone +44 7776 251669
16
mailto:[email protected]:[email protected]:[email protected] -
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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
-
8/9/2019 Building Your First Website With Hypernumbers
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