Back in 2003 I was involved in a government project, The National Grid for Learning-Cymru. Our brief was to improve the use of I.T. in schools right across Wales. One of our main activities was to create a fantastic online learning repository, creating websites that were interactive and worked well on an interactive whiteboard. To that end, it felt as though every Monday morning, we were asked to leave our brains on the table whist our bosses sucked out all of our ideas. Seriously though, we actually created some quality material.
Sadly, most pages were created using a technology called Flash. Back in 2003, Flash was indeed the bees knees. However, as the years have gone by, Flash has fallen out of fashion. It is to be taken off line at the end of the year and along with it, we will lose so much of the N.G.F.L.-Cymru material.
During lockdown, I’ve been trying to ‘hoover up’ some of my best websites/ I’ve tried to re-present them for posterity in a non-Flash form. I’ll be honest, they aren’t a patch on the Flash versions but at least I have something to keep the memory alive.
One of my best efforts was Frankenstein’s Model Theatre. This was a modern take on the old Victorian toy. Using it, you could create a play involving four moveable characters complete with special effects and sound effects.
I’ve created a non-Flash version of the theatre here.
Boot-up
Phishing quiz – https://www.makeuseof.com/tag/google-quiz-help-spot-phishing-emails/ – any feedback? [Ted was concerned about providing his details at the start of the Quiz. His fears were understandable, but unnecessary – read the Comment beneath this post, from me.]
Google’s apps to help the hard of hearing [Ted, Jim, Martin]. Unfortunately (and as I clarified at the meeting) – it’s not possible for me to check every link for accuracy or relevance. All I can do is point you in possible directions. I will only make recommendations when I actually use the software, or hardware, that I write or talk about. Thus it’s unfortunate that Ted wasn’t able to test the apps referred to in this piece from the previous meeting. One because it wasn’t in Google’s Play Store, the other because it required a more recent Android device than the one he had. Such is life! Martin however brought in some information that I found on the Internet as well, and I’m pleased to be able to provide the link here.
Mesh networks [Paul]. Paul was so impressed in the process of doing his research he even ate his own dog food and purchased a system. He’s going to discuss it, and other ways of improving your home WiFi in the session he’s going to lead on March 28th.
Any other member issues?
Well … David Hughes’ impassioned plea for guidance on buying TV systems, was met with much agreement so I’m going to do a session on that next time, as well as a bit more on websites – following on from todays’ session. News
Getting more out of your camera with your iPhone. How hackers break into your Bank accounts. Sharing files between your iOS device (iPhone or iPad) and your Mac. Mesh WiFi on a budget. How to find your iPhone in the house, when it’s muted. Don’t want to use Dropbox to share a file with anyone – here’s five other ways of doing it. Be frightened, really, really frightened … maybe. How the web works
I’ve shown this before, but it’s a good place to start and a refresher for what I’m going to work towards …
Well from this you can see the importance of IP Addresses, and there’s reference to how information is broken down into packets, but it’s difficult to envisage just how this works. Watch this and all will be explained …
However there’s no reference to Domain Name Servers (or DNS) – which the first short film mentioned and perhaps surprisingly these are probably the most important part of the internet – the piece that really makes it work.
Then we need to look at the components that we use, that make the internet usable to us. We’ve had quite a discussion this year about what is a browser, I wish I’d found this (rather dated but still accurate) little clip before …
So we have a client (your browser – Brave, Firefox, Chrome, Safari, Edge, etc) and there is the information you want to look at which is stored on servers. We know that your client has to translate a web address (a URL – uniform resource locator) into an IP address using domain-name lookup, and then route packets across the internet from the client to the server, which then sends the information requested back to the client. But how does this work given there are so many different devices, and quite a few different browsers?
The answer is to be found in protocols (again as mentioned in the first video) of which the most important is http (or HyperText Transfer Protocol); in fact this is the assumed protocol that the browser will try and use, unless it’s told otherwise; so much so that you no longer need to precede your URL with http:// – your browser just assumes that is what you’re going to use. To make this protocol more secure, a later development has been the introduction of SSL (secure socket layer) and https:// – but I’m not going to go into how this works, at least not today!
But having a protocol (how you talk to another device) is just the starting point. It’s no use for devices to talk different languages to each other! That’s where HTML (HyperText Markup Language) comes in – it’s an instructional language that tells a device exactly how the information should be displayed on a screen, or on a smartphone, or on any device connected to the internet.
At first if you wanted to display certain kinds of content you had to have plugins installed in your browser – of which the most notorious was Adobe Flash player – for showing video clips; but other approaches have been to use a programming language plugin, such as Javascript, or to devise systems which can interact with database content, such as Active Server Pages. None of these are particularly recommended nowadays as there were found to be the potential for many security issues. So now most of the effort in HTML is to improve the code, and that is where we are with HTML5 – the latest iteration of the language.
As the range and type of devices has proliferated, eg smartphones, smartwatches, tablets – to name but three, so the language has had to be extended and expanded to cope with devices to become responsive which is the term used to describe the behaviour of a webpage when you rotate a webpage, change the size of a browser window, embed a video in a page (as I have done in this page today), or choose to show a pop-up window on a page.
So to conclude – what does a webpage look like under the hood so-to-speak.
Do you want to see? Here’s the HTML for this page
=====
<span style=”font-size: 18pt; font-family: arial, helvetica, sans-serif;”><strong>Boot-up</strong></span>
Phishing quiz – <a href=”https://www.makeuseof.com/tag/google-quiz-help-spot-phishing-emails/” target=”_blank” rel=”noopener noreferrer”>https://www.makeuseof.com/tag/google-quiz-help-spot-phishing-emails/</a> – any feedback? [Ted was concerned about providing his details at the start of the Quiz. His fears were understandable, but unnecessary – read the Comment beneath this post, from me.]
Google’s apps to help the hard of hearing [Ted, Jim, Martin].
Mesh networks [Paul].
Any other member issues?
<span style=”font-size: 18pt; font-family: arial, helvetica, sans-serif;”><strong>News</strong></span>
Getting more out of your <a href=”https://www.cultofmac.com/607708/apple-shows-us-how-to-make-the-most-of-iphones-camera-features/” target=”_blank” rel=”noopener noreferrer”>camera</a> with your iPhone.
<a href=”https://www.makeuseof.com/tag/methods-hackers-bank-account/” target=”_blank” rel=”noopener noreferrer”>How hackers break into your Bank accounts</a>.
<a href=”https://www.makeuseof.com/tag/what-is-airdrop/” target=”_blank” rel=”noopener noreferrer”>Sharing files between your iOS device (iPhone or iPad) and your Mac</a>.
<a href=”https://www.makeuseof.com/tag/amplifi-instant-review/” target=”_blank” rel=”noopener noreferrer”>Mesh WiFi on a budget</a>.
<a href=”https://www.cultofmac.com/608840/find-iphone-muted/” target=”_blank” rel=”noopener noreferrer”>How to find your iPhone in the house, when it’s muted</a>.
<a href=”https://www.makeuseof.com/tag/dropbox-quickest-ways-share-file-si/” target=”_blank” rel=”noopener noreferrer”>Don’t want to use Dropbox to share a file with anyone – here’s five other ways of doing it</a>.
<a href=”https://www.makeuseof.com/tag/internet-of-things-hacks-exploits/” target=”_blank” rel=”noopener noreferrer”>Be frightened, really, really frightened … maybe</a>.
<span style=”font-size: 18pt; font-family: arial, helvetica, sans-serif;”><strong>How the web works</strong></span>
I’ve shown this before, but it’s a good place to start and a refresher for what I’m going to work towards …
<iframe src=”https://player.vimeo.com/video/128575085?title=0&byline=0&portrait=0″ width=”640″ height=”360″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
<a href=”https://vimeo.com/128575085″>BBC Computing — How Does The Internet Work?</a> from <a href=”https://vimeo.com/splinterdesign”>Splinter</a> on <a href=”https://vimeo.com”>Vimeo</a>.
I’ve also shown this before, and again it’s worth just a quick look to explain how <strong>routers</strong> and <strong>IP addresses</strong> work.
<iframe src=”https://www.youtube.com/embed/7_LPdttKXPc” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
Well from this you can see the importance of IP Addresses, and there’s reference to how information is broken down into <strong>packets</strong>, but it’s difficult to envisage just how this works. Watch this and all will be explained …
<iframe src=”https://www.youtube.com/embed/ewrBalT_eBM” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
However there’s no reference to <strong>Domain Name Servers</strong> (or DNS) – which the first short film mentioned and perhaps surprisingly these are probably the most important part of the internet – the piece that really makes it work.
<iframe src=”https://www.youtube.com/embed/72snZctFFtA” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
Then we need to look at the components that we use, that make the internet usable to us. We’ve had quite a discussion this year about what is a <strong>browser</strong>, I wish I’d found this (rather dated but still accurate) little clip before …
<iframe src=”https://www.youtube.com/embed/BrXPcaRlBqo” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
So we have a <strong>client</strong> (your browser – Brave, Firefox, Chrome, Safari, Edge, etc) and there is the information you want to look at which is stored on <strong>servers</strong>. We know that your client has to translate a web address (a <strong>URL</strong> – uniform resource locator) into an IP address using <strong>domain-name lookup</strong>, and then route packets across the internet from the client to the server, which then sends the information requested back to the client. But how does this work given there are so many different devices, and quite a few different browsers?
The answer is to be found in <strong>protocols</strong> (again as mentioned in the first video) of which the most important is <strong>http</strong> (or HyperText Transfer Protocol); in fact this is the assumed protocol that the browser will try and use, unless it’s told otherwise; so much so that you no longer need to precede your URL with http:// – your browser just assumes that is what you’re going to use. To make this protocol more secure, a later development has been the introduction of SSL (secure socket layer) and https:// – but I’m not going to go into how this works, at least not today!
But having a protocol (how you talk to another device) is just the starting point. It’s no use for devices to talk different languages to each other! That’s where <strong>HTML</strong> (HyperText Markup Language) comes in – it’s an instructional language that tells a device exactly how the information should be displayed on a screen, or on a smartphone, or on any device connected to the internet.
At first if you wanted to display certain kinds of content you had to have <strong>plugins</strong> installed in your browser – of which the most notorious was Adobe Flash player – for showing video clips; but other approaches have been to use a programming language plugin, such as Javascript, or to devise systems which can interact with database content, such as Active Server Pages. None of these are particularly recommended nowadays as there were found to be the potential for many security issues. So now most of the effort in HTML is to improve the code, and that is where we are with <strong>HTML5</strong> – the latest iteration of the language.
As the range and type of devices has proliferated, eg smartphones, smartwatches, tablets – to name but three, so the language has had to be extended and expanded to cope with devices to become <strong>responsive</strong> which is the term used to describe the behaviour of a webpage when you rotate a webpage, change the size of a browser window, embed a video in a page (as I have done in this page today), or choose to show a pop-up window on a page.
===== Finally, there’s a lot of information about the internet, going online, and what you can do on the BBC’s Webwise pages – a real shame it’s not being updated anymore.
