Over time I will update this post and post new posts about the build and the theory behind this style of 3D printer.
]]>All content loads and displays without any Javascript styling. I find Javascript is a hurdle for the visually impaired, who may use text reading software or text browsers. The internet has become a visuale experience, but not everybody can take pary in that experience and developers must understand the need to remove barriers to their content.
Please have a look around. Any feedback about the site’s accessibility would be welcome. Updates will be made as required. Thank you.
]]>I’ve listed my steps used for Jekyll to impliment image slide shows.
1 Create an include html file (slideShow.html) to process your list of image urls for the image slide show. This file can be re-used on various pages or posts with different images. This file is saved in the _includes folder.
<div id=”gallery”>{% for image in include.images %}
<img class=”mySlides” src=”{{ image }}”>{% endfor %}
<button onclick=”plusDivs(-1)”>❮</button>
<button onclick=”plusDivs(1)”>❯</button>
</div>
<script>
var slideIndex = 1;showDivs(slideIndex);
function plusDivs(n) {showDivs(slideIndex += n);}
function showDivs(n) {
var i;
var x = document.getElementsByClassName(“mySlides”);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {x[i].style.display = “none”;}
x[slideIndex-1].style.display = “block”;
}
</script>
2 Add the list of image urls for your image slide show to the YAML front end.
slideShow:
- image1Url
- image2Url
- Upto how many you want to display.
3 Place a liquid include to the image slide show file in your post or page.
{% include slideShow.html images=page.slideShow %}
4 Add your styling using css or your website theme classes.
You now have your image slide show.
Image slide show
]]>W3C describes SVG or Scalable Vector Graphics on their web as
“… a Web graphics language. SVG defines markup and APIs for creating static or dynamic images, capable of interactivity and animation, including various graphical effects. It can be styled with CSS, and combined with HTML.” W3C
<svg viewBox=”0 0 200 200”></svg>
The viewBox attribute specifyies a given set of graphics stretch to fit a particular container element.
<circle cx=”100” cy=”100” r=”100” stroke=”red” stroke-width=”1” fill=”red” />
<circle cx=”100” cy=”100” r=”60” stroke=”red” stroke-width=”1” fill=”yellow” />
cx and cy are the starting points and r is the radius of the circle. fill defines the colour of the circle. Each item sits on top on the previous.
<text x=”60” y=”100” fill=”black”>I love SVG!</text>
And perhaps a little text to finnish our graphic. x and y are the starting point with fill being the colour of the text.
style=”width:150px;”
<button onclick=”circle1.style.fill=’yellow’;”>Click to change to yellow</button>
and add an id attribute to the element to be changed.
<circle id=”cirle1” cx=”100” cy=”100” r=”60” stroke=”red” stroke-width=”1” fill=”yellow” />
For more information and examples of using SVG, checkout the w3schools website . For detailed informaion the W3C website will fill in the spaces.
]]>The guggesites client app uses the Google Document class to collect content pass it through my paser to generate Github Flavoured Markdown . The Google Drive API is used to collect image urls for the Markdown parser to publish documents on the Github pages server. This page is to demonstrate the current capabilities of the script for converting Google documents to Markdown. {: style=”font-size:14px;margin-bottom:8px;”}
You can checkout the Google document used to create this post and the Github Markdown file . The Google document will be updated as features are added or improved.
This is an example of coloured text and sized-text within a paragraph. Background colour is supported.
How about using a different font family in a paragraph. In this paragraph we are using Arial Black.
This paragraph has links and image. These are links to guggesites and google. Sometimes text needs to be in bold and more bold. With a bit of .
The parser supports Google Document font selection. The font family styling is added to the style tag of the paragraph. Web safe fonts can be easily used other fonts will need to be linked to in the html header. However not all browsers have the same level of support for web safe fonts. Arial is the default font and does trigger font family selection. Adding non web safe fonts does impact page load speeds.
This is Garmond.
This is Time New Roman.
This is Comic Sans.
This is Arial Black.
This is Droid Serif.
This is Syncopate. Not web safe but it’s linked to in the header.
Text colouring and highlighting is support.
This text is red.
This text is blue.
This text is highlighted yellow.
This text is coloured blue with grey highlight.
This text is highlighted orange.
Headings, images and paragraphs can be aligned on the page. This paragraph is left aligned.
Paragraphs can be right aligned.
Paragraphs can justified. Another Paragraphs can justified. More Paragraphs can justified. All Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified.
Images can be aligned as well.
This inline image is at the beginning of the paragraph.
This a simple table using css for styling.
Header | Header | Header |
New col | one | two |
six | Another row | |
bold text in a table | Images and links can be used within a table. | This should be a link within a table. |
For a new business, as part of your branding you need to give attention to your online presence. This does not mean going out and setting up a website, although that will be a part of it. Your online presence is defined by your strategy of finding new customers and how you will retain existing ones. It may be a good idea to draw a diagram of how you see it working.
Its important for you to have your own identity / branding for people to remember and link you to the services/ products that you supply. Your own domain allows you to own that name and be able to adapt over time as you grow or protect you from hosting companies closing down or not providing the services you require. With your own domain you will be able control how your online presence grows.
Having your own address other than gmail or yahoo is very important in supporting the brand and creating trust with prospective clients. You don’t need an email server or anything fancy, just redirect the email address of your domain to your own personal account. You should be able to set-up in your personal account to send emails using your own domain address.
You have your domain, you have set-up the email and now create the place where people will go to find you. Even if you are planning a bells and whistle website later, on day one of purchasing your domain create somewhere people can find you. This will be a place to announce the coming site or engage with customers or somewhere people will go when you share your domain name. Remember its your domain and you can send them to where ever you want. Day one - create a page on Facebook for your business and forward your domain to that page. If you have one already great, now you just give people your domain name and that have found you. Spend time to create content for your page, add notes, events. Make it engaging.
If you have set-up a permanent forward for your domain, search engines like Google will find your page and index the content.
Don’t forget to include your domain address and email address in all your marketing (paper and electronic). Update any social media links and place them in the footer of your emails with a tagline.
]]>Back in the 80s, I was involved in setting up an experiment for a national newspaper to test out the viability and use of computers for the creating and editing of content for their weekend magazine supplement. At the time desktop publishing for newsprint was unheard of and was still the domain of designers. We gave computers to the journalists to simply type up their copy, these machine were simply glorified typewriters with green screens, a floppy disk drive and a simple text interface, no Windows at this time. When the journalist had completed their copy, the disk would be sent to the designer to layout the pages of the paper using Apple Macs with big A3 monochrome monitors. Once the pages were given the go ahead by the editors, the pages would be printed and sent for the print run of the magazine. The process had to be designed within the abilities of all involved, things had to be familiar. Journalist - type; editors - edit; and printers - print. Familiar is good, even new things can feel familiar. In a busy newsroom you cannot have people fumbling around trying to work things out..
Now I use Google Documents for most of my writing and creating spreadsheets. Google documents and ODT format files has become a trusted friend and familiar. By syncing the documents with my local computers, this has allowed me to use them with other applications. For most of my work I am Google Documents based, so when it came to the website the questions was “How could I use it?” or even “‘Should I use it?”
The obvious question I should of been asking is, “Why am I not using Google Documents to create content for my site?” and “Why is no one else using it?” It seems weird, we use familiar applications to create documents, spreadsheets and images, but for our website we are told to use something else. It may not be Google Documents, but MS Word, Openoffice or Libreoffice. We use these familiar applications for most of our working day and perhaps even type up the drafts for our websites, to only then copy and pasted the content into our website’s admin page. It seems to me why others are not using familiar is because they have not thought of it or the programmers just don’t think that way.
From my experience of working with Apple Macs, what stood out was how each new piece of software you add, allows you to use your previous knowledge of already installed software. This seems to have been lost when it comes to applications and the user experience of website applications. So experience tells me, use what’s familiar and so I asked “could I use Google Documents?”.
Yes, but how? The guggesites way.
]]>How you could use voice type to generate your own posts or articles. The hardest thing to get use to is actually speaking out loud and trying to get your thoughts together to create the post. However over time this will become easier and you will become quicker at creating your documents.
A word of warning I don’t recommend using Google voice type creating documents when driving your car or operating machinery. Where I am unable to use Voice type, I just record my voice and play it back into my document using Voice type later. It takes a bit more editing but this way you can concentrate on what you are doing and not on editing.
To begin with I set out a list of headings as a framework to help me plan my post and to prompt me when speaking. For example :-
Introduction
outline
main paragraph
call To Action
Offer
How to contact
summary
Under each heading I add my content and build my document. When I have completed generating my content I edit and check the layout on my Chromebook before posting the document to my site. A quick post could be easily edited on an Android phone and posted to the website, but adding images and diagrams are often easier on my Chromebook.
Punctuation can be easily added to your text as you speak, but it does take a bit of getting used to.
Period (.)
comma (,)
question mark (?)exclamation or exclamation point (!) Line spacing: Enter or new line, new paragraph
Using Google voice typing within Google document is very easy, all you have to do is go to the tools menu and select Voice typing. Then move your cursor to where you want to place your text, click the microphone icon and start speaking.
To use voice typing on a Google phone with Google Documents I had to install the Google keyboard app and set up the keyboard input settings. Now when I use Google Documents the keyboard has a little microphone, which when selected allows me to use Google Type Voice to create my document. Using voice type is very easy compared to trying to use the small little keyboard on my Android phone.
]]>