Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Saturday, November 5, 2011

Minted: Highlighted source code in LATEX

Minted is a LaTeX package that facilitates expressive syntax highlighting using the powerful Pygments library. The package provides options to customize the highlighted source code output.
The example below shows how C code is highlighted,  and the output is shown at right:

\documentclass{article}
\usepackage{minted}

\begin{document}

\begin{minted}{c}
int main()
{
  printf("hello, world");
  return 0;
}
\end{minted}

\end{document}

Pygments also provides a command line interface pygmentize, among the possible output formats there are HTML, RTF, LaTeX and ANSI sequences.
For command line highlighting a solid alternative to Pygments is GNU Source-highlight.



Source: http://mirrors.ircam.fr/pub/CTAN/macros/latex/contrib/minted/minted.pdf
A couple of on-line highlighters: http://www.hilite.me/http://quickhighlighter.com/

Friday, November 4, 2011

Hack to prevent Caching of Dynamic Images

Web caches are a necessary component of the web. So, when developing dynamic web contents it is important to be sure if an object is cached or not, otherwise the user may end up seeing some old cached content. The objective here is to block caching of images produced by a service which generates a new image in each call, so the image must be transmitted every time.

The HTML meta tags do not apply to the case of images (and their effectivity is even questionable for HTML pages). The HTTP cache directives are better suited for cache control since most of the web caches honor them. But they entail some customization of the web server in order to send the correct header for each file.

The simplest way to prevent caching of a dynamic image, is to change its url at each run. For that, one possibility is to completely change the filename. But a trick allows to keep the original filenames and still prevent caching, it consists in appending a random querysting to the filename like this:

<img src="output.png?r=1234">

the querystring is discarded by the webserver where output.png is. Still it is seen as a different object by the cache, causing the image to be reloaded every time the page is loaded. 


Source: http://www.itsjustpoison.com/blog/2008/05/12/trick-prevent-image-caching-of-dynamic-images
Source: http://www.i18nguy.com/markup/metatags.html
Reading: http://www.mnot.net/cache_docs/

Saturday, April 23, 2011

The Cicada Principle and tilings

The background of this post uses the "cicada principle" for its tiling.
The two tile elements (shown below) have a prime number of columns, and the resulting pattern is repeated each 15 columns.

Red is transparent





The code for the tiling is:
<div style="background-image: url(bg3.png),url(bg5.png);
     background-size: auto, auto;
     margin: 0;
     padding: 0;
     height: 500px;
     width: 800px;">

<!-- content -->

</div>
Source: http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/

See also: PNG overly with no extra markup for a non tiled overly as:
<img style="background:url(Background.jpg)" src="Foreground.png"  >

Saturday, January 29, 2011

Show/Hide Content with CSS and JavaScript

Code2HTML is a syntax highlighter which reliefs the painful task of transcribing code to html pages.

Sometimes the code occupies too much of the web page, so it is better to be able to hide it.
It seems that there are many ways of hiding parts of a web page, most rely on CSS and javascript to modify the page.

Here I'm using the script from: http://www.cssnewbie.com/showhide-content-css-javascript/. Below is the code for I'm using in this page.

Some notes:
  • the default state (shown/hidden) depends on which tag that has the: style="display: none;"
  • The tags ID are very important. The elements MUST be named as id="code123" for the hidden content, and the other id="code123-show" for the visible link to the hidden content.
  • The tag ID must be UNIQUE for this element within the current page, otherwise it will affect all the other tags.


Try it! Hide the code

<script type="text/javascript">
<!-- code from http://www.cssnewbie.com/showhide-content-css-javascript/ -->
function showHide(shID) {
 if (document.getElementById(shID)) {
  if (document.getElementById(shID+'-show').style.display != 'none') {
   document.getElementById(shID+'-show').style.display = 'none';
   document.getElementById(shID).style.display = 'block';
  }
  else {
   document.getElementById(shID+'-show').style.display = 'inline';
   document.getElementById(shID).style.display = 'none';
  }
 }
}
</script>


<a class="showLink" href="#" id="code123-show" onclick="showHide('code123');return false;">
See the code.
</a>
<div id="code123" 
style="display: none; border-top: 1px solid #666; border-bottom: 1px solid #666;">
<!-- PUT YOUR CONTENT FROM HERE -->
YOUR CONTENT

YOUR CONTENT

YOUR CONTENT
<!-- TO HERE -->
<p>
<a href="#" id="code123-hide" class="hideLink" onclick="showHide('code123');return false;">
Hide this content.
</a>
</p>
</div>

<!-- syntax highlighted by <a href="http://www.palfrader.org/code2html">Code2HTML</a>, v. 0.9.1 -->