How we did the intro to a video commercial for a local school.
-
Constructing a video commercial
Read More » -
‘The Writer’ Automaton
Great inventors from the past still amaze us with their ingenuity that seemed ahead of their time. One of these is the automaton, an android from the 18th century.
Presented here are the automatons created by Pierre Jaquet-Droz.
Constructed between 1768 and 1774 by Pierre Jaquet-Droz, his son Henri-Louis (1752-1791), and Jean-Frédéric Leschot (1746-1824) were The Writer (made of 6000 pieces), The Musician (2500 pieces) and The Draughtsman (2000 pieces).
His astonishing mechanisms fascinated the world’s most important people: the kings and emperors of Europe, China, India and Japan.
Some consider these devices to be the oldest examples of the computer. The Writer has an input device to set tabs that form a programmable memory, 40 cams that represents the read only program, and a quill pen for output. The work of Pierre Jaquet-Droz predates that of Charles Babbage by decades. – Source: Pierre Jaquet-Droz on Wikipedia
Pierre Jaquet-Droz. Inspires Oscar Winning Film “Hugo”.
Pierre Jaquet-Droz (1721–1790) was a Swiss-born watchmaker of the late eighteenth century. He lived in Paris, London, and Geneva, where he designed and built animated dolls, or automata, to help his firm sell watches and mechanical birds. The following video shows their work.
Read More » -
Create you own URL shortener service
A URL shortener beautifies your links, make them short to easily tweet and keep statistics on clicks. It’s a very useful tool when it comes to marketing, you can figure out the best times for postings, where to post and what to post. Now there a few online services that do that: bit.ly, goo.gl, tinyurl.com, wp.me and many more.
But if you want to customize your own URL (such as we created penas.co) to beautify your links and keep statistics, a great open source solution is http://yourls.org/
YOURLS stands for Your Own URL Shortener. It is a small set of PHP scripts that will allow you to run your own URL shortening service (a la TinyURL or bitly). Running your own URL shortener is fun, geeky and useful: you own your data and don’t depend on third-party services. It’s also a great way to add branding to your short URLs, instead of using the same public URL shortener everyone uses.
Read More » -
Master Stylesheet
Not removing the default browser styling leads to inconsistencies in the appearance of your design across browsers. Before you do anything else when coding a website, you should reset the styling. You can use the CSS code bellow to do just that.
Open to view the code
/***** Global Settings *****/
html, body {
border:0;
margin:0;
padding:0;
}body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}/***** Headings *****/
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}h3 {
font-size:1em;
font-weight:bold;
}/***** Common Formatting *****/
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}ul, ol {
padding:0 0 1.25em 2.5em;
}blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}small {
font-size:0.85em;
}img {
border:0;
}sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}/***** Links *****/
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}/***** Forms *****/
form {
margin:0;
padding:0;
display:inline;
}input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}textarea {
width:100%;
line-height:1.25;
}label {
cursor:pointer;
}/***** Tables *****/
table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}table tr td {
padding:2px;
}/***** Wrapper *****/
#wrap {
width:960px;
margin:0 auto;
}/***** Global Classes *****/
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }.wrap { width:960px;margin:0 auto; }
.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }
Read More »