Showing posts with label Web Development. Show all posts
Showing posts with label Web Development. Show all posts

Monday, June 25, 2007

Free Picasa photo gallery and slideshow web templates


Free Picasa templates


Here are some Picasa web templates to create web photo galleries and
slideshows using Google's Picasa without any knowledge of HTML, CSS
and Javascript.


Feel free to download them and adjust colours etc.
to your preferences. Many people already jave created their won galleries
using these templates. Some have added some personal flavour. See list
of sites using these templates



The Stopdesign Photo Gallery templates for Picasa


An adaptation of the original
templates
by Douglas Bowman, which require Movable Type. This Picasa
version is, of course, functionally much more limited. But look and feel
are very similar and it will run on any system. Creates an index page
with thumbnails and an album description (if available) and a separate
page for each image including a thumbnail of the next and previous image.


lightbox preview


Download and demo




Lightbox Photo Gallery and Slideshow


The Lightbox template is using the excellent Lightbox
JS by Lakesh Dakar
. This template is one of the most popular in this
gallery.


lightbox preview


Download and demo




Fotoplayer 2.0 Flash Slideshow


The Fotoplayer 2.0 template is powered by the excellent Flash gallery and
slideshow by Dhinakaran
Annamalai
.
It's also available as a JAlbum extension.


 preview


Download and demo




Thickbox Photo Gallery


Template similar to the Lightbox template. The Thickbox template uses the javascript
library from Cody Lindly


 preview


Download and demo




XFade Slideshow


Template for a straight forward simple fade in fade out, automatically
running, slide show. The Xfade template uses a script from http://slayeroffice.com


 preview


Download and demo




Simple Scroller Photo Gallery


Template with square sized thumbnails and a white and a black style.


 preview


Download and demo




Highslide Photo Gallery and Slideshow


Template with square sized thumbnails and the possibility to add a (longer)
description. The images adjust automatically to your monitor's rsolution.
The Highslide template uses the Javascript thumbnail viewer from http://vikjavev.no/highslide/.
Please note that Highslide JS is not free for commercial use.


 preview


Download and demo





Source: paulvanroekel

Tuesday, January 9, 2007

Test your web design in different browsers

Test your web design in different browsers

Kao sto naslov kaze, uz pomoc ovog sajta mozete pogledati kako ce vasa html stranica izgledati na ekranu nekog od korisnika sa odredjenom kombinacijom browser/OS... To je besplatan, open-source, online servis, kojeg je kreirao Johann C. Rocholl.

Stare verzije IE, standalone

Prema statisitici, IE browser zauzima (jos uvek) preko 80% ukupnog broja koriscenih browsera, i za web development je bitno da strana lepo izgleda u IE (iako on bas i ne postuje standarde). Od gore spomenutih 80% dobar deo otpada i na starije verzije, u kojima je prikaz za nijansu drugaciji. Ako hocete da istestirate vasu stranu i na starijim verzijama Internet Explorera, standalone verzije mozete pronaci ovde:
http://browsers.evolt.org/?ie/32bit/standalone

Neki od HTML tagova koji se redje koriste

* <abbr> - Defines an abbreviation. By using the title attribute with the abbr tag, you can have a tool tip on hover that will render the abbreviation. This is very important for sites that are very technical but have a wide audience who may not know all the abbreviations

<abbr title=”Doctor”>Dr</abbr>

* <acronym> - Defines an Acronym, much like the abbr tag. Using the title attribute will render a tool tip that you can use to spell out the acronym. Again very important for sites that are technical with a wide audience that may or may not know all the acronyms.

<acronym title=”Cascade Style Sheets”>CSS</acronym>

* <address> - Defines the start of an address. You should use it to define addresses, signatures, or authorships of documents. There is some debate what this tag should be used for specifically, but the W3C spec states it can be used for an address, a signature of a document, or the authors.

<address> 3.7 Designs, 320 S. Main Suite B, Ann Arbor, MI 48104 </address>
<address> Website Design and Content Copyright 3.7 Designs </address>


* <cite> - indicates a reference to work, such as a book, report or web site. Essentially this tag is to define a citation to other work, and it can include the date of publication, a link to the publication and a description of the publication you are citing.

<cite> Written on December 26th, 2006 by Ross Johnson</cite>

*

* <code> - Defines computer code text. The code tag by default will monospace your font, but it also defines computer code and sets it apart from other written content.

<code>#header { margin: 0; font-size: 3em; } </code>


* <samp> - Defines sample computer code. Similar to the code tag, the samp tag monospaces your font and refers to example or sample code in your documents.

<samp> html, body { margin: 0; padding: 0; } </samp>


* <del> - defines text that was deleted. Most browsers will render the text with a strike through, and it is used to show when a document has been updated and how.

Semantics are <del>often</del> always important


* <ins> - defines text that was inserted (often used with <del>). Again the ins tag shows where a document has been updated and how. Many browsers will underline the the inserted content, however some still render them as plain text.

Semantics are <del>often</del> <ins>always</ins> important


* <q> - defines a short quotation. Similar to blockquote the q tag defines a short quotation. Modern browsers will automatically render quotations around the content enclosed, however IE6 and below do not. Some resort to the DOM to fix this hole in IE’s rendering engine.

<q>Studying is learning.</q>

There are a ton more, and I encourage everyone to print out this list and try and use semantic code whenever possible. You will find that by using these methods your sites become of a much higher quality, and you can use the usage of many of these tags as sales notes for either landing a job or client. Imagine showing a client that you can help people better understand their company by having all acronyms defined on their pages? Who wouldn’t want such a feature?