Editing Google New Sites web pages on iPad

Now Safari running on iPad OS 13 defaults to the desktop mode and not the mobile mode you can create and edit Google Sites provided you have internet connection. Currently I have iPad Pro 12.9 inch Version 3 (2018) model and I use it with external keyboard and mouse which greatly improves Google Sites editing.

There are a couple of strange behaviour with this setup though. 

• If you use Chrome browser on this iPad it does not let me edit Google Sites. 
  
  However Firefox on iPad works same as Safari.
  
   MS Edge on iPad defaults to mobile mode but you can switch to desktop mode by clicking on the 3 dots top right and select View desktop site. A warning from Google pops up saying this version of browser no longer supported but so far I can edit using it. 
  
  Incidentally you are suppose to be able to do this on Chrome but the View desktop site message is now missing
  
• If I am using the iPad without the keyboard, it can be difficult to edit the bottom of the page which can be hidden by the keyboard. This is not a problem when using external keyboard.
  
• If I want to move a block, say of text, when I touch the small rectangle of dots on the left of the block and attempt to drag it to another position it fails to respond.However if I use a mouse it works perfectly.
  
• The reverse is true if I try to resize a block, the mouse fails but the finger works.
  
  I am currently using a normal wireless mouse but have a Magic Mouse 2 being delivered tomorrow so will see if this works differently.

Note:

It has been ages since I used this blog so this post is also an experiment to see if I start using it again to accompany my revised www.photo-notes.co.uk site I am developing.

Wordpress - a quick look

It is obvious that Wordpress is a very successful CMS (Content Managed System) and used by masses of people, therefore well past the time I should have a serious look at it.

It is very flexible, and has lots of features both free and small cost, developed around the world. However I am not convinced it is what I want. To develop quick sites I believe this can be done much easier with Weebly or Google Sites. To develop more sophisticated sites then I prefer to use native HTML5, CSS3, PHP and Jquery.

When developing more complicated sites I often find that you are trying all types of tricks to manipulate the CMS tool to do what you want, and you may just as well build it yourself. I also prefer to understand what my site does and not just understand the output.

So for the near future I will continue to use mainly HTML5 etc and Weebly.

Update

After writing this post I spent another couple of weeks giving WordPress a go, but in the end I was spending so much time trying to get it to do what I wanted when I could achieve same result in just a few minutes with native CSS and HTML. 

So I have archived site. 

Hybrid Web Development

I go in circles trying to decide whether to use WCMS (definition below) or native code (HTML, CSS and JavaScript). I prefer using native code but worry that large sites would become unmaintainable unless I use tools such as PHP so that common code can be held in single files, but this adds more complexity.
Content Manages Sites I have used include Weebly and Google Sites. Both quite easy and powerful but then I worry about being at the mercy of a third party who could change or cease to provide the service but I do like the ease of having a web presence without having to deal with or pay an ISP (Internet Services Provider).

Hybrid approach

I like to combine the two approaches, using the CMS to provide menu which is then easily maintainable and provide internet services, but the bulk of the page is built in native HTML and CSS which can then be transferred to another environment if necessary.

CSS & JavaScript

When using a CMS site it is important to consider how much control you have over CSS and whether JavaScript and hence Jquery is supported. If so then you have a lot more control and capability to write the pages as you want.

Web Content Management System (WCMS)

I have lifted this definition from Wikipedia.

A web content management system (WCMS)is a software system that provides website authoring, collaboration, and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage website content with relative ease. A robust WCMS provides the foundation for collaboration, offering users the ability to manage documents and output for multiple author editing and participation. Most systems use a content repository or a database to store page content, metadata, and other information assets that might be needed by the system.

Back To Basics

I have decided to explore this approach in detail whilst developing Back To Basics web site using Weebly and record my progress on this blog.

Using Weebly with multiple writers developers

I have used Weebly for several years to create web sites but always been the only developer. However now a small team of us are going to work together to create a site and we needed a method to share photos that we may use on this site.

I did this by creating a second Weebly site just to act as a photo library, with large, medium and small versions of the photos.  These photos can then be included in the main site by referencing their URL. This video shows how to do this with various browsers.

Although written specifically for the team the method can easily be adopted by other groups.

Nerd flash 

Did you notice seamless switch from Mac to Internet Explorer on XP and back again. I had all browsers set up one behind the other plus IE running in Virtual Box XP machine, QuickTime screencast recorded the XP guest machine just fine. 

Recorded on iMac 21.5", Mountain Lion.

Using Google Viewer to display PDF Files in your Web Site

I have been developing a site that contains several large PDF files. I wanted to have a quality version of the file for downloading and a lower quality for online viewing. The online version is a lower quality so that delay is minimised.
In doing this I discovered a few things.

• You can use Acrobat X to produce reduced size version that will start display the first page without waiting for the whole file to be made ready.
• All the browsers handle this file differently, and some not at all

I am using Weebly to build the site, and the Pro version has a feature to display PDF files using the viewer Scribd. THis is OK but appears to be Adobe Flash based, and it does not work on IOS (iPhone, iPad) platform. Therefore I looked for another approach. I noticed in testing the Google Chrome browser is that it uses its own Google Docs Viewer. This facility can be used in your own web sites.
This is the page being developed within Weebly Pro.

I want the Alternative Viewer called by the ONLINE QUICK button to use the Google viewer.

First you need to upload the PDF to Weebly. To do this I use the standard Weebly features to create a button and link this button to my PDF.

The file I uploaded is named in the File on Your Website. Copy this filename. Publish this site using standard Weebly methods and navigate to the page.

Clicking on the button will open PDF file as shown below (this may look different depending on browser). The online filename is given in the browser navigation box. Copy this name.

You now need to open another tab in your browser and go to docs.google.com/viewer where you paste the address of the PDF in the first box. Click on Generate Link

You should now see the following screen. There are options to embed the code into a HTML page, but the option I use is Paste this link into email or IM: Copy the link.

Return to Weebly development page edit the button so that it now links to the address we copied previously.

Again, using standard Weebly controls publish the site and visit the page. Now when you click on the QUICK ONLINE button you should see the following Google Viewer version of the PDF, which in my case opens in a new tab.

Real Example

If you want to see this in action then please visit The Orange Tree Press site. This company sells high quality greetings cards, mainly of a religious nature.

Google Sites Horizontal Menu means more space

Jury still out to whether to use Google Sites or Weebly for quick web development plus hosting.

Just discovered that I can use horizontal menu when making web pages with Google Sites. Also you can turn off sidebar which means a lot more space can be used by your content. See my Photography site where I have reworked it using the above.

However I do worry that Google Sites is getting harder to find on Google Pages. Currently the only way I can find it is to go to G-Drive and then it appears in the more.. Tab.

DIY Weebly Menu Bar

I am exploring Weebly in fine detail and one of the things I wanted to do was add a link button. Now I know that site navigation is well catered for by Weebly in its templates. However occassionaly I want to have a navigation link button embedded in the article or as an extra menu bar at the end of the page.

To see how I did this visit Web-Dev

 

 

Typing HTML on iPad

 
Unless you are using an iPad HTML development app such as WPD (Web Page Developer) which has enhanced keyboard typing HTML tags on iPad on screen keypad is a pane. Multiple keystrokes just to reveal the < symbol and then after entering say p for paragraph then repeat multiple key strokes to add >. All this to be repeated at the end of paragraph with additional / character!  I then stumbled across a tip for the new IOS 5 operating system that simply solves this and at no cost.

Keyboard Shortcuts  

 

 
1. On iPad go to Settings and select General
   
   
   
2. Select Keyboard and then Shortcuts and add your own  
   
 
3. Return to any program and then when you next type in the keywords you have the standard option of hitting space bar to expand text.
   

 
Note:  Make sure you use an abbreviation that typically will not be used, e.g. htp for <p> and not just p. 
 
To do similar on Mac then I recomend the free App Dash

Create Weebly Web Page by copying Blogger HTML

This morning I blogged about upgrading my MacBook Pro memory using Google Blogger, (see here) which by the way has had a facelift recently.

As an experiment I selected the HTML tab in Blogger, copied the HTML and passed it into a new page in the Computing section of this site, and hey presto one quick and easy, if not brilliantly, web page which you can see by clicking here. designed

Weebly Multi-column

I originally thought the multi-column feature in Weebly was very restricted until I realised that you can vary the size of the columns, and even more useful, you can embed multi column within previous multi-column. This short video illustrates this.

IPad Test

Test to see if I can write Add post from iPad using ordinary Safari. So far so good.

I see there is an option to Interpret Typed HTML so I have placed emphasis tags around this sentence.

In Preview the typed line breaks do not appear to function, all the lines are joined into one paragraph. To overcome this use HTML paragraph and / or break tags.

Image an links

Need to use URL option. Here is one of my Flickr photos.

I think I will still use my Blogger App when writing on iPad, as well as being easier you can also use it off line.

Web Dev Comparison Project - Kick Off

I  am developing three similar web pages  so that I can compare methods. They are built with

1. Weebly.Com online web development tool , RodericT Photography.
2. Google Sites, Photography Plus RT.
   
3. Native HTML5, CSS3 (and maybe javascript), see RoderickT - Photography.

The developed web pages must work on iPad and iPhone, so Adobe Flash solutions will not be included. 
For option 3 I am hoping for a clean low overhead solution that I fully understand and control. 
I will document findings here, and also on my Weebly.Com account Blog Page to compare blogs. 
At the moment I am consolidating the above three web pages so that they all have similar pages.

Content v Presentation

The message or the media.

To many riches

My problem is not the technology but the amount of technology. I like to understand how things work but there is always something new and attractive to tempt you onto new pasture.

So as my mum told me decades ages ago
It’s better to do a few things well rather than a lot of things badly. Therefore I am going to concentrate on the content and not chase every new approach. To this end I will use following tools which are both basic and powerful and standard within the IT community.

• HTML


• CSS


• JavaScript


• PDF

A good tool for writing articles quickly in simple HTML on your iPad is the MarkDown App. This has recently been updated and now has a useful keyboard extension to make typing quicker. The excellent Help feature gets you started quickly. The resulting text can then be used as-is or copied as HTML to be included in your other editors. Great to quickly create content which you can then manipulate later.

Poppy meets Barn Owl

Test to see if I can send photo to blog from Flickr when viewed on iPad.

Poppy meets Barn Owl, originally uploaded by rodtuk.

Bluefish HTML Editor Adding new snippet

Currently I am developing web pages using the free Bluefish Editor on my MacBook.

Just added my first code snippet, but it took me some time to overcome annoying niggle that every time it refused to paste code into snippet section but just pasted it into HTML page code.

SOLUTION. Do not use CMD-V but instead right-click and select paste. Wallah all OK.


- Posted using BlogPress from my iPad

MarkdownNote

MarkdownNote

For several weeks now I have been trying out various ways of writing web pages using my iPad. There are some good tools

• Gusto


• WPD (Web Page Development)




Both these have FTP feature so I can use this to combine with work on my PC and Laptop.




The one annoying thing was the cumbersome data entry of HTML tags. By chance while looking at Knowtilus browser I came across MarkdownNote. This is a small subset of HTML with unbuilt short cut for HTML, a markup for HTMarkupL called Markdown. You can create headings, text type, lists, images and links.







This iPad implementation of Daring Fireball currently costs $3.99 and is smart, so that when you hold iPad in landscape orientation, you have a preview of output.





Useful help, which you can display in-place of preview if you wish. Also very useful is that any HTML tag written in full is passed on to HTML unchanged. I did this toadd colour to final comment.







It is iPad only but for iPhone and iPod Touch there is another Markdown App called NOCS currently $0.99. Not in the same league, but still useful for these devices. Note you must have files saved with HTML extension for NOCS to offer conversion to HTML format.





Note another advantage of Markdown is that the output is well formatted even without converting to HTML.





Both Apps support Dropbox so whatever device I use I can synch either with FTP or Dropbox.





This blog was written using MarkdownNote.




- Posted using BlogPress from my iPad

CoffeeCup CSS Menu Designer - Problem Resolved

I have just spent 3 hours trying to understand why the menus built with the Menu Designer would not stand alone but always had the next object, usually a h2 or similar text floating next to it. I followed the advise in the PDF Help Tutorial, ie wrapping the HTML Menu statements with div tag and creating and applying a class with

.center { margin-left: auto; margin-right: auto}

What was needed was the following. I changed margin-left to 8am otherwise the menu was to close to the left.

.center { margin-left: 8am; margin-right: auto; display:inline-block; }

I had tried display: block; as I knew this caused the line break I wanted but it made no difference. I am not familiar with inline-block so I will have to research this, but anyway my menus work as I want now.

- Posted using BlogPress from my iPad

CoffeeCup Code Cleaner not working - resolved

The Tools - Code Cleaner stopped working. I gave up
and ran the Document - Validate HTML which
automatically ran the W3C Markup Validation Service. This had
several messages, one being about the use of lh list
header tag that I had tried when exploring the Insert -
List command. I removed this as it is not part of HTML5
standards and now the Tools - Code Cleaner is working
fine again.

Images not seen online but work on local disk - a solution

Having decided to use my trusted Total Commander to FTP my site I was developing with CoffeCup, see previous item, I was surprised to see photos not displayed after I had published to web. They worked OK when I was accessing pages on my local hard drive.

Agh, then I recalled similar problems in the past that had taken ages to resolve. I have my FTP options set to. Invert any upper case character in a file name to lower case when uploading. A quick edit changing all references to photos to lower case and upload new version and all OK again.


- Posted using BlogPress from my iPad

CoffeeCup only publishes to the root - correction no it doesn't

Corrected post

The reason why I could not upload my website to my target folder was because I was using File - Upload File to Server when I should have been using My Websites - Upload Selected Files or My Websites - Upload Entire Website Project which send them to the folder you have defined as the root in the My Websites - Website Project Settings.

Original post

I use the excellent free Zymic hosting for testing my web developments. I need to have many folders to keep the various projects separate.

I have discovered that CoffeeCup HTML Editor insists on publishing index.html to the root file of my service. I tried for over an hour to get it to publish to my target folder to no avail and on googling discovered that it only puts this file in the root.

So I now publish to my local disk, well I di this anyway, and then use my trusty Total Commander from Ghisler to do FTP work.

Another inelegant solution but at least Total Commander is very fast.


- Posted using BlogPress from my iPad