====== Creating Web-Pages ======

Tips and solutions for the most common problems one comes across when designing a web pages.


===== Examples =====


==== Structure your Page ====

  * [[http://www.alistapart.com/articles/multicolumnlists|A List Apart: Articles: CSS Swag: Multi-Column Lists]]

==== Linking Content ====

**PDF**:
  * [[http://www.rdpslides.com/psfaq/FAQ00050.htm|Linking to PDF documents from HTML]]
  * [[http://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html|Recommended way to embed PDF in HTML?]]
  * [[http://blogs.adobe.com/pdfdevjunkie/web_designers_guide|The Web Designer’s Guide to Acrobat]]
  * [[http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html|Embeddable Google Document Viewer]] -- Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. => https://docs.google.com/viewer
  * www.pdfobject.com -- Dynamically embedd PDF files into HTML documents ([[http://pdfobject.com/examples/index.php|Examples]]).

**Images**:
  * [[soft:prog:web_design:data_urls]] - Learn how to embed images into your web pages with data URLs.

**Flash**:
  * [[http://www.alistapart.com/articles/flashsatay|Flash Satay: Embedding Flash While Supporting Standards]]
    * [[http://www.bernzilla.com/item.php?id=681|Embedding YouTube Videos as Valid XHTML 1.0]]
    * [[http://blog.hwa2u.com/youtube-with-xhtml-10-strict-valid/|YouTube With XHTML 1.0 Strict Valid!!]]
    * [[http://www.tools4noobs.com/online_tools/youtube_xhtml/|Valid XHTML YouTube embed code generator]]

==== Favicon ====

What is a [[wp>Favicon]]?

  * [[http://www.chami.com/html-kit/services/favicon/|Create a FavIcon from any picture]]
  * [[http://mppierce66.home.comcast.net/~mppierce66/web/fi/|MpP Favicon Gallery]]

How to retrieve the relevant favicon for a URL:
  * http://getfavicon.appspot.com
  * [[http://blog.tinucleatus.com/?p=41|Get favicon for any site using google]]

==== Translation ====

  * [[https://www.w3schools.com/howto/howto_google_translate.asp|How TO - Google Translate]] [(https://web.archive.org/web/20190304091353/https://www.w3schools.com/howto/howto_google_translate.asp)]
  * [[https://www.uni-muenster.de/IVV5WS/DocWiki/doku.php?id=public:google-uebersetzer_integrieren|Integration des Google-Übersetzers in eine Homepage]] [(https://web.archive.org/web/20190305170835/https://www.uni-muenster.de/IVV5WS/DocWiki/doku.php?id=public:google-uebersetzer_integrieren)]
  * [[https://stackoverflow.com/questions/9306015/modifying-element-from-google-translate-translateelement-results|Modifying element from google.translate.TranslateElement results]] [(https://web.archive.org/web/20190305171758/https://stackoverflow.com/questions/9306015/modifying-element-from-google-translate-translateelement-results)]
  * [[https://stackoverflow.com/questions/10486833/implementing-google-translate-with-custom-flag-icons|Implementing Google Translate with custom flag icons]] [(https://web.archive.org/web/20190305171437/https://stackoverflow.com/questions/10486833/implementing-google-translate-with-custom-flag-icons)]

~~REFNOTES~~

===== Online Support Utillities for the Web-Designer =====

  * [[https://web.archive.org/|web.archive.org]] -- The [[wp>Wayback Machine]] => <wrap info>[[https://en.wikipedia.org/wiki/Help:Using_the_Wayback_Machine|Help: Using the Wayback Machine]]</wrap>
  * www.danstools.com -- A collection of various tools that have been found helpful for many years.
  * [[http://tinypng.org/|TinyPNG]] --  Compress PNG images while preserving transparency.
  * www.colorexplorer.com
  * www.colorschemedesigner.com -- A generator for color schemes and palettes to create good-looking, well balanced and harmonic web pages.
  * [[http://www.albionresearch.com/misc/urlencode.php|URLEncode/URLDecode]]\\ This web page encodes or decodes a string using URL Encoding. URL Encoding is used when placing text in a query string to avoid it being confused with the URL itself.
  * [[http://www.lipsum.com|Lorem Ipsum]] - Standard placeholder text generator.

===== Troubleshooting =====

  * [[soft:prog:web_design:solution:cross-browser_issues]]
  * [[soft:prog:web_design:solution:box_layout_issues]] -- positioning etc.
  * [[http://apptools.com/examples/tableheight.php|100% Table Height]]
  * [[soft:prog:web_design:solution:text_issues]] -- font size and DPI annoyances
  * [[http://www.cs.tut.fi/~jkorpela/www/windows-chars.html|On the use of some MS Windows characters in HTML]]

  * [[http://www.arachna.com/edu/tutorials/mini/ssi/printenv.html|The SSI Test Suite: Echoing All Request Variables]]

===== Display of Numerical Data =====

  * [[http://code.google.com/intl/de/apis/chart/image_charts.html|The Google Chart API]] lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.
  * [[http://code.google.com/intl/de/apis/visualization/documentation/gallery.html|Google Visualization API]] enables you to expose your own data, stored on any data-store that is connected to the web, as a Visualization compliant datasource.

  * [[http://woork.blogspot.com/2009/03/useful-scripts-to-plot-charts-in-web.html|Useful scripts to plot charts in web pages]]
    * [[http://code.google.com/p/flot/|Flot]] − Attractive Javascript plotting for jQuery.
    * www.jscharts.com − JS Charts is a JavaScript chart generator that requires little or no coding.

  * [[http://www.messpc.de/http.php|Anzeige der Messwerte in HTTP Dokumenten]]
  * [[http://cssglobe.com/post/1468/pure-css-animated-progress-bar|Pure CSS Animated Progress Bar]]
  * [[http://www.eggheadcafe.com/tutorials/aspnet/58a3094c-3e00-4d40-ab76-3370bea2c012/html-horizontal-bar-chart.aspx|HTML Horizontal Bar Chart]]

  * [[http://oss.oetiker.ch/rrdtool/|RRDtool]] − An OpenSource industry standard, high performance data logging and graphing system for time series data.