html

Customized web fonts

In the past, if the embedding of customized fonts was required, it would result into the use of images that would display the desired words. Nowadays customized fonts can be rendered dynamically by the browser using different technologies.

Taggings:

Accesing webpages with Java JTidy

The Java library "JTidy" offers capabilities to read webpages from URLs.

First, create a new Tidy-Object and an InputStream in. Call the method parseDOM() to get a new DOM-Object of the webpage.

Tidy tidy = new Tidy();
String urlString = "URL of the desired webpage";
URL url = new URL(urlString);
URLConnection uc = url.openConnection();
BufferedReader in = new BufferedReader(new InputStreamReader(uc.getInputStream()));
org.w3c.dom.Document node = tidy.parseDOM( in, null );

The API documentation is available online, see http://jtidy.sourceforge.net/apidocs/index.html

Taggings:

html code for Facebook like-button

The following iframe tag can be added in the body of any page. One just have to replace the YOUR_URL part with the page you want people to like.

iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px">

don't forget to put the "<" sign in the beginning and to close the iframe tag at the end ( I couldn't do it here because it was not allowed )

Even if you don't have a website, this code can just make you like (in Facebook) any page or section of a page that don't have a like button. You just have to replace the YOUR_URL part with the URL you like, you add an html head and body to have a file you can open with Firefox or chrome, and then it will be ready to appear on your Facebook wall ( after you click it while being logged in of course ).

Facebook Like-button

What's the HTML code for adding a Facebook like-button in a website ?

Accesing webpages with Java

Java offers capabilities to read webpages from URLs.

First, store the URL of the webpage in a String. Instantiate a new instance of the built-in Java class URL and pass the string as parameter in the constructor. Call the method openConnection() to get a new URLConnection object. Use that object to create a new BufferedReader and read the webpage line by line.


String urlString = "URL of the desired webpage";
URL url = new URL(urlString);
URLConnection uc = url.openConnection();
BufferedReader in = new BufferedReader(new InputStreamReader(uc.getInputStream()));
String inputLine;
String htmlText = "";
while ((inputLine = in.readLine()) != null) {
htmlText = htmlText + inputLine;
}
in.close();

Taggings:

Reading webpages in Java applications

Many web application fall into the category of "mash ups", meaning that they collect information from different sources (often other web applications) and combine it in a single, coherent user interface that offers additional value to the user. Often this additional value is enough to justify the mash up as a service of its own. In order write such an application, one must first be able to access the web pages in question in the Java code of the own application.

Full screen random background images using Supersized (javaScript)

In order to have full screen background images on a website you may consider using a jQuery plug in named Supersized. Supersized is available from http://buildinternet.com/project/supersized/ under the GPL and MIT License.

To get supersized to work properly on a website you have to include some JavaScript and CSS in the head section of your html site.

1. the jQuery plugin
script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"/>

2. the supersized plugin (which you downloaded from the website shown in the first paragraph)
script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"/>

3. the CSS file that comes with the supersized zip from the download
link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />

After including these script and CSS files you can either make a separate javaScript file and include it as well or just use the fallowing code within the head tags of the site you want to use supersized on.


script type="text/javascript">

jQuery(function($){
$.supersized({

//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
start_slide : 0, //Start slide (0 is random)
random : 0, //Randomize slide order (Ignores start slide)
slide_interval : 6000, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 2000, //Speed of transition
new_window : 0, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 0, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //Disables image dragging and right click with Javascript
image_path : 'img/', //Default image path

//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center : 1, //Horizontally center background
fit_portrait : 0, //Portrait images will not exceed browser height
fit_landscape : 0, //Landscape images will not exceed browser width

//Components
navigation : 0, //Slideshow controls on/off
thumbnail_navigation : 0, //Thumbnail navigation
slide_counter : 0, //Display slide numbers
slide_captions : 0, //Slide caption (Pull from "title" in slides array)
slides : [ //Slideshow Images
{image : 'pics/001.jpg', title : 'Day 3 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/002.jpg', title : 'Film by Emily Tebbetts', url : 'about.html'},
{image : 'pics/003.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/004.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/005.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'}
]

});
});

/script>

Looking at the javaScript we can see that there is the possibility to set the start slide variable to "0". As a result the fullscreen background slideshow starts with a random image.
As we can see at the variables above there is a great number of possibilities to tweak the appearance of the background slideshow.

Drag and drop in web applications

Modern web applications often have drag and drop interfaces that allow the user to change the layout of a page (like order and place of menu elements), organize personal content (like files and folders) or express selections by movement of control elements. Users are used to such operations from desktop applications, making such web applications easier to understand and use for less tech-savvy users. HTML5 provides built in capabilities for basic drag and drop operations, but usage of of browsers that support HTML5 is still rather low. The usefulness of HTML5 grows every day, but as long as Internet Explorer 6 is still used developers need to look for alternative solutions for many cases. To make an application work on legacy browsers, one must work around the limitations of HTML, which was originally designed for static web documents. While HTML offers rich capabilities to format the contents of a document as you write it, the elements displayed on a HTML page are immutable and don't allow the user to change or move them as he browses the page. The bottom line is that drag and drop can't be implemented by pre-HTML5 HTML alone and requires some external technology to work.

Full screen random background images on a website

As mentioned above the challenge is to have full screen background images on a webpage. The images should be chosen from a pool of images randomly. Everything needs to be browser independent. There should not be some CSS3 because IE does not handle CSS3 well enough at that time.

Taggings:

Creation of an iTunes-Link of a specific artist/album/song

The core problem of the challenge is the creation of the iTunes-Links. The links should include the correct artist, album or song and the personal iTunes-ID, which makes it possible to earn commisions. Furthermore, the embedding of the "buy-button" on a website is necessary to solve the problem.

Pages

Subscribe to html