Landscape vs Portrait

Back on the perennial problem. Thought I had the solution. Re-did the Portrait background image. Much happier with the latest version. It keeps the whole of the abacus in the background, much more balanced. However, for some reason, the information that is supposed to overlay on top of the image is now appearing below the image. need to resolve this, but the problem is, everything looks correctly configured.

Interesting Landscape/Portrait dilemma which I have now resolved. The problem I was encountering was getting both style and Javascript parameters set-up correctly. I had been using the @media css mechanism for selecting the styles, and the ‘window.matchMedia’ events to set the Javascript/non-style attributes. Problem was I could not guarantee that these would in sync. Indeed they generally were not. I have now reverted to a single mechanism – that of ‘window.matchMedia’ (It has to be that route, because from JavaScript you can set styles. You cannot set non-style elements/attributes from css.)

The effect is now almost perfect. Image and left and right text margins vary depending on orientation. The only slight issue revolves around text height on the iPad / iPhone in landscape mode. Text is relatively too large and text writes off the bottom of the image. The effect is fine on PC (at least with reasonable landscape ratios). Somehow I need to adjust text point size for screen width. I need 128 chars in 60% of screen width in Landscape mode.

However what all the above goes to prove is that I cannot use this style of screen for general web pages. For fixed/known content pages, it is possible to manually construct the page. However it is completely disregarding the flow nature of the content. To retain that, I have to go down a more traditional route page construct. Which means to make them interesting I need to include graphical content, and a bit of ‘style’

On Width and Text size. There are, in addition to the traditional size measurements of:

  • px -Pixels
  • pt – Points
  • in – inches
  • cm – centimeters
  • mm – millimetres
  • pc – picas
  • em – One current font size
  • ex – width of lower case ‘x’
  • % – % of em

We now also have:

  • vw – Viewport width
  • vh – Viewport height
  • vmin – Smaller of Viewport width and height
  • vmax – Larger of Viewport width and height

The re-factoring that I undertook as part of rationalising the javascript and styles meant that I could easily move the Quintic font styles into Landscape and Portrait specific css style sheets. Then it was only a case of determining the best ‘vh’ settings for the orientations.

Pleased to say  I now have exactly what I want, on PC, iPad, & iPhone. OK the text is small on the iPhone, but then it always is.

 

About Page

Tried a few variations on the About page, just to see what they looked like.

  1. Replaced the transparent image on the About page, with the non-transparent version (on the home page) . Set the transparency of the <nav> <aside> to clear and <div class=content>  to various values. Hope was that it might bring out the background image more at the sides, yet still leave it faint behind the text and the text still legible. Not a great success.
  2. Similar to above but set the transparency of <nav> <aside> <div class=content>  to various equal values, but the effect is not the same as having a faded background, on which you layer semi-transparent content.

End result – reverted back to original idea.

Generated much better Portrait images.

Web Page Dynamics. Problems and Solutions

Case 1

So I have a problem. The Web Site look pretty good as long as the visible area is approximately the same size as the background image. However re-size the viewable area and we get a couple of problems:

  1. The text (certainly of the About page) extends below the image and encroaches on the footer. (Not sure why the footer does not move down).
  2. Even if the footer did move down, we would be a situation of a having a ‘GAP’ between the background image and the footer.

Need to think about this one.

Oh and have decided to rename Blogs – Blog. It seems to be an agreed ‘standard’ and add it to the menu bar at the top of the pages. The easiest way to achieve this was to add a soft link (ln -s) from blogs to blog, and then under Settings>General change both urls to point to blog. So far this seems to be working a treat.

Solutions:

So the pages on the site are a known ‘Fixed’ size (Home, About, Contact) can retain a fixed size screen structure, with a single background image.

For dynamic pages (Blog and all topic pages) I will have to forego the background image, and will need to come up with a theme/scheme instead.

Replaced the images on the About with half size ones – looks much better.

Narrowed the central area to 60%, and increased the Nav and Aside areas to 20% each. has improved the look, and means that when reading (at least in landscape) your eyes are not having to scan.

 

WordPress – Blog Posts not found

Case I

So this was, on the surface, a real disaster. Went to look at my Blogs and decide what to add today – and the response from WordPress was –  “Oops! That page can’t be found”.

Now given that I am self-hosting and not that familiar with WordPress and its configuration that was a bit of a worry. The good news was that all the blogs were listed on the rhs, and all the WordPress links were there and active. I could log-in to the site and once logged in the posts were all there and intact. Looked on the Server and everything seemed to be in the correct location. So it looked like a configuration issue.

Now Google is usually your friend, the problem was when I Googled this issue all the links were about people using the WordPress service direct, or using it through their respective ISPs.  Eventually though did manage to get an idea that it could be caused by the index.php file no longer being found.

Well that file was there and in the correct location. Then I remembered that yesterday I was looking at the Settings>General and changed the Web Site url home page from quintic.co.uk/blogs to just quintic.co.uk. That was the problem. As far as I can tell I did follow the instructions correctly, and whilst the main site did display correctly, and I could log-in and execute all admin functions, the Blog posts would not display. Still don’t know what the issue was, but I have reset the url and all is fine. That will have to do for now.

Update: All is not fine. The blog is listing as one continuous blog. If I click on the individual links though, it comes up page not found. Strange. When editing the blogs presented individually. When viewing though that does not seem to be the case.

Case II

A second case of No Blogs –  Only this one was worse. No WordPress access at all!. WordPress could not access the database.The initial issue was the blog link on the Header bar stopped working. The error being reported was a “500 – Server Error”. Not a lot of help. Luckily, in the browser history, there was a link to wp-admin, and this reported WordPress could not access the database. Now this was worrying because:

  1. I had just uploaded a new version of the web site from the Windows env.
  2. I had added my own tables to the MySQL database
  3. I had updated the user profiles to match those of the Windows env.

and I had no idea which of the above had caused the problem – if any.

However ‘Panic Not’ as  Frankie Howerd would have said. Google is your friend. It pointed me to the wp-config.php file, which details the User and Password used by WordPress. That was when I discovered the problem. We have two sets of Users.

  1. MySQL Users
  2. WordPress Users

To keep things simple (and indeed I thought required) I made the user names the same. However the passwords were subtly different. I had manually changed the passwords on the MySQL accounts to match those of the WordPress accounts, but that change was not reflected in the wp-config.php file. Once reverted, and my own php files updated to reflect the correct passwords all was OK.

Layout and Template

So a bit more reading, a bit more understanding and I think I am finally there with what I want. In my previous post I mentioned what it was I wanted from my Web Site.. Problem I was getting was positioning, flow and general layout.  What I have arrived at that works is the following:

  1. <header>, <div id=”mainBody”>,<footer> as the first order layout. Nothing special about that, and using default position  and display options these elements will line up in row order.
  2. Within <div id=”mainBody”> I added an <img> element. This will be the background. The src attribute is set by JavaScript depending on orientation / aspect ration of the window. Within the style sheet I set the width to 100%, and zindex to -10 to ensure it will be behind any other  elements that are included in <div id=”mainBody”>.
  3. All other elements that are added to the <div id=”mainBody”> have position:absolute and display:inline-block this allows me to position them in where I want, and that they will flow in row order.
  4. For the template page for the main subject content I have, from left to right:
    1. <nav> with width=15% height=100% – Selection of items on the topic
    2. <div> with width=70% height=100% left=15% – Main content
    3. <aside> with width=15% height=100% left=85% – Any aside notes.
  5. The height=100% ensures that the elements fill the full area from <header> to <footer>
  6. The background for these three content elements will be white, slightly transparent, and in order for them to appear separate I will have to play around with width percentages, and borders. Lets see what makes for a good visual impact.

Next step is PHP and how to populate a template page from information from a d/b. Because what I am not going to do is produce a separate static page per subject per topic. Rather there will be a template page, as described above populated via PHP.

A bit premature about the ‘Next step is PHP’ . As it transpires getting the visuals and layout to work well with Landscape and Portrait took a lot of trial and error. A couple of pointers:

  1. Where the background image dictates the ‘active’ size of the page, we need:
    1. header
    2. image
    3. footer
  2. With any text needs to position:absolute above the image
  3. We don’t need the <nav> and <aside> elements on these pages. What we want is the text centred, and spaced inset as needed.
  4. On non-background image pages we need <nav> and <aside>.
  5. <nav> is position:fixed
  6. Both <div class=content> and <aside> need to be moved left to avoid <nav> (<nav> as fixed does not enter into the document flow)
  7. <aside> somehow needs to be aligned with the main text to which it relates (don’t know how to do that yet)
  8. The colours and visuals on these pages needs some thought.

Just about there with a template. Couple of issues:

  1. With <nav> fixed, we have to move both <mainContent> and <aside> left the same width as <nav>. In itself, not an issue, except the maths didn’t quite work, and if <mainContent> and <aside> attempted to occupy all the remaining width (ie. all widths totalled 100%), then a slight resize could trigger a complete loss of the <aside> element. Solution was to reduce total width to be just 99%.
  2. By default inline-block <div> elements align at the baseline. Reset vertical-align:top. Solved this.
  3. I also need to create an element that has an Image with an overlaid Title, as that combination looks like playing a significant part in my content pages.

I think the first main content page though is going to be a ToDo page.

Astonished that after so long there is still no ‘HTML Include’ facility as standard. There is an RFC in with W3C, and it probably will be accepted, but then its still a wait until the Browsers support it. Difficult to believe. I was working round that problem 20 years ago. Look on the web and there are a huge number of ‘Work around solutions’

Today I install WAMPServer for managing the installation. Two problems:

  1. WAMPManager will not start-up. Reason: Unknown. The app is there in task manager, but nothing is coming up. Tried starting as Admin, no difference. Then uninstalled and re-installed as Admin. No difference. Am now searching the logs.
  2. The WAMP Server starts up, so Apache is installed and running. Cannot find the php config files. Two reasons for this. The first is that I need to install as Admin. The second is that I need to ensure the hosts file under <system32>/devices is open for reading. Executed these two, and everything now looks good.
  3. So problem with WAMPManager resolved. What I had not realized was that WAMPManager starts up as a Tool Tray ICON/App. Once I realized that and started it under Admin everything was fine. I than went on to implement/test an env whereby I can inject HTML into the output supplied by php. I now have an env whereby I can request a page, and the <head>, <header>, and <footer> elements are supplied from snippets. Brilliant

Web Page Templates, Dynamics and php

The first problem to try to solve was one I had encountered several years earlier – how to inject html snippets into an html page? I was expecting that by now HTML would have had this feature. No! There are a number of solutions on the internet using JavaScript, but all have their own quirks and issues. I dropped back to using server-side construction via php and MySQL. Solution I devised was:

  1. A common php page that took a single parameter.
  2. Parameter was an index into a table in d/b. Table had an text column containing html
  3. Within the html we could include filenames, encased in escape chars, to indicate html to inject. This mechanism was recursive – ie the injected files could also include escaped filenames to inject.
  4. Variables in the html, encased in different escape chars to the filenames, defined names pointing to a (page.name):value pair table in the d/b from which the values were retrieved and substituted. These were also recursive in implementation. ie The inject text could also include variable name (and file names) to substitute.

The whole provides, what at the moment feels like a light-weight, but workable mechanism for allowing me to have multiple pages of similar structure, but differing content.

Little Changes, Big Issues:

So this entry is about keeping changes isolated. The problem  I am encountering is, again, one I had back in the 1990’s, where changes are not isolated. I made a change to the style of a class for the template page, and it worked well. The problem of course is that the class is used on none templates pages, so it’s important during web site development that you managed / control changes to CSS styles. One way would be to differentiate between Released CSS files and Development / Release Candidate files. Changes to Released files would trigger a full site test. The Released files can, and should, be consolidated, to eliminate file bloat.

Absolute vs Relative – more on this topic.

possibly, absolute dictates page width / height

 

 

Background Image and Landscape / Portrait

For the web-site I had a few concepts that I wanted to put into place.

  1. <header> and <footer> in a gradient colour. Opposite direction of gradient for <header> to <footer>.
  2. Background Image filling rest of page. Image would be opaque where necessary.
  3. Image would switch from Landscape to Portrait as aspect ratio of window changed. (i.e. Mobile device re-oriented, or Browser window on PC re-sized.)
  4. The Background image would dictate the size of the content area. All content would either fit inside this area, or would be scrolled within its containing element, which would fit within the area.

Issues implementing the above.

  1. As I did not want the <header> and <footer> to intrude on the background image I could not set the <body> background attribute to the image. Initially I tried using a <div id=”MainContent”..> and setting its background to the image required. Except that didn’t work because the background attribute does not contribute to the size of an element, hence the <div id=”MainContent”..> element was invisible unless given content, and even then its size was never going to be governed by the background image. Instead I included a specific <img> element and used that as the background. However that in itself brings up two issues
    1. The src attribute on <img> is not a style attribute and so cannot be set using CSS via the @media pseudo command.
    2. To use an <img> it as a ‘backdrop’ meant setting position:absolute  to remove it from the document flow and allowing all the other content to sit on top.
  2. As we were unable to use the @media pseudo command to switch images between landscape and portrait I had to write a bit of JavaScript to undertake the same task. This was OK, as until I had read about @media, that is what I was expecting to have to do.

HTML5, CSS3 and JavaScript

Just a few notes on the above.

HTML5, CSS3 and JavaScript are not actually optional technologies. If you do dive into HTML5 then you need CSS3 and JavaScript. You can use plain old HTML without CSS and JavaScript, and everything will work fine. But if you do delve into HTML5 then you will need CSS3 and JavaScript.

 

Best description I have read about these three technologies is:

  • HTML5 – Defines the content
  • CCS3 – Defines the appearance
  • JavaScript – Defines the behaviour

DIV & Positioning

I did have a problem positioning and sizing <div> elements. When I was last into HTML tables and tables within tables were used to get the layout you needed. Today, quite rightly, tables are used for what they where intended, and layout is all about <div>. So what are the positioning and sizing problems?

  1. <div> is a block element. The width of a block level element, unless set explicitly, is 100% of its containing element. Its height, again unless defined explicitly, is defined by its content. No content -> no height -> not visible. So if you are wondering why you have set the background of your <div> element (to say an <img>) and cannot see it, it is possibly because the <div> has no content and hence no height. Judging by the Web, this seems to be a common mistake.
  2. Second is the position attribute, or rather the relative value of position. With position:relative the <div> element (indeed any element) is still participating in the document flow. So regardless of where it is moved to (i.e. displayed), it still leaves the space where it was in flow. With position:absolute that is not the case. The element is removed from the document flow. That change in behaviour between position:relative and position:absolute does make a huge difference as to when you use one over the other. The choice of which to use is not just about the reason you want an element located where you do, but also how you want it to behave.

Loading HTML snippets

One omission in HTML that I am amazed has not yet made it into the standard, is the ability to inject HTML snippets into a document. You can inject javascript from files. You can inject CascadingStyleSheets (and in both of these files you can inject other files to whatever depth suits).  However you cannot inject HTML into an HTML document. There are several web sites out there detailing techniques for using javascript to achieve (possibly) what you want, but for there not to be a mechanism to inject HTML yet seems inconceivable.

I remember when I was developing web pages back in the late 1990’s one issue was that standard Headers and Footers had to be either manually copied to every page (and updated on every page!), or else loaded dynamically using server-side programming. Guess what? We are still in that situation today. I notice that an RFC for this functionality has been submitted to the W3C. I haven’t read the RFC, so cannot comment on its suitability, but I do hope that, if not this proposal, then something that supplies this functionality is approved soon  – and then implemented in the Browsers in short order.