Flat Panorama Publishing
As a previous introduction to the conversion of panoramas into interactive Virtual Tours for web pages, on this page we'll show how to insert into pages panoramas in flat or static mode.
If you already know about html edition then this page will prove superfluous, however we include it understanding that not all people interested in panoramic photography have this knowledge.
Just as in the pages of a notebook we can write directly on the paper, or we can add an external element such as a photograph, pasting it on the page, the web pages may also include elements that do not belong to them. In this case, the bonding is not performed by hand but with a reference, so that when the page is displayed on the screen, the screen will display where corresponds not the reference -which is itself a text- but the element to which it refers. This means those who see the page will not see a text that includes a reference to a photograph, but the photograph itself, as it is seen at the bottom of this paragraph :
This is done very easily but first we need to understand what a webpage is. A webpage, just as everything that happens in the internal world of computers is an intruction. The computer reads the instruction and takes orders by showing on the screen what the instruction tells it to. The programs we use to see webpages are called browsers. You are reading this on a browser. The most popular browsers are Internet Explorer, Mozilla Firefox, Google Chrome, Opera and others.
Browsers interpret a set of instructions, usually saved as files, and take orders by showing on the screen what this instructions tell them to.
However this files can also be interpreted by other types of programs. For example, the text editors such as Notepad, WordPad or Microsoft Word can also open them. The difference is that while browsers interpret the instructions in the files and take them showing the results in the screen, the text editors simply show the instructions as a code. If we open the file corresponding to a web page with a text editor and change part of it, we could save the changes and then, when seeing the modified file in a browser, we could tell the changes reflected in the interpretation that the browser does and shows on screen.
On this page we'll learn in a very brief way the webpage editing principles. Our goal is to take a certain page which is displayed by browsers in a certain way, open its intructions with a text editor and modify them by adding to the already existing orders a new one : to show a photograph. Once the change is saved we'll go back to the browser to check how the picture is now visible on the page.
For the previously described we'll need two elements: the photograph and the webpage where to insert it. To get started, we'll create a folder where to place these items. For our example, we'll create a folder on the main unit disk, identified with the letter C :
Starting with the File menu we will click on New and Folder :
The new folder has been created and it is ready to receive a name :
For our example we chose to name the folder Panorama_plano (Flat Panorama). We could have chosen any other name :
After creating the folder we will start a text editor program. Any program of this type will be useful. For our example we use the Microsoft's Notepad. Below we see the open window without any content :
Before entering any text we'll save the (empty) content of this document with a filename by clicking on File and Save As :
As a location for the new file we'll choose the folder we have previously created C/Panorama_plano and as the name for it we'll use pagina.htm (page) :
Notice that the archivo.htm chosen file type tells the computer that the file is a webpage. Computers are usually configured to, when we run a file with this format, start a browser running, so that clicking or double clicking on an icon correspoding to an .htm file should open the default browser on that computer and load the executed file in a window. Now in the Panorama_plano folder we see the page.htm file :
To make more evident the relative locations of a file over another, before placing the image file we'll create a new folder within the Panorama_plano folder :
The new folder is ready to receive a name :
We'll call this new folder foto (photo) because this will be the content that we'll keep put inside it :
We see the Panorama_plano folder with its contents :
Inside the foto folder we'll place the image file with the panoramic photograph we want to insert into the page :
Click on the image to download the panorama and save it inside the folder with the mentioned name Panorama.jpg :
We already have the elements we need. Our picture may be opened and viewed with any image viewing program even a browser, for example, dragging the file to a window of the latter. However our goal is not just to see the picture in a browser but to integrate it on a webpage. Our webpage, also, can be viewed on a browser but it is blank, it has no contents :
Editing The Contents Of The Webpage
To edit the website we'll work simultaneously with two programs: a browser and a text editor. Normally it should be enough to click on the icon corresponding to a file identified as a webpage by the computer for it to open it in a browser. This however is not always true. The best way to open the file with the desired program is to click on the file icon with the right mouse button and choose the option corresponding to Open With and select the browser of our choice :
Next we see how Internet Explorer has opened our page. We see the confirmation that this is the right page in the address bar. Since the file had no contents, the browser shows an empty page :
We'll repeat the above procedure, this time to open the page with a text editor :
The name page.htm written in the blue frame of the text editor window confirms that we are looking at the correct file. As the browser, the editor shows that the opened file content is empty and therefore there is no text in the editing window :
So we see simultaneously two versions of the same file, one interpreted by the browser, the other displayed without interpretation in the text editor :
To begin, we'll write a text as a title using for this the text editor. We chose the words Panorama Plano (Flat Panorama) :
From the File menu we'll click on Save to save the change :
By clicking on the Reload button in the browser, the words we have introduced become visible. Note that we have added to the file only these two words and no other indication as it could be a color, font type or size. The browser then shows the text with the features defined by default values :
Always Writing in the text editor, a few lines below we'll add a description : Ejemplo de panorama plano (Flat panorama example). Once again we'll save the change and update the view in the browser. The new text appears, again with the same characteristics of color, type and size. However we can see that is does not appear lines below but coninuing the text written in the first place. This is so because browsers simply ignore whitespace on lines of code. Any blank spaces in excess of one character are ignored. Also, browsers interpret all elements of a code occupy the same line :
To get both texts to occupy different lines we must introduce among them a line break, whose syntax is <BR>, in the way that we see below. When updating the page in the browser we see that, now, the second text has passed to the next line :
Only now we can understand more clearly the difference between the interpretation of the same file done by a text editor or by a browser. While the text editor shows the description of all elements on the page (so far, two texts and a line break) the browser makes an intepretacion and shows us the texts, ordered taking into account the instruction to break the line between. The line break is seen explicitly in the text editor and is invisible but appears implictly in the interpretation that the browser is doing of the file, and so it shows both texts in different lines.
At this point we can say that all bracketed elements will always be interpreted and never copied literally as with our texts. We'll add a new line break and after updating the browser we'll see that now between our two texts, besides a line break we can identify an empty line :
In this space we'll add a new element between brackets. This implies that the browser in interpreting the element will not copy it literally but it will identify the content of the element and show on the screen an interpretation of it. We will identify the element contained in brackets as an image by assigning it the element type <IMG> inside the brackets. Moreover, in the same brackets we'll add the reference that tells the browser where to find this picture. This reference defined by the expression src="" adding between the quotation marks the location of the file relative to the .htm file which includes the reference. Since this last file was in a folder, inside which another folder named foto contains the image file Panorama.jpg, the content in quotes will be foto/panorama.jpg. The complete label will then be <IMG src="foto/panorama.jpg">.
It is important to remark that when writing codes like these we must not commit any mistake. A missing point or a point in excess, a comma instead of a point, a letter instead of another, two terms typed togheter when they should be separated, any semantic or typing error can result in an element looking incorrectly or not being shown, or may even make the whole page fail. If on updating the browser it displays something unexpected, the first step is to check that no errors of this type have been commited.
By saving the changes and updating the browser window we see the content of the page is now the first line with the title, then an -invisible- line break and in the second line the photograph. The second line break and the descriptive text have been occasionally moved out of sight in the picture below :
The IMG element is just one of many elements that can be defined for a web page. Each one of them can be modified by additional parameters that are specific to each type of item. One of the modifier parameters accepted by the IMG element is width. Since the image we have inserted is too big for the page design we are creating, we'll modify its size by defining for it a width of 400 pixels. If we don't define independently a height value, the image size change is performed keeping intact the ratios between the sides. So the complete label is <IMG src="foto/panorama.jpg" width="400"> and the result is as follows :
While as we have seen it is enough to define a single dimension of the image to make it possible for its size to be altered without changing its shape, some set their browsers to block displaying images, in which case, the pages will display empty spaces instead of these images. To prevent these empty spaces from completely disarming the design of the page, it is a common practice to write both the width and height of the image so that should not be the image shown, the replacing space has the same dimensions as the image that had to be on its place. Although for not having disabled the use of images this will not affect the view we have of our page, we will include the height of the image and now our entire label is <IMG src="foto/panorama.jpg" width="400" height="115"> :
Finally, before closing this brief introduction to the edition of web pages, we'll mention that there are at least two types of elements that can be on a page :
On one hand, those representing themselves such as the <IMG> element whose complete definition and parameters are all in a single label enclosed in brackets < >.
In the other hand, certain elements -some of which are invisible- serve as containers for other elements and are recognized by being defined not by a label but by a couple of them, the first of which setting the beggining of the contained element and the other one its end. For example the pair of labels <h3> and </h3> tell us that the enclosed element between them must be shown as a third level title.
We'll apply this pair of labels to the first text of our example -to which in the beggining we intended to identify as a title- and also, within the opening label we'll add a parameter align="center" to indicate that the title should be displayed horizontally centered on the page. Now the entire element must read <h3 align="center">Panorama Plano</h3>.
We'll do something similar with the lower text. In this case we will not identify it as a title but we'll simply define some characteristics of the font it will be displayed on. For this we'll surrender all text we want to modify between a pair of tags <FONT> and </FONT> and within the opening tag we'll write the desired parameters, in our example, font size 2 and color red. The entire element now reads <FONT size="2" color="red">Ejemplo de panorama Plano</FONT>.
We will use the occasion to once again modify the image tag. There are a number of parameters that could be added to an <IMG> tag of which we'll choose a solid border with a width of 5 pixels surrounding the image which, not having defined a parameter assigning it a color, will be shown in the default color set on the browser for this type of border. The modified label now reads <IMG src="foto/panorama.jpg" width="400" height="115" border="5"> :
We ascertain that all changes have been applied. Now the text identified as a title is centered, its size and the font's weight are now increased and an empty strip separates it from the rest of the contents. The picture has a black colored border and the description text is red and its size has decreased.
So far we have learned the minimum basis for the edition of a website and how to insert on it a simple element such as a photograph by adding on the page's code a reference to an external file. From the next page we will see how by linking more elements we can insert the same photograph but to get it displayed not as a flat image but as an interactive animation or Virtual Tour.
Add A Question Or Comment
All fields are optional. Messages not regarding the subject may be moderated.
If you like 360 Facil please share it with your social networks
With any camera
360 Degree Interactive Panoramas
In Three Easy Steps
After reading this tutorial you'll be able to create your first 360 degree interactive photography with the camera you already have :
1 - Photograph
Take one or more pictures of the place you want to show.
2 - Edit
Convert your pictures into 360 degree panoramas.
3 - Publish
Make your panoramas interactive and available to the world on the internet.
If a picture is worth a thousand words, a 360 degree interactive panorama is worth a thousand pictures...
Online Virtual Tour Creator
Using the online virtual tour creator you can :
Convert your 360 degree pictures to virtual tours with a single click.
Insert your virtual tours into web sites, emails, blogs or wherever you like by just copying and pasting a text.
Know in a practical way all kinds of 360 degree pictures.
Discover that you can create hundreds of interactive virtual tours just as easily as you take pictures with your camera.
Check that with just one click from your camera and another click from your mouse it is possible to create a 360 degree interactive virtual tour out of nothing. And completely free of charge!!!
You can get started right now, even if you don't have a camera
Find us in Facebook and thank you for your Like.