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? First things firstHere are the sites that you will need accounts: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: Points to keep in mind...
Step 1Create 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. Step 2Create 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. Step 3 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. Step 4Only completing through step 3 will not yield the best results. Two things occur if you stop there:
<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. Step 5Removing 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> Step 6...Test it Out!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.
0 Comments
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.
Enter Google Street View
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.
Enter Ricoh Theta S
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.
1-in-3 buddies! Great job to all! #iste2016 #presentersofiste #theta360 - Spherical Image - RICOH THETA 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. Enter YouVisit
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! The current rage these days is to bash tech use in education, as exampled in this article found at The Chronicle of Education. This article (and similar ones that have been surfacing over the last 2+ years) are biased, anti tech in education. While reading these, I again come back to this simple thought: it isn’t pen and paper is so much better than digital, it’s students are asked to apply digital tech to antiquated methods because it is safe.
But even if we want to really chase the white rabbit, this premise of this article can be debunked because of its limited scope and failed attempt to use proper digital resources. This article claims long handwriting is better than digital note taking. In making this claim, the subject makes an egregious error and blanket assumption: long handwriting cannot be done with digital technology. Really? It’s funny because I did that exact thing during several meetings last week. There were no distractions from multi tasking (there is nothing wrong with multi tasking and I believe teachers should shoulder the burden of instructing students healthy ways to channel multi tasking…it can be greatly beneficial), just my device I was fluidly handwriting on complete with other tools a frigin piece of paper and a pen don’t have. What tools? How about audio recording, easily move written text by a selection box, multiple writing tools at my disposal (multiple colors and opacity), quickly embedding a video or photo, annotating over photos/inserting captions on photos/videos, adding graphs efficiently, etc? All this to make a simple point. It isn’t that digital tech is not as beneficial as pen/paper, in fact it is more beneficial. The problem is with control. Pen and paper are easier to control what the student is doing. They can’t check their email on their paper. They can’t pull up a video with a swipe of their pen across said paper. For the teacher, it is safe. But wouldn’t it be great if we as teachers recognized the full potential of being able to check email while writing or pulling up a video while note taking? Or better yet, look at alternatives for note taking that would be of benefit to the individual student? And I include all levels of teachers. It would be great if professors or instructors at the university level would stop it with the digital ban. Are there students that won’t use digital tech properly? Yes. This would be the equivalent of making a paper airplane out of paper that should have been used for note taking. However, those students who have learned the benefit digital tech has provided them will be the ones on top in the end. We as teachers need to be more open to the change. I would love to take the same students from this article and apply new methods with them. Proper use of technology will trump analog. STOP FIGHTING DIGITAL TECHNOLOGY AND LET IT WORK FOR YOU! |
AuthorJames McCrary is a director of technology and innovation and consultant located in Baton Rouge. ArchivesCategories
All
|