tag:blogger.com,1999:blog-43412171380178315722023-11-15T22:40:43.768-08:00Web DevelopmentA renewed interest into developing web pages with basic standards such as (X)HTML, CSS, javascript and PHP. Also using free - or at least very cheap - tools.
Main reason being to maintain control and understanding of web pages, plus save money.
Also adding use of Google Sites and Weebly.Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.comBlogger42125tag:blogger.com,1999:blog-4341217138017831572.post-12024143272483902442020-07-01T14:43:00.001-07:002020-07-01T14:43:32.964-07:00<h1>Editing Google New Sites web pages on iPad</h1><p style="margin: 0px;">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.</p><p style="margin: 0px;"><br /></p><p style="margin: 0px;">There are a couple of strange behaviour with this setup though. </p><ul><li>If you use Chrome browser on this iPad it does not let me edit Google Sites. <br /><br />However Firefox on iPad works same as Safari.<br /><br /> 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 <i>View desktop site</i>. A warning from Google pops up saying this version of browser no longer supported but so far I can edit using it. <br /><br />Incidentally you are suppose to be able to do this on Chrome but the <i>View desktop site</i> message is now missing<br /></li><li>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.<br /></li><li>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.<br /></li><li>The reverse is true if I try to resize a block, the mouse fails but the finger works.<br /><br />I am currently using a normal wireless mouse but have a Magic Mouse 2 being delivered tomorrow so will see if this works differently.</li></ul><h3>Note:</h3><div><p style="margin: 0px;">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 <b><a href="http://www.photo-notes.co.uk/">www.photo-notes.co.uk</a> </b>site I am developing.</p></div><div><br /></div><div><p></p></div>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-23559102754150745702013-09-14T02:01:00.000-07:002013-10-02T02:53:28.962-07:00Wordpress - a quick lookIt 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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
So for the near future I will continue to use mainly HTML5 etc and Weebly.<br />
<br />
<h3>
Update</h3>
<div>
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. </div>
<div>
<br /></div>
<div>
So I have archived site. </div>
Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com1tag:blogger.com,1999:blog-4341217138017831572.post-65543702277891786172013-04-12T14:36:00.001-07:002013-04-12T14:36:55.960-07:00Hybrid Web Development<h1>
Hybrid Web Development</h1>
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.<br />
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). <br />
<h2>
Hybrid approach</h2>
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.<br />
<h3>
CSS & JavaScript</h3>
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. <br />
<h2>
Web Content Management System (WCMS)</h2>
I have lifted this definition from <a href="http://en.wikipedia.org/wiki/Web_content_management_system">Wikipedia</a>.<br />
<div style="font-family: arial;">
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.
</div>
<br />
<h1>
Back To Basics</h1>
I have decided to explore this approach in detail whilst developing <a href="http://rt123.weebly.com/index.html">Back To Basics</a> web site using <a href="http://www.weebly.com/">Weebly</a> and record my progress on this blog.Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com1tag:blogger.com,1999:blog-4341217138017831572.post-17592839013006250622013-01-24T01:53:00.000-08:002013-01-24T01:54:59.769-08:00Using Weebly with multiple writers developersI 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.<br />
<br />
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.<br />
<br />
Although written specifically for the team the method can easily be adopted by other groups.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/EdHTwx-0UOQ?feature=player_embedded' frameborder='0'></iframe></div>
<br />
<br />
<i><b>Nerd flash</b> </i><br />
<i><br /></i>
<i>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. </i><br />
<i><br /></i>
<i>Recorded on iMac 21.5", Mountain Lion.</i>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com1tag:blogger.com,1999:blog-4341217138017831572.post-9203899237432604372012-12-05T23:52:00.001-08:002012-12-05T23:52:44.161-08:00Using Google Viewer to display PDF Files in your Web Site<h1>
Using Google Viewer to display PDF Files in your Web Site</h1>
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.
<br />
In doing this I discovered a few things.
<br />
<ul>
<li>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. </li>
<li>All the browsers handle this file differently, and some not at all</li>
</ul>
<br />
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 <i>Google Chrome</i> browser is that it uses its own <i>Google Docs Viewer</i>. This facility can be used in your own web sites.
<br />
This is the page being developed within Weebly Pro.
<br />
<div style="border-style: solid; float: left; margin: 2em;">
<a href="http://www.flickr.com/photos/roderickt-uk/8246099585/" title="google-viewer-2012-10-otp-dev by rodtuk, on Flickr"><img alt="google-viewer-2012-10-otp-dev" height="298" src="http://farm9.staticflickr.com/8483/8246099585_e5215b75c2.jpg" width="500" /></a>
</div>
<br />
<div style="clear: both; height: 1px; margin: 0 0 -1px; width: 100%;">
<!--re-establish web items to the left-->
</div>
I want the <b>Alternative Viewer</b> called by the <b>ONLINE QUICK</b> button
to use the Google viewer. <br />
<br />
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.<br />
<br />
<br />
<div style="border-style: solid; float: left; margin: 2em;">
<a href="http://www.flickr.com/photos/roderickt-uk/8247166716/" title="google-viewer-2012-10-button-link by rodtuk, on Flickr"><img alt="google-viewer-2012-10-button-link" height="139" src="http://farm9.staticflickr.com/8479/8247166716_996cc6e5c7_n.jpg" width="320" /></a>
</div>
<br />
<div style="clear: both; height: 1px; margin: 0 0 -1px; width: 100%;">
<!--re-establish web items to the left-->
</div>
The file I uploaded is named in the <b>File on Your Website</b>. Copy this filename. Publish this site using standard Weebly methods and navigate to the page.
<br />
<div style="border-style: solid; float: left; margin: 2em;">
<a href="http://www.flickr.com/photos/roderickt-uk/8247166782/" title="google-viewer-2012-10-link-box by rodtuk, on Flickr"><img alt="google-viewer-2012-10-link-box" height="428" src="http://farm9.staticflickr.com/8058/8247166782_1654a9cedb.jpg" width="500" /></a>
</div>
<br />
<div style="clear: both; height: 1px; margin: 0 0 -1px; width: 100%;">
<!--re-establish web items to the left-->
</div>
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.<br />
<br />
<div style="margin-left: 2em;">
<a href="http://www.flickr.com/photos/roderickt-uk/8246099829/" title="google-viewer-2012-10-pdf-standard by rodtuk, on Flickr"><img alt="google-viewer-2012-10-pdf-standard" height="500" src="http://farm9.staticflickr.com/8065/8246099829_e852b4b3a3.jpg" width="491" /></a>
</div>
<br />
<div style="clear: both; height: 1px; margin: 0 0 -1px; width: 100%;">
<!--re-establish web items to the left-->
</div>
You now need to open another tab in your browser and go to <i>docs.google.com/viewer</i> where you paste the address of the PDF in the first box. Click on <i>Generate Link</i>
<br />
<div style="border-style: solid; float: left; margin: 2em;">
<a href="http://www.flickr.com/photos/roderickt-uk/8246100011/" title="google-viewer-satup by rodtuk, on Flickr"><img alt="google-viewer-satup" height="296" src="http://farm9.staticflickr.com/8060/8246100011_fceab543fb.jpg" width="500" /></a>
</div>
<br />
<div style="clear: both; height: 1px; margin: 0 0 -1px; width: 100%;">
<!--re-establish web items to the left-->
</div>
You should now see the following screen. There are options to embed the code into a HTML page, but the option I use is <i>Paste this link into email or IM:</i> Copy the link.
<br />
<div style="border-style: solid; float: left; margin: 2em;">
<a href="http://www.flickr.com/photos/roderickt-uk/8246099353/" title="google-viewer-2012-10-setup by rodtuk, on Flickr"><img alt="google-viewer-2012-10-setup" height="441" src="http://farm9.staticflickr.com/8201/8246099353_f672ef6d23.jpg" width="500" /></a>
</div>
<br />
<div style="clear: both; height: 1px; margin: 0 0 -1px; width: 100%;">
<!--re-establish web items to the left-->
</div>
Return to Weebly development page edit the button so that it now links to the address we copied previously.
<br />
<div style="border-style: solid; float: left; margin: 2em;">
<a href="http://www.flickr.com/photos/roderickt-uk/8247166782/" title="google-viewer-2012-10-link-box by rodtuk, on Flickr"><img alt="google-viewer-2012-10-link-box" height="428" src="http://farm9.staticflickr.com/8058/8247166782_1654a9cedb.jpg" width="500" /></a>
</div>
<br />
<div style="clear: both; height: 1px; margin: 0 0 -1px; width: 100%;">
<!--re-establish web items to the left-->
</div>
Again, using standard Weebly controls publish the site and visit the page. Now when you click on the <b>QUICK ONLINE</b> button you should see the following <i>Google Viewer</i> version of the PDF, which in my case opens in a new tab.
<br />
<div style="border-style: solid; float: left; margin: 2em;">
<a href="http://www.flickr.com/photos/roderickt-uk/8246099941/" title="google-viewer-2012-10-pdf-google by rodtuk, on Flickr"><img alt="google-viewer-2012-10-pdf-google" height="400" src="http://farm9.staticflickr.com/8486/8246099941_af5e5870ee_z.jpg" width="640" /></a>
</div>
<br />
<h2>
Real Example</h2>
If you want to see this in action then please visit <a href="http://www.theorangetreepress.com/">The Orange Tree Press</a>
site. This company sells high quality greetings cards, mainly of a religious nature.
Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com2tag:blogger.com,1999:blog-4341217138017831572.post-6681911570298931702012-09-05T07:19:00.000-07:002012-09-05T07:20:33.459-07:00Google Sites Horizontal Menu means more space <p class='bloggerplus_text_section' align='left' style='clear:both;'>Jury still out to whether to use Google Sites or Weebly for quick web development plus hosting. </p><p class='bloggerplus_text_section' align='left' style='clear:both;'>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 <a href='http://goo.gl/Ue0bP' target='_self'>Photography site</a> where I have reworked it using the above.<br><br>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 <i>more</i>.. Tab.</p><p class='bloggerplus_image_section'><div class='bloggerplus_image_section' align='right' style='clear:both;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3EcJjuBR-K76g0kwiKyJ7kw0RDOXd39Qcu4SEFDveydNPBv-LKkWCFKD0ZdmQR-h_5suCCgLZOZDl6reP8M_05Qt22jSXZ4FwqXC72FbXd02qJLKVxP5BGSb1Ch0oHyZnRFzrKB06K9M//'></div></p>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-75477928517657817262012-04-17T11:07:00.001-07:002012-04-17T11:16:33.620-07:00DIY Weebly Menu Bar<p>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.<br></p><p>To see how I did this visit <a href="http://dev-web.weebly.com/photos.html">Web-Dev</a></p><p> </p><p> </p>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com1tag:blogger.com,1999:blog-4341217138017831572.post-89742740081418220702011-11-07T11:38:00.001-08:002011-11-07T11:38:21.673-08:00Typing HTML on iPad<h1>
Typing HTML on iPad</h1>
<br />
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.<br />
<h2>
Keyboard Shortcuts </h2>
<br />
<ol>
<li>On iPad go to Settings and select General
<div float="left" style="margin: 10px 20px;">
<a href="https://picasaweb.google.com/lh/photo/-hQDWIHZ2IHeB88_pd8Wcw?feat=embedwebsite"><img height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-qx6NpBY0kYNW6-FbO-kXbWNdrIMxHp2Tj4Og8gHT_JEIdZBI0IkdXrh_rLawKMwkR2JY5-939sHvRP56RF7IxtFLShwIqxpbkHsJ_XheNMR0QECzUfFkuIfLAMgTjwrjG6LHm5mGLpo/s640/IMAGE_399AA2D1-941E-47F1-8BFF-BE44530479CA.PNG" width="640" /></a>
</div>
<br />
</li>
<li>Select Keyboard and then Shortcuts and add your own
<div float="left" style="margin: 10px 20px;">
<a href="https://picasaweb.google.com/lh/photo/Yg7mUCh_DIA_ytEsDwbxig?feat=embedwebsite"><img height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3IYGV_VPUyrzor6J8Jc4EGx1_IjONyx0B60JG79IGmNu3CYS8SW-1797dVoqTwKVE3xP-gAmk3iGiOOuZL57nZi2IL9Oa1djVwQ_Y5N4e7Ipw6BJQvxKYn7J8estBOR3scRHuoyYfjw/s640/IMAGE_8218DDEF-1E4F-4831-8809-8B67333C2BDF.PNG" width="640" /></a>
</div>
</li>
<li>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.
</li>
</ol>
<br />
<span style="font-weight: bold;">Note:</span> Make sure you use an abbreviation that typically will not be used, e.g. htp for <p> and not just p.
<br />
<br />
To do similar on Mac then I recomend the free App <span style="font-weight: bold;">Dash</span>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com2tag:blogger.com,1999:blog-4341217138017831572.post-88378859248600098562011-09-22T12:31:00.000-07:002011-09-22T12:31:58.503-07:00Create Weebly Web Page by copying Blogger HTML<div class="separator" style="clear: both; text-align: center;">
<a href="http://weeblyimages1.com/weebly/images/newui/weebly-editor-logo.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="36" src="http://weeblyimages1.com/weebly/images/newui/weebly-editor-logo.jpg" width="200" /></a></div>
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">This morning I blogged about upgrading my MacBook Pro memory using Google Blogger, (</span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;"><a href="http://mac-world-rodt.blogspot.com/2011/09/upgraded-my-macbook-pro-to-8gb-for-40.html" style="font-size: 14px; text-decoration: none;" title="">see here</a></span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">) which by the way has had a facelift recently.</span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;"><br /></span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;"><br /></span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">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 </span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;"><a href="http://weebly-link/398218812685526905" style="font-size: 14px; text-decoration: none;" title="">here</a></span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">. designed</span>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-27237472136867744852011-09-06T13:00:00.000-07:002011-09-06T13:00:51.217-07:00Weebly Multi-columnI 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.<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="349" src="http://www.youtube.com/embed/ogWUyoO0mhg?hl=en&fs=1" width="425"></iframe>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-82076138507511493302011-09-06T00:56:00.000-07:002011-09-06T00:56:04.354-07:00IPad TestTest to see if I can write Add post from iPad using ordinary Safari. So far so good.<br />
<br />
<em>I see there is an option to Interpret Typed HTML so I have placed emphasis tags around this sentence.</em>
<p>
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. </p>
<h2>Image an links</h2>
Need to use URL option. Here is one of my <a href="http://http://www.flickr.com/photos/roderickt-uk/6081821335/">Flickr</a> photos. <div class="separator" style="clear: both; text-align: center;">
<a href="http://farm7.static.flickr.com/6193/6081821335_077e2d76bb.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="375" width="500" src="http://farm7.static.flickr.com/6193/6081821335_077e2d76bb.jpg" /></a></div>
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.
Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-23667150414999922772011-09-05T14:51:00.000-07:002011-09-06T00:19:28.164-07:00Web Dev Comparison Project - Kick Off<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">I am developing three similar web pages so that I can compare methods. They are built with</span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;"><br /></span><br />
<ol style="list-style-image: initial !important; list-style-position: outside !important; list-style-type: decimal !important; margin-bottom: 5px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 5px !important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 25px !important; padding-right: 0px; padding-top: 0px;">
<li style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px; list-style-image: initial !important; list-style-position: outside !important; list-style-type: decimal !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 3px !important; padding-bottom: 0px; padding-left: 5px !important; padding-right: 0px; padding-top: 0px;">Weebly.Com online web development tool , <a href="http://rodt.weebly.com/index.html">RodericT Photography</a>.</li>
<li style="list-style-image: initial !important; list-style-position: outside !important; list-style-type: decimal !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 3px !important; padding-bottom: 0px; padding-left: 5px !important; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif;"><span class="Apple-style-span" style="font-size: 14px; line-height: 23px;">Google Sites, </span></span><a href="https://sites.google.com/site/photographyplusrt/Home">Photography Plus RT</a>.<span class="Apple-style-span" style="font-family: Georgia, arial, sans-serif;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-size: 14px; line-height: 23px;"><br /></span></span></li>
<li style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px; list-style-image: initial !important; list-style-position: outside !important; list-style-type: decimal !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 3px !important; padding-bottom: 0px; padding-left: 5px !important; padding-right: 0px; padding-top: 0px;">Native HTML5, CSS3 (and maybe javascript), see <a href="http://www.roderict.byethost17.com/photography/photography-bf.html">RoderickT - Photography</a>.</li>
</ol>
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;"><br /></span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">The developed web pages must work on iPad and iPhone, so Adobe Flash solutions will not be included. </span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;"><br /></span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">For option 3 I am hoping for a clean low overhead solution that I fully understand and control. </span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;"><br /></span><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">I will document findings here, and also on my Weebly.Com account <a href="http://digitalnotes.weebly.com/web-dev-blog.html">Blog Page</a> to compare blogs. </span><br />
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Georgia, arial, sans-serif; font-size: 14px; line-height: 23px;">At the moment I am consolidating the above three web pages so that they all have similar pages.</span>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-62897480803099410132011-08-21T02:27:00.001-07:002011-08-21T02:27:49.568-07:00Content v Presentation <h1>The message or the media.</h1><br /><br /><h2>To many riches</h2><br /><br /><p>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.</p><br /><br /><p>So as my mum told me decades ages ago<br /><em> It’s better to do a few things well rather than a lot of things badly. </em> 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.</p><br /><br /><ul><br /><li>HTML</li><br /><li>CSS</li><br /><li>JavaScript</li><br /><li>PDF</li><br /></ul><br /><br /><br /><p>A good tool for writing articles quickly in simple HTML on your iPad is the <a href="http://www.codingrobots.com/markdownnote/">MarkDown App</a>. This has recently been updated and now has a useful keyboard extension to make typing quicker. The excellent <em>Help</em> 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.</p><br />Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-69747818540286470912011-07-04T23:17:00.001-07:002011-07-04T23:17:15.149-07:00Poppy meets Barn Owl<!-- ************* RodT Flickr Post Starts Here ********************--><div style="text-align: left; padding: 3px; border-top:2px solid red; margin-top: 1em "><p style="margin-top:1em;"><span style="font-family:verdana, 'sans-serif'; font-size:125%;margin-top: 1em; margin-bottom: 1em;">Test to see if I can send photo to blog from Flickr when viewed on iPad. </span></p> <a href="http://www.flickr.com/photos/roderickt-uk/5902601608/" title="photo sharing"><img src="http://farm7.static.flickr.com/6037/5902601608_e0bb902f4a.jpg" style="margin-top:2em; border: solid 2px #000000;" alt="" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/5902601608/">Poppy meets Barn Owl</a>, originally uploaded by <a href="http://www.flickr.com/photos/roderickt-uk/">rodtuk</a>.</span></div><!-- ************* RodT Post Flickr Ends Here ********************-->Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-50850087587786308382011-05-08T00:47:00.001-07:002011-05-08T00:47:23.524-07:00Bluefish HTML Editor Adding new snippetCurrently I am developing web pages using the free Bluefish Editor on my MacBook. <br /><br />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. <br /><br />SOLUTION. Do not use CMD-V but instead right-click and select paste. Wallah all OK.<br /><br /><br />- Posted using BlogPress from my iPad<br />Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-67793944812419767742011-02-01T07:13:00.001-08:002011-02-01T07:13:57.139-08:00MarkdownNote<h2>MarkdownNote</h2><br /><p>For several weeks now I have been trying out various ways of writing web pages using my iPad. There are some good tools</p><br /><ul><br /><li>Gusto</li><br /><li>WPD (Web Page Development)</li><br /></up><br /><p>Both these have FTP feature so I can use this to combine with work on my PC and Laptop.</p><br /><p>The one annoying thing was the cumbersome data entry of HTML tags. By chance while looking at Knowtilus browser I came across <em>MarkdownNote</em>. 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.</p><br /><br /><br /><center><a href='http://photo.blogpressapp.com/show_photo.php?p=11/02/01/790.jpg'><img src='http://photo.blogpressapp.com/photos/11/02/01/s_790.jpg' border='0' width='210' height='281' style='margin:5px'></a></center><br /><p>This iPad implementation of <a href="http://daringfireball.net/projects/markdown/">Daring Fireball</a> currently costs $3.99 and is smart, so that when you hold iPad in landscape orientation, you have a preview of output.</p><br /><br /><p>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.</p><br /><br /><br /><center><a href='http://photo.blogpressapp.com/show_photo.php?p=11/02/01/791.jpg'><img src='http://photo.blogpressapp.com/photos/11/02/01/s_791.jpg' border='0' width='281' height='210' style='margin:5px'></a></center><br /><p>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.</p><br /><br /><p><strong>Note</strong> another advantage of Markdown is that the output is well formatted even without converting to HTML.</p><br /><br /><p>Both Apps support Dropbox so whatever device I use I can synch either with FTP or Dropbox.</p><br /><br /><p><span style='color:green'>This blog was written using MarkdownNote. </span></p><br /><br /><br />- Posted using BlogPress from my iPad<br />Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-55389059211133696502010-12-14T12:11:00.001-08:002010-12-14T12:12:44.379-08:00CoffeeCup CSS Menu Designer - Problem ResolvedI 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<br /><pre><br /><br />.center { margin-left: auto; margin-right: auto}<br /><br /></pre><br /><br />What was needed was the following. I changed margin-left to 8am otherwise the menu was to close to the left.<br /><br /><pre><br /><br />.center { margin-left: 8am; margin-right: auto; display:inline-block; }<br /><br /></pre><br /><br />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.<br /><br />- Posted using BlogPress from my iPad<br /><br />Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-34478298781274557172010-12-13T15:24:00.000-08:002010-12-13T15:24:03.596-08:00CoffeeCup Code Cleaner not working - resolvedThe <i>Tools - Code Cleaner</i> stopped working. I gave up<br />
and ran the <i>Document - Validate HTML</i> which<br />
automatically ran the W3C Markup Validation Service. This had<br />
several messages, one being about the use of <i>lh</i> list<br />
header tag that I had tried when exploring the <i>Insert -<br />
List</i> command. I removed this as it is not part of HTML5<br />
standards and now the <i>Tools - Code Cleaner</i> is working<br />
fine again.Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-45657631387297029492010-12-12T05:42:00.001-08:002010-12-12T05:42:01.678-08:00Images not seen online but work on local disk - a solutionHaving 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.<br /><br />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.<br /><br /><br />- Posted using BlogPress from my iPad<br />Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-9708736734175328102010-12-11T09:49:00.001-08:002010-12-13T05:48:07.294-08:00CoffeeCup only publishes to the root - correction no it doesn't<h2>Corrected post</h2><br /><br />The reason why I could not upload my website to my target folder was because I was using <i>File - Upload File to Server</i> when I should have been using <i>My Websites - Upload Selected Files</i> or <i>My Websites - Upload Entire Website Project</i> which send them to the folder you have defined as the root in the <i>My Websites - Website Project Settings</i>.<br /><br /><h2>Original post</h2><br /><br />I use the excellent free Zymic hosting for testing my web developments. I need to have many folders to keep the various projects separate. <br /><br />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. <br /><br />So I now publish to my local disk, well I di this anyway, and then use my trusty Total Commander from <a href="http://www.ghisler.com/">Ghisler</a> to do FTP work. <br /><br />Another inelegant solution but at least Total Commander is very fast.<br /><br /><br />- Posted using BlogPress from my iPad<br /><br /><br /><br />Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-57135851168192822502010-12-11T09:43:00.001-08:002010-12-11T09:43:32.327-08:00CoffeeCup multiple viewsCoffeeCup HTML Editor does not appear to let you view more than one source page side by side. For example it would be nice to be able to see say HTML code, CSS Code and Page Output all in separate tiled windows.<br />You can have both files open at the same time but you have to flip from one to the other to see. <br /><br />I sometimes use TopStyle Lite and open the CSS file in a separate MS Window which I the tile with CoffeeCup window, so seeing HTML and CSS source side by side, but this is an inelegant solution <br /><br /><br />- Posted using BlogPress from my iPad<br />Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-51569038225785101862010-12-11T09:28:00.001-08:002010-12-11T09:28:29.810-08:00CoffeeCup in the Winter NightsIt's that time again when I decide to do some more web development exploration. This year I have set myself the task of comparing high level development using Serif WebPlus X4 to low development with CoffeeCup HTML Editor. <br /><br />I am going to start simple and make sure I understand every stage. The development will be recorded by keeping older pages on the site as an audit trail. <br /><br />I will dash notes and findings as they happen on this blog, which I am writing on iPad using BlogPress, and with the wonders of BlogPress these should also be posted on my Twitter. <br /><br />Nothing fancy just honest toil, mistakes and how to avoid, annoyances and work around and the occasional 'well how about that'.<br /><br /><br />- Posted using BlogPress from my iPad<br />Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-73272275116273417552010-06-07T14:07:00.001-07:002010-06-08T02:18:32.467-07:00Howto Embed Flickr Slideshow into Google Sites (Cont.)<div style="border-top: 2px solid red; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">My previous blog showed in detail how to embed a Flickr slideshow into a Google Sites web page.<br />
<br />
This blog adds a couple of features, </span><br />
<ul><li><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;"> Change size of slideshow</span></li>
<li><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;"> Use Flickr search to select photos</span></li>
</ul><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;"> <br />
This time the slideshows are embedded into a two column Google Site web page. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679324331/" title="photo sharing"><img alt="" src="http://farm2.static.flickr.com/1266/4679324331_a633f00a61.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679324331/">flickr-slideshow-extra-01</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="border-top: 2px solid red; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Before using Flickr search, make sure that the search is limited to your own Photostream. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679957614/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4007/4679957614_a12e984129.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679957614/">flickr-slideshow-extra-02</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">I have added the search criteria. <br />
<br />
Note: What I consider to be my better photographs I tag as A1, so this is just selecting the better photographs of the Millennium Green. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679325607/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4025/4679325607_475f6f119f.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679325607/">flickr-slideshow-extra-03</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Click on the slideshow icon to start the Flickr slideshow for the selected photos. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679325721/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4007/4679325721_f396bf8cb9.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679325721/">flickr-slideshow-extra-04</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Display the share options, as described in the previous blog.<br />
<br />
To change the slideshow take the customization option. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679957940/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4023/4679957940_01bc6a937c.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679957940/">flickr-slideshow-extra-05</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Note the default size before customization is 400 x 300. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679958058/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4015/4679958058_c4891743ef.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679958058/">flickr-slideshow-extra-06</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">I am going to change this to 300 </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679958162/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4012/4679958162_3a56a659fd.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679958162/">flickr-slideshow-extra-07</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;"> </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679958312/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4034/4679958312_3cec3328ef.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679958312/">flickr-slideshow-extra-08</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Copy the provided HTML. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679956690/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4033/4679956690_db5b2aa9e6.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679956690/">flickr-slideshow-extra-09</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Go to your Google Sites web page, edit page and select click on edit HTML tab. Paste the copied code at the relevant position and press <span style="font-family: "Courier New",Courier,monospace;">Update</span>. <br />
</span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679956878/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4016/4679956878_d30cbcdcda.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679956878/">flickr-slideshow-extra-10</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">The new slideshow gadget has been added to my Google Sites web page,<br />
<br />
Unlike my previous blog this is using a two column template so the 300x300 slide shows are aligned side by side. You may have to do a bit of editing to align them horizontally.<br />
</span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679326281/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4065/4679326281_ca9021776b.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679326281/">flickr-slideshow-extra-11</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">There is no indication which slide show it is so I usually add a title which I format to h2 level. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679324905/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4056/4679324905_0a28b63b28.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679324905/">flickr-slideshow-extra-12</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">To move to the other column select the heading and slideshow gadget and cut (Ctrl-X). </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679957074/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4027/4679957074_5893d14100.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679957074/">flickr-slideshow-extra-13</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Paste (Ctrl-V) in the other column. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679957142/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4012/4679957142_455ecb96aa.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679957142/">flickr-slideshow-extra-14</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">You may need to change some of the options. <br />
<br />
Do as explained in previous post, click on gadget to show options and select the ones you need.<br />
<br />
In this case I want to align to the right. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679325183/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4007/4679325183_cc22cd7023.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679325183/">flickr-slideshow-extra-15</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Now the slide show gadget is in the 2nd column and aligned to the right to match the other 2nd column gadgets </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679957348/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4043/4679957348_a9b1e766e4.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679957348/">flickr-slideshow-extra-16</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<br />
<div style="border-top: 2px solid red; margin-top: 1em; padding: 3px; text-align: left;"><br />
<span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Save the page to see the final result. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4679957454/" title="photo sharing"><img alt="" src="http://farm2.static.flickr.com/1291/4679957454_ceb610225f.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4679957454/">flickr-slideshow-extra-17</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0tag:blogger.com,1999:blog-4341217138017831572.post-33300475245401183912010-06-07T02:10:00.001-07:002010-06-07T11:42:25.504-07:00How to Embed Flickr Sideshows into a Google Sites web page<div style="padding: 3px; text-align: left;"><br />
<span style="font-family: Verdana,sans-serif;">This blog describes how to embed Flickr Sideshows into a Google Sites web page.</span><br />
<br />
<a href="http://www.flickr.com/photos/roderickt-uk/4677528239/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4009/4677528239_0e05f15f0f.jpg" style="border: 2px solid rgb(0, 0, 0);" /></a><br />
<span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4677528239/">flickr-slideshow-1</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><div style="font-family: Verdana,sans-serif; padding: 3px; text-align: left;"><br />
</div><div style="padding: 3px; text-align: left;"><span style="font-family: Verdana,sans-serif;">This first example simply embeds one of my Flickr Sets into a single column Google Sites page.</span><span style="font-size: 0.8em; margin-top: 0px;"> </span></div><br />
<div style="padding: 3px; text-align: left;"><a href="http://www.flickr.com/photos/roderickt-uk/4677528349/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4055/4677528349_eac9f36d4e.jpg" style="border: 2px solid rgb(0, 0, 0);" /></a><br />
<span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4677528349/">flickr-slideshow-2</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span><br />
<span style="font-size: 0.8em; margin-top: 0px;"><br />
</span></div><div style="font-family: Verdana,sans-serif;">Select the Set you wish to embed.</div><br />
<div style="padding: 3px; text-align: left;"><a href="http://www.flickr.com/photos/roderickt-uk/4678157368/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4036/4678157368_2376cbd244.jpg" style="border: 2px solid rgb(0, 0, 0);" /></a><br />
<span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4678157368/">flickr-slideshow-3</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><div style="font-family: Verdana,sans-serif;"><br />
</div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Click on the Slideshow icon to start Flickr slideshow in the normal manner.</span><br />
<br />
<a href="http://www.flickr.com/photos/roderickt-uk/4677528557/" title="photo sharing"><img alt="" src="http://farm2.static.flickr.com/1277/4677528557_c28faf04bf.jpg" style="border: 2px solid rgb(0, 0, 0);" /></a><br />
<span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4677528557/">flickr-slideshow-4</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Click on the Share which is top right of slide show.</span><br />
<br />
<a href="http://www.flickr.com/photos/roderickt-uk/4677528655/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4020/4677528655_10fbbb8bf7.jpg" style="border: 2px solid rgb(0, 0, 0);" /></a><br />
<span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4677528655/">flickr-slideshow-5</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Copy the "Embed HTML" copy button. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4678157724/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4062/4678157724_026e892044.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4678157724/">flickr-slideshow-6</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Return to the Google Sites web page, and click on the Edit HTML to display the source HTML code. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4678157816/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4031/4678157816_0e8be3b374.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4678157816/">flickr-slideshow-7</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Paste the HTML code into the web page at the position you want. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4678157886/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4020/4678157886_87e6ea5cbc.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4678157886/">flickr-slideshow-8</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Click on the Update button, bottom left. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4678158014/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4011/4678158014_a9a96dbce7.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4678158014/">flickr-slideshow-9</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Save the changes. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4678158094/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4039/4678158094_ac05a9e1f1.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4678158094/">flickr-slideshow-10</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">The outline of the gadget is shown in the Google Sites web page edit. You can modify the defaults by clicking the gadget to show the options at the bottom. <br />
<br />
Make any changes you require. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4677529251/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4060/4677529251_82f166061a.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4677529251/">flickr-slideshow-11</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">In this example the Alignment = Centre was chosen. <br />
<br />
Save the changes to see the finished page. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4677529343/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4037/4677529343_3e4be0e297.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4677529343/">flickr-slideshow-12</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">The embedded Flickr Slideshow should appear as shown. To staret the show click on the usual "Play" triangle. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4677529473/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4032/4677529473_09767fc204.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4677529473/">flickr-slideshow-13</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">The final result with the slideshow in progress. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4678158468/" title="photo sharing"><img alt="" src="http://farm2.static.flickr.com/1270/4678158468_fc5e84f437.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4678158468/">flickr-slideshow-14</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<br />
<br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">Move your mouse into the slideshow to reveal the Flickr options.<br />
<br />
If you click on the photo you will be taken to the Flickr page for that photo in a new tab.<br />
<br />
<br />
Click the bottom right icon to start a full page version of the slideshow.<br />
<br />
<br />
To resume slideshow click Play icon on bottom left.<br />
<br />
<br />
It is also possible to navigate using the small thumbnails. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4677529655/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4008/4677529655_e1c5518ccf.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4677529655/">flickr-slideshow-15</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span></div><br />
<div style="padding: 3px; text-align: left;"><span style="font-family: verdana,'sans-serif'; font-size: 125%; margin-bottom: 1em; margin-top: 1em;">This is the Flickr page for the photo selected as described above. </span><br />
<a href="http://www.flickr.com/photos/roderickt-uk/4678158716/" title="photo sharing"><img alt="" src="http://farm5.static.flickr.com/4040/4678158716_d386041ae4.jpg" style="border: 2px solid rgb(0, 0, 0); margin-top: 2em;" /></a><span style="font-size: 0.8em; margin-top: 0px;"><a href="http://www.flickr.com/photos/roderickt-uk/4678158716/">flickr-slideshow-17</a>, originally uploaded by <a href="http://www.flickr.com/people/roderickt-uk/">rodtuk</a>.</span><br />
<br />
<span style="font-size: 0.8em; margin-top: 0px;"><span style="font-size: large;"><span style="font-family: Verdana,sans-serif;">Next Blog Post - Two up slideshows & Flickr Search results.</span></span> </span></div>Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com1tag:blogger.com,1999:blog-4341217138017831572.post-10649012681289516362010-05-28T14:25:00.000-07:002010-05-28T14:25:05.506-07:00Linking to flickr photosFor ages I have found linking to a single flickr image is awkward. The share section in the slide show links to the slide show, and the share option on photostream link to the page that includes the image but not just the image.<br />
<br />
I think I have cracked it now though.<br />
<br />
When in the individual photo in your photostream,<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://farm5.static.flickr.com/4036/4648558932_d7075d6fc4_o.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://farm5.static.flickr.com/4036/4648558932_d7075d6fc4_o.png" /></a></div><br />
Click on the button for All Sizes<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://farm5.static.flickr.com/4055/4647944939_1e12da6d64_o.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://farm5.static.flickr.com/4055/4647944939_1e12da6d64_o.png" /></a></div><br />
This will take you to a web page similar to the one below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://farm5.static.flickr.com/4036/4647945027_8507961743_o.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://farm5.static.flickr.com/4036/4647945027_8507961743_o.png" /></a></div><br />
Click on the size you want, and then the image will be displayed, together with HTML code to cut and paste into your web. Also displayed is the URL of just the photo, which is all that I usually need. In the above I have high lighted in yellow the size I want and the resulting URL.<br />
<br />
I used this approach to embed these images into this blog article.Rod Thttp://www.blogger.com/profile/07091370586796916723noreply@blogger.com0