iOS web apps are actually websites on Safari that are saved to the home screen using native tools in iOS. This usually turns the website into a small icon that looks like a webpage and title you enter for easy access. Some websites have special icons called Favicons in their code to make the web app have a special icon like a true app. Some even go further and take the look of a web browser completely away, giving the appearance of a true app to the website.

Wouldn't it be cool to make your website one of these cool web apps? And wouldn't be better if you could do it for free? 
​

Here are the sites that you will need accounts:

• Weebly for the free website
• Canva for creating the web app icon

There are more ways to accomplish building this customized web app, but I will be using Weebly and building for iOS. 

​If you have never built a website using Weebly, check out this tutorial:

If you have never used Canva before, watch this tutorial:

• When testing the changes, you need to delete any web app from your site on your iOS device and also clear Website History & Data. If you do not, you will not see changes or updates in the existing web app.
• While Canva does provide a link to your created icon, it is a best practice to download the design and upload to the same website for which you are designing the icon.

​

Create an icon in Canva. To do so, create a custom design and size it to 1024x1024px. For the best looking icon on an iOS web app, make the background image white. To make things easier later, change the name of the design to "apple-touch-icon" and download as a png file.
​

Create a page in your Weebly website named "images". Make sure to select "Hide in Navigation".

Drag an image place holder to the "images" page and then upload your "apple-touch-icon.png". Fair warning, sometimes the upload process does not like hyphens in the upload. You can rename without the hyphens, you just may need to remember to potentially rename it in the code also. I would recommend trying it a few times or open in something like MacOS preview and export as the same name. This can sometimes remedy the issue and cut down on issues later. Once you click publish, open another web browser tab and go to your iamges web page. It should be your domain plus "/images". Here is what mine looks like: jamesmccrary.com/images. We will come back to this web page later.
​

Access your Weebly website's settings for your header code under SEO (Search Engine Optimization). 

Paste in the following code in the header:

<link rel="apple-touch-icon" href="xxxx"/>
<link rel="apple-touch-icon" sizes="72x72" href="xxxx"/>
<link rel="apple-touch-icon" sizes="114x114" href="xxxx"/>

Replace xxxx with your image web location. To find the image location, go back to your web site images page you opened earlier. Right click the image and select "Copy image address" on a Mac or "Copy image URL" in Windows. Once you have completed this step, most iOS devices will scale to the appropriate sized icon image.
​

Only completing through step 3 will not yield the best results. Two things occur if you stop there: 

1. Your users will get a default name when they save to home screen that is as long as the website. That doesn't look great as an icon title on an iOS home screen.
2. When your users click the icon on their home screen, it will open in Safari. Not exactly what a true app does.

So, here is the code to place below the icon code in the header (replace xxxx with whatever you want:

<meta name="apple-mobile-web-app-title" content="xxxx">
<meta name="apple-mobile-web-app-capable" content="yes">
​                     
While both lines fix the above two issues, another one will arise. Please move on to step 5 to see the problem and cure.
​

Removing the web interface makes your web app look really clean and crisp. However, once the user navigates away from the home page to another page in your site, it will open in Safari. So here is the code you need to place under the other code in the header. No need to edit...just copy and paste:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

Make sure to click save at the bottom right in the settings on Weebly, then click Publish in the top right. Grab your iOS device and go to your website on Safari. Add your website to your home screen.

Let me know your thoughts or if your think I am missing anything...I'm here to help.

If you are like me, you were mezmerized by the first use of Google Expeditions. After the experience, the first thing I wanted to do was create my own virtual experience. Other companies like Nearpod also jumped in the mix with integration of VR for education use, but it still wasn't forward thinking enough. I wanted to CREATE a fluid 360˚ virtual reality experience. But alas, tech was expensive and no real great options for hosting them if I could even get the imagery. However, technology advances quickly and it was not long before I was able to start capturing photospheres (360˚ photos) at no cost.
​

This awesome app would have an update for iOS that would bring it on par with Android (at the time, Cardboard camera nor Street View with Photosphere option was not available for iOS). 

The manual photosphere camera is located inside of the app. You can choose to publish the location to Google Maps, but for the sake of what I wanted to do or have students do, it wasn't very conducive. Instead, I chose to "share" & save my photosphere privately and uploaded it to Google Drive for linear access. But, there were a few issues. First, the quality was not exactly the highest (I know it was free, but can't be satisfied with the status quo) because of the 12+ images you had to take..and have a high level of precision. Second, the use of Google Drive while making it more linear still did not create a fluid experience. You would have to download and upload into the Street View app on each device. I also wanted to be able to move from one image to the other without taking off the headset. And lastly, I wanted to venture out and find how to make videospheres. Of course, the evolution speed of technology did not disappoint.
​

This tool was an awesome find and it is nothing short of spectacular. It was on sale for under $300, so it wasn't going to kill the budget. This little tool takes two high resolution images and stitches them together. A far more better result than the 12+images from the manual mode on my iPhone. The Theta also did HD video. And both can be controlled by your phone from a distance...like a selfie stick.
​

It wasn't a huge learning curve, but it does have a ton of auto and manual features you typically find on a DSLR camera. The only setback was the file size of the videos. Processing and transferring wirelessly was daunting to say the least. But I simply started to use tethering to transfer all of the images and videos. Check out the help page for all you need to know to use the Theta S...including transferring. And since then, Ricoh has debuted their third version of spherical cameras. There is now a 360˚ camera at nearly every pricepoint from under $200, $300, and $400. However, the Theta M15 will soon be unavailable. If you want to get a good spherical camera for under $200, need to act fast.

Click an image below to find out purchasing information

Having the Theta S solved two of my issues: quality and video. However, even the Ricoh gallery could not provide a good enough solution to guide others through 360˚ journeys. And once again, tech comes through in the clutch.
​

What can I say? This web tool really does pull everything together. I can host a 360˚ tour of my 360˚ photos AND video in a way that is easy to navigate. You can easily move from one stop to another and view 360˚ photos/videos in a way that makes sense and easy to navigate. And the best part is students only have to go to the link you provide from YouVisit. 
​

​​And this tool goes beyond just tours. Using the YouVisit Experience Builder, you an integrate regular photos, panoranimcs, and regular videos. Think of the possibilities! You can type or draw information on a 2D photo, record an instructional video in typical view, and integrate them among your tour. And to top it off, there is a virtual reality viewer for iOS and Android. With these apps, you can open the link in a viewer for use in headsets, like cardboard, to experience your very own unique expedition. You can even use those manual photospheres from Google Street View. And you never...NEVER have to take the device out of the headset or use magnetic disruption to move throughout the experience. You simply look at the selectors tools inside the experience to navigate. And did i mention this tool has a FREE OPTION?!? Combined with Google Street View app, you and your students can create awesome expeditions AT NO COST. For an even better experience, you can upgrade to the Ricoh Theta series starting at less than $200. All in all, a pretty sweet deal for those wanting to create virtual reality exeriences using 360˚ imagery.

​
Leave your thoughts, ideas, comments below. Or even share how you are using this type of technology!