Website Tips
Mobile Friendly HTML code
Website HTML these days need to be Mobile friendly, so if you are editing website content, it helps to understand how to write mobile friendly html.
Generally it is best to write simply formatted pages - that is - a flull width block of paragragh text, then a full width image, then another full width block of paragraph text.
But when we want to have images on the side of the text for large screens, and then for mobiles have these images go full width, we then need to start writing some extra code in the HTML to make this happen.
One easy way to write powerful html code is to use a framwork called "BootStrap". It was developed by the guys from Twitter. It allows us to do some clever formatting via <div> tags.
To see the html code - click on the "Code" tab, right left of the text editor window.
<div class="row"> <--- This is a start of a row
<div class="col-md-3"> <--- Start of a column (in a row)
<p><img src="/images/about/Rainfall.png" alt="Rainfall" width="100%" /></p> <--- Note: all images should be 100% width - and delete the height.
</div> <--- end of column
<div class="col-md-9"> <--- start of a new column (in a row)
<p>Rainfall is applied evenly across the model area and varies with intensity over the length of the storm...</p>
</div> <--- end of column
As you can see, it's much like HTML tables. But Tables are not mobile friendly, so webdesigners have moved away from these.
Also note that all images in "Mobile Friendly' pages have a width of 100%. This way the image will adjust to fit the formatting to match the size of the screen.
Delete the height value for images. If you don't, you will end up fixing the image hieght, and for changing widths the image will look weird (ie: it will lose its aspect ratio and will look stretched).
Looking deeper into the ethics of using 3rd Party providers: Go Daddy's founder Bob Parsons
At OrganicWebs we do almost everything inhouse - including building, installing our main servers to host websites.
When we have no option and need to use 3rd parties, we seek to use ethical Australian companies.
Most other webdevelopers spend little time on ethics. As a consequence they (and their clients) might be shocked to realise that they are funding some unethical people and businesses.
After a little research, you can find that the founding members and CEO of GoDaddy is Bob Parsons. The following is taken from wikipedia in Aug 2022. (https://en.wikipedia.org/wiki/Bob_Parsons)
Bob Parsons connection with GoDaddy
"Parsons founded the Internet domain registrar and Web hosting company GoDaddy in 1997. In July 2011, Parsons sold approximately 70 percent of GoDaddy to a private equity consortium led by KKR & Co. L.P. and Silver Lake, and resigned his position as CEO. In June 2014, Parsons stepped down from his position as Executive Chairman. Parsons announced he would be fully stepping away from GoDaddy in October 2018, relinquishing his board seat."
Bob Parsons and Ethics
In 2011, Parsons was denounced by animal rights and other groups for tweeting a video in which he shoots and kills an elephant in Zimbabwe. In response to the shooting, Gawker called Parsons "insane" and "ridiculous." NBC News said "It's definitely the kind of thing only a super rich CEO/founder of a privately-held company could get away with."
Parsons said, "elephants are not endangered and probably there are too many of them." According to Convention on International Trade in Endangered Species of Wild Fauna and Flora elephants are listed as Schedule II."
GoDaddy was criticized as sexist for advertising practices between its first Super Bowl ad in 2005 through the company's IPO in 2014. "The Go Daddy girl was my idea," Parsons said. "I told the ad agency, I want a really well-endowed, good-looking gal in a tight T-shirt, with our name right across her breasts." He used his blog to draw attention to ads that were rejected from television as too racy.
Ref: From Wikipedia...
Unix Tips
Here are some Unix Server Procedures that you might find helpful...
30, 000 Websites Get Hacked a Day
Hosting your website security with a professional web design company does not only protect your Company from cyber criminals, it also help prevent your website from being used to attack others.
In 2013, 30,000 websites were being hacked a day.
[source Sophos Labs]
In the 1990's, virus would spread via emails, floppy disks and word documents. Today the cyber criminals mostly use websites to distribute malicious code. The majority of these 30,000 sites are legitimate small businesses that are unwittingly distributing malicious code for the cyber criminals.
A common misconception is that you won't be a target, that your business is too small...
Ahh - wrong! Regardless of the size of your business, everyone gets attacked.
From Suri Blog (and we found the same)...
"... it takes about 30 – 45 days for a new website, with no content or audience, to be identified and added to a bot crawler. Once added, the attacks commence immediately without any real rhyme or reason. It can be any type of website, the only commonality is that it is connected to the web."
Cyber criminals today now use "Bots" to do their work. These Bots are automated scanning tools that scouring the web looking for websites to attack. They will attack blogs, forms, small websites, or anything they can find. Its a numbers game.
If your website is not being regularly patched with security updates - it will eventually fall victim.
Why do they do it?
As there are many people in the world, there too, are many motivations. Some we have determined from past attacks have been...
- To find credit card information
- Using your website to forward spam to your customers
- Using your website to bypass spam filters and blacklists (and in doing so puts your server on the blacklist).
- Using your website to attack other businesses in a DOS attack.
- Using your website to boost the ranking of other websites (often to the eventual demise of your own ranking).
- To hold your business randsome. The hackers can DOS attack your website, bringing it down, and will only stop if ransomed demands are met.
- To win competitions within the Hacking communities. This is a non-profit activity mostly done by kids. They will deface your website and then take a screen shot of your defaced website to add as a trophy and Hacker's tally. At the end of the year, a winning Hacker gets nominated Hacker of the year.
- To find emails and personal details (to a lesser extent today).
What do we do about it?
At OrganicWebs we have real experience fighting off Bots over the years. As a result of each attack, we study and learn their new technics and tighten our defences. Here are some of the preventative measures we apply daily to the server and individual websites:
- Applying all CMS core updates. Joomla, WordPress, and Drupal are fantatsic platforms for website owners to edit their won websites - but these platforms need patching monthly. An exposed vulnerability in the platforms leaves millions of website owners at risk.
- Monitoring versions of all applications installed on all websites and applying patches as soon as they are released.
- Monitoring the server for unusual activity such as a high CPU load, or a large number of outgoing emails.
- Where possible, we write our own code and avoid using 3rd party applications. Vulnerabilities in 3rd party applications are the most common way to hack a website.
- Not releasing our in-house code to the Public. We want to contribute to the Open Source community, but unfortunately by sharing code makes it easier for criminals to attack our clients. (We instead support the Open Source community in other ways).
- Encrypting all private information
- Operating backup servers with roll back features
- We do not store sensitive credit card information on our Servers. Credit Card information is delivered securely and in real time to the banking gateway.
Is OrganicWebs Impenetrable?
As hard as we try, nobody is 100% impenetrable all the time.
However, because we build and install our servers, plus write our own website templates and code, we can get down to the grass roots of what hackers have been up to when they launch at our sites. Internet security is an evolving landscape that takes time and experience to stay secure.
References:
Windows - Flushing DNS Caches and Settings
DNS is short for "Domain Name Server". It is a computer on the internet that translates a domain name (that humans can read), to an IP address (whish is what computer understands). For example, you would understand what www.organicwebs.com.au means - but a computer would know our website as 103.13.84.70
You computer needs to find these IP numbers regulary - so to speed things up, your computer will store the recent addresses in a file called a Cache.
Server IP's will change from time to time. This typically happens when we move the server to another datacentre. If there has been a DNS change, we need to tell your computer to forget is own list of address and get a new list. This is called "Flushing the Cache".
On your Windows PC...
- Go to the Start Menu and search for cmd
- Run cmd.exe as Administrator (right mouse click to see this option).
- A black window will pop up. That's your "Command Line".
- Type
ipconfig /flushdns
Note: The DNS cache is unique to the visiting PC and is shared across all browsers. Swapping browsers will not flush the DNS or reset the TTL.
To check to see if you computer has remembered to correct IP address, type this in your Command Line:
nslookup organicwebs.com.au
and you should see our IP address as 103.12.84.70
Facebook - Adding a Soundcloud Music Page
These instructions are useful for Bands who use Facebook and would like to share their music. We'll use Soundcloud to host the music and take advantage of Facebook networking. Then we will create a new Music Page in Facebook with Thunderpenny Static HTML.
Take a look at this Australian Celtic band page to see the end results.
Soundcloud Player
Signup for a Soundcloud account here https://soundcloud.com
Upload your files and create a playlist. Your playlist will have a custom URL. Something like...
https://soundcloud.com/organic_studios/sets/jarrah-celts
We need to get the embed code of that Playlist. The trick is to logout of Soundcloud - and then visit your Playlist URL. You will then see the Share button...
Click on the Share button - then click on Embed tab (top) to see your Embed code. This code can then be used on your website, blog, or Facebook Tab.
The code we are looking for goes something like this...
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/83547300&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
The beauty of Soundcloud is that they have a good API and documentation to customise is embed HTML code. We this we can design a clean looking player without the clutter of unwanted features.
The API documentation in detail is here... https://developers.soundcloud.com/docs/api/html5-widget
But in short - the good stuff is here...
| Parameter | Default value | Description |
|---|---|---|
| auto_play | false | Whether to start playing the widget after it’s loaded |
| buying | true | Show/hide buy buttons |
| liking | true | Show/hide like buttons |
| download | true | Show/hide download buttons |
| sharing | true | Show/hide share buttons/dialogues |
| show_artwork | true | Show/hide artwork |
| show_comments | true | Show/hide comments |
| show_playcount | true | Show/hide number of sound plays |
| show_user | true | Show/hide the uploader name |
| start_track | 0 |
Preselects a track in the playlist, given a number between 0 and the length of the playlist. |
You can try some parameters out with this API playground: https://w.soundcloud.com/player/api_playground.html
The embeded code can be used eveywhere - in your Blog, Facebook page, Website, etc.
ThunderPenny Static HTML
Now we are going to use the Thunderpenny Static HTML to create a new Music tab on your Facebook page - and then paste that Soundcloud code into it. You can use ThunderPenny to create other pages too.
Follow this links to install the Static HTML app...
https://apps.facebook.com/static_html_plus
You need to add <html> and <body> tags to your code. So it will look like this...
<html>
<body>
<h2 style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;">Here are some of our Tunes. Enjoy!</h2>
<iframe width="100%" height="600" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/83547300&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=false">
</iframe>
</body>
</html>
Work your way around the app. Click the [Save & Publish] button. Click the [Done editing] button when finished.
There will now be a "Welcome" Tab on your Facebook page. You'll now need to rename that to "Music".
Changing Facebook Tab Name
Log into Facebook and go to your Band page.
Click on the "More" tab, and select "Manage Tabs" from the dropdown.
You can now drag the "Welcome page" up to near the top.
To change the tab's name from "Welcome" to "Music" - click on "Add/Remove Tabs".
Then click "Edit Settings"
Change the Custom tab name to "Music"
References:
http://www.glenngutierrez.com/2014/10/how-to-add-music-to-your-facebook-fan-page/
FTP with cPanel accounts and Windows 7
It is possible to use the file explorer in Windows 7 to setup a cPanel ftp connection. The trick is entering the user details in a way that windows7 will accept. Its first dialogue box doesn't recognise the @ sign - but we can enter it in properly later...
Step 1:
Step 2:
Step 3:
Step 4:
More Info:
http://windows.microsoft.com/en-au/windows/work-with-files-ftp-site#1TC=windows-7