Archive for Tutorials

15 Apr 2016

Using Google Calendars in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Widgets

Adding a calendar to your website is a simple, easy and effective way to let others know your agenda and availability. It’s also great in business situations where you want to show things such as available appointment times, room availability for meetings or if a piece of equipment is available for hire on a particular day. Including a calendar in your EverWeb made website only takes a few steps using Google’s calendaring feature.

In this example we’re going to create a calendar showing the availability of a music studio for hire.

  1. First of all you’ll need to have a Google account. If you don’t have one go to www.google.com and click on the ‘Sign In’ button located in the top right hand corner of the browser window and create an account from there.
  2. If you have not done so already, log in to your Google account and go to Google Calendar by clicking on the grid icon in the top right of the browser window. The grid icon displays all of Google’s cloud based apps you can access. Click on the Calendar app.
  3. You’ll see this month’s calendar displayed. Next create your own calendar that will be shown on your website the studio’s availability. If you’ve used Google Calendar before, you may already have one or more calendars set up already. Different calendars can be used for different purposes e.g. one for your own availability and one for studio bookings. To create a new calendar, go to the ‘My Calendars’ section and click on the drop down arrow. Select ‘Create new calendar’.
  4. On the ‘Create new calendar’ page, name your calendar e.g. ‘Studio Bookings’ and complete the form by filling in the fields you want include.
  5. It’s important to remember to tick the box to ‘Make this calendar public’. If you don’t no-one will see the calendar content on your website.
  6. When you have completed the form click on the ‘Create Calendar’ button at the bottom of the window.
  7. You’ll now see the calendar in the ‘My calendars’ list. Now the calendar has been added, hover the cursor over the calendar name and click on the drop down button to the right of the calendar name. Select the option ‘Calendar settings’ from the menu that appears.
  8. On the next screen you can edit the calendar display by selecting ‘Customize the color, size, and other options’ link in the ‘Embed this calendar’ section. Google Calendar allows you to change the display size of the calendar, has color and bordering options, the initial calendar view options such as weekly, monthly or agenda view and more.
  9. Once you’ve finished customizing your calendar, click the ‘Update HTML’ button, Select all the code in the ‘Copy and paste the HTML…’ box and copy it using Cmd+C. Having copied the code to the clipboard you can return to the calendar by clicking on ‘Google Calendar’ in the top left of the browser window.
  10. On the calendar view add in some events so you can see that the calendar functions properly on your web page. To create an event just click on the time you want the event to start and drag the mouse cursor to it’s end time. You’ll then be able to create the event.
  11. There are other options available on the calendar page such customizing the color of the events in the calendar. Just click on the drop down button to the right of the calendar name for the menu of options.
  12. The code snippet you copied to the clipboard is what you need to embed the calendar in to your page in EverWeb. If you change the customisation options in your calendar after you’ve copied the code, you’ll need to ‘update’ the HTML code, recopy the resulting code and reapply it in EverWeb.
  13. With the code copied to the clipboard, launch EverWeb and go to the page in your Project file where you want to add the calendar.
  14. Drag and drop the HTML Widget on to the page from the Widgets tab. Paste the code that you copied in to the ‘HTML code’ box and press the ‘Apply’ button.
  15. The widget will update. Move the calendar to where you want it on the page. The width and height of the calendar will be the dimensions that you chose in Google Calendar.
  16. Use EverWeb’s Preview to see how the calendar will look, you can even interact with it as well.

When you’re happy with the results, hit the ‘Publish’ button and you’re all done and will have a live calendar online!

25 Mar 2016

Creating and Using Video Content in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Widgets

EverWeb has a great, updated Video Widget in version 1.9.5 that can be used to easily add video content to your website. Creating your own video content doesn’t have to be expensive or time consuming as apps such as iMove and Keynote are both free and easy to use. There’s also QuickTime Player, which comes with OS X, that lets you screen record video then edit it with some basic editing features.

In this example, we’re going to create a video tutorial about EverWeb’s hyperlinking feature using Quicktime. The video will include an audio track narrative. Once the video and audio have been created, we’ll insert it into a web page in EverWeb. OK, here we go…

Planning and Preparation

  1. Before creating a video tutorial, plan it’s flow from start to finish. Keep in mind what the goal is i.e. what do you want to tell your audience?
  2. Your tutorial should focus on one subject or idea only if at all possible e.g. how to hyperlink a piece of text to take you to another page in your website.
  3. Try a few ‘dry runs’ to make sure the tutorial flows properly before you start recording. Doing this also helps you get used to the steps you’ll be recording. It’s also a good point to double check that the video flow is as simple and straightforward as you had planned. Remove any unnecessary steps or anything not directly related to what your subject is about.
  4. Once you have rehearsed your tutorial, close any open applications on your desktop that are not needed in the recording.
  5. Set your OS X desktop background to a neutral color and clear away any files you have placed on the desktop. This will help keep your audience focused on the video content and not what’s in the background.
  6. When making screen recordings, you may want to increase the size of the mouse pointer so it’s easier to see and follow around the screen. You can change the mouse cursor size in ‘System Preferences’. Select ‘Accessibility’ and then ‘Display’. When recording, remember to move the mouse at a steady, even pace at all times. Avoid jerky mouse movements and don’t go too fast or too slow either!
  7. Once you have set up your recording environment, go to the point where you will begin the recoding. In our example, this is the page in our EverWeb Project file with the text that we want to hyperlink.

Recording Your Quicktime Movie
With all of the preparation done, it’s time to start recording…

  1. Open QuickTime Player. If it’s not in the Dock use Spotlight to search for it.
  2. Select File > New Screen Recording from the menu and follow the instructions that appear in the middle of the screen.
  3. When you have finished recording your video tutorial, press the record button in the menu bar in the top right hand corner of the screen to end the screen recording.
  4. Next, play your recording back to make sure that it’s how you want it. You may need to re-record a couple of times to get things right. Remember that if you need to re-record, you may need to reset things that have changed in the recording e.g. in the example of Hyperlinks, you would deselect ‘Enable as Hyperlink’. If you find that re-recording keeps going wrong, take a break and come back fresh to it later on.
  5. To add a narrative audio track to your video you’ll need a microphone. This is easily solved by using the microphone included with your mobile phone, such as the one on an iPhone. Plug the microphone in to your Mac. Remember to plan and test your audio track in the same manner as you did with your video track.
  6. Before starting the audio recording, make sure the video recording is at the start of playback. Also, moving the audio and video windows close to each other will make starting and stopping recording and playback easier.
  7. Select File > New Audio Recording. Begin the audio recording and then start the video playback immediately afterwards so that your narrative recording syncs up with the actions of the video recording. Once finished, turn off the audio recording and save the audio file.
  8. To combine the audio with the video, drag the audio recording file you have saved on to the window that contains the video recording.
  9. If the video is too long, use Edit > Trim to edit it down.
  10. To edit down the audio track, select Edit > Trim followed by View >  Show Audio Track. This will allow you access and edit the audio.
  11. When you have finished editing, save the video file. It will have a .MOV extension.
EverWeb's Video Widget Settings

Video Inserted into a web page.

Adding Your Video Content in to EverWeb
With your video tutorial now complete, it’s time to add it in to your web page in EverWeb…

  1. Open your EverWeb Project file and go to the page where you want to add the video.
  2. From the Widgets Inspector, drag and drop the Video Widget on to your page. Position and resize the video placeholder as desired.
  3. In the Video Widget settings tab click the ‘Choose…’ button for ‘MP4 Video’ and select your .MOV video file. You’ll notice that there are two other file format options available: WebM and OGG. Use these options for compatibility purposes with older versions of Firefox and with Opera browsers. If you need to convert from Quicktime’s .MOV file format to WebM or OGG formats look for appropriate conversion programs on the Web.
  4. The updated Video Widget in EverWeb 1.9.5 has a variety of options for video content (see screenshot above.) Generally it’s recommended to go with the defaults most of the time unless you have specific reasons not to. For example, muting the sound is a good idea incase the video is accessed in a public area where you won’t want sound to upset people who may be nearby.
  5. Poster Image in EverWeb

    Example Poster Image in EverWeb which can be used as a Title Card for your video.

  6. It’s recommended to use the Poster Image option as the option places a picture at the front of the video whilst the video itself downloads in the background. It’s useful especially if the video is large and/or download speeds are slow to the device being used. Without a Video Poster Image the video needs to download first to supply an image. The other use of the Poster Image option is that you can easily make a title card for your tutorial, in our example, ‘Hyperlinking with EverWeb.’
  7. Remember that when using Video Poster Image it isn’t supported with Autoplay checked. You may want to advise your visitors that video downloads can be bandwidth hungry, especially from mobile devices before they hit ‘Play’ so they can choose to play the video or not.
  8. To see the results, use Preview in the EverWeb Toolbar before publishing to the Internet. Don’t forget that when you publish to the Internet to test your video content in different browsers to ensure video format compatibility.

Adding video content in to your EverWeb Project is quick easy and hassle free, all it takes are OS X’s native or free apps to get you there!

29 Dec 2015

Password Protect Web Pages and Websites in EverWeb

No Comments EverWeb, Tips and Tricks, Tutorials, Web Design

EverWeb features built in password protection to allow you to restrict access to some, or all, of the pages in your website. It’s a useful and powerful option especially when designing a member’s only website, a member’s only section or a ‘Downloads’ page that you only want privileged visitors to have access to.

There are a couple of ways in which you can restrict access to pages in your website. The first is to simply not have the page on the website. You may want to do this when testing a web page before going live, when you want to have a ‘hidden’ mock up web page for potential customers to experiment with etc. To make a page ‘invisible’ just make sure it’s not included in your Navigation Menu by toggling ‘Include page in navigation menu’ off in the Inspector tab. Also check that there are no Hyperlinks to the page you’re hiding. That’s all you need to do.You only need to give your visitors the direct link to the ‘hidden’ page for them to access it.

Whilst it’s a quick and easy way to restrict access to a page it’s vulnerable and easy to get round. Anyone who knows how to perform particular forms of Internet search will easily find the page. Many with coding experience could also easily find the page and search engine spiders will also still find the page. So be aware of the tradeoff between ease of use and security.

The second and best way to restrict access to web pages is with password protection which is safer and more secure. EverWeb includes this as an exclusive ‘in product’ feature for EverWeb+Hosting accounts. As the feature is in EverWeb itself it’s quick and easy to setup and administer. If you host elsewhere, ask your ISP if they have any password protection features for you.

Password Protecting Your Entire Website

  1. Make the first page of your website into a Directory. To do this right click on the first page listed in the Web Page List and select ‘Convert to Directory’. The page icon to the left of the page name changes to a folder.
  2. Although the page is now a directory, it still functions as a page, so you can edit it as normal. The option ‘Redirect to first child page’ should not be checked in this scenario.
  3. Next scroll down to ‘Password Protection’ in the Page Inspector. The dialog box should be available for you to add in user names and passwords. If ‘Password Protection’ is not available make sure the page has been converted to a directory. Add usernames and passwords as required. That’s all you need to do!
  4. All the other pages in your website have to be contained within the first page’s directory so you will need to move any pages you have previously created in to this directory. It does not matter if you have created other directories as they can be moved as well. See screenshot below.
  5. Password protected website using directories in EverWeb

    EverWeb uses directories to enable password protection. In this example, the directory at the top of the Web Page List has been password protected via the Page Inspector and so the whole website is password protected.

  6. Password protection is a server side function so you won’t be able to use ‘Preview’ or ‘Publish To Folder’. It’s best to create a test area in your ‘Site Publishing Settings’ under ‘Subdirectory’. Then you can publish and test the password protection without having to do so in a live website environment.

Password Protecting Parts of Your Website
If you only want to password protect one or more pages in your website follow the same process as above. Just convert the pages you want into a directory then add usernames and passwords via the Page Inspector. If a directory contains pages within it, they will also be protected as password protection works from the directory level down.

As already mentioned remember to test your password protection by publishing to a subdirectory on your ‘EverWeb’ Site Publishing Settings as ‘Preview’ and ‘Publish to Folder’ won’t function for this server side feature.

EverWeb+Hosting offers you an easy way to set up and administer password protection for your web pages or website from within EverWeb itself with just a few simple steps!

19 Sep 2012

Creating A Mobile Version Of Your iWeb Site

4 Comments Tips and Tricks, Tutorials

iWeb users can create a mobile version of their website in iWeb. The tricky part is getting the iPhone or Android phone to recognize that the user should be directed to the mobile version of the site. The tutorial below will show you exactly how to setup your mobile website from A to Z. The video requires users to have a web hosting account with RAGE Web Hosting in order to follow it completely. Hope everyone finds this tutorial well and are able to make awesome mobile versions of their iWeb sites.

08 Feb 2012

Getting An iWeb Site In Google

1 Comment SEO for iWeb, Software, Tutorials

I know this topic has come up time and time again, so I wanted to quickly talk about it. Many iWeb users experience a bit of trouble getting their sites recognized by Google (and other search engines). This can occur for many different reasons, so I won’t dive into those right now. The easiest way to get any website indexed in search engines in a matter of just a few days is by creating and submitting what is called an XML Sitemap. An XML Sitemap is basically an outline of a website which displays all of the websites links. This Sitemap is not intended for humans, but is drawn up in a way that is meant for search engines. Sitemap Automator, a popular application by RAGE Software allows users to create their XML Sitemaps very easily, and also submit the Sitemap to all major search engines in just a few clicks of your mouse.

I am posting two tutorials below. One will show you how to create the Sitemap and publish it to your web server. The other tutorial will show you how to properly submit your site to search engines, including Google which does require one extra step (but it is totally worth it). You will see just how easy it is to do this. I encourage all iWeb users to create XML Sitemaps, and if you have any questions about the process, feel free to let me know.