Web BorG: Web design

Showing posts with label Web design. Show all posts

9/07/2008

Making "Post" and "Get" forms from SharePoint’s pages

Recen project we were working on needed some forms to be posted to certain services. Knowing that SharePoint's pages are one big form and you can't nest another form inside another this starts becoming a problem.

But I remembered a while ago I was watching how the guys over at MSN spaces did it with the "Blog this" functionality. So based on this I've made similar script and methodology so you can create "forms" that make POST or GET from within SharePoint's Pages. The script is not fully automated, since it directly works only in IE, but with minor additions specific to your form, you can get it working easily in other browsers also.

Read all about it over at my new blog

4/11/2008

Edit your photos online

If you need a quick fix on one of your photos or images, and you don't want to install any additional software on your computer, you can use the online PhotoShop Express. Check Jose's review and links to the solution. It's free and it's very good.

But there is another online service for modifying your pictures that I believe is also very good: It's called Picnik. You can find it on www.picnik.com.

There are some really nice features:

1. You don't have to signup or register to upload and edit picture
2. Lots of basic tools like Auto fix, Rotate, Straighten, Crop, Resize, Fix exposure, Sharpen, Red-eye removal, ...
3. Lots of effects for your photos

4. You can put texts, shapes, frames on the images
5. You can edit curves and color levels (for premium version only)
6. lots and lots of other stuff
7. If you want to experiment with the tool, it has some sample images for you to try the tools
8. It can connect to Flickr, Picasa, FaceBook and other online photo services, or you just upload your photo

Below is a sample that I made in just a couple of minutes using auto fix, exposure fix, rotate-straighten, added shape, text, some radial effect and drop shadow border and resized image:

I recommend you to visit the site and try it yourself.

Oznake ponudnika Technorati: free tools,online,photo editing,pictures,photos

4/07/2008

The quick way to preload images

If you use background images for hover effects with CSS (for example links hover effects) in IE you don't get a nice effect, because the "mouseover" image is always loading, creating a "gap". So it's good to have the "mouseover" images preloaded. There are numerous of ways to preload images, but usually what I'm doing is loading those images in a hidden layer. For example: if you have a css:

a.menu { background: transparent url('menu_off.gif') no-repeat left top }
a.menu:hover { background-image: url('menu_on.gif') }

you'll want to have the images menu_off.gif and menu_on.gif preloaded. The way I'm doing it is by adding to the top of my webpage right after the <body> tag the following code

This will put the two images loaded in a hidden layer and thus keeping them preloaded. And because this layer is right at the beginning of the page, you'll have the images preloaded first.

Oznake ponudnika Technorati: CSS,Design,Web Design

3/11/2008

Are you a web designer? Want to get sponsored?

I'm happy to announce that in our company we're making effort to contribute to open source and design community. We're looking to sponsor web designs that will be free to use.

If you are interested, you can find more information on Web Designers Sharing Point.

There are already some members in the community, the latest one is Andreas Viklund.

As the result there are already two templates available free to download:

1.Internet Studio

Download - Check sample

2. Small Corporation

Download - Check sample

There will be more to come. If you wish to participate and get sponsored, please visit the blog and contact Jose.

Oznake ponudnika Technorati: Web Design,free templates,css

11/18/2007

Using parameters from URL as variables in XSLT Data View

This is a reply to PsychedEric in my post about QueryString. To use params from URL in an XSLT data view is quite simple. Once you have the data view inserted, display the options of the Data View and click on Parameters.

Next click the button "New Parameter" and enter a name for it. Then in a Parameter Source dropdown, select Query String.

Under the dropdown enter the variable name - which parameter in URL to read. For example if it will be reading parameter "p" in url webborg.blogspot.com?p=1234 just enter letter p. You can also set a default value if there is no p parameter in the URL.Next click OK.

And that's it. Now you can use this parameter for filtering, or in the Data View Web part as you desire. If you want to use the parameter in the DataView just enter its name with a $ (dollar) sign before it. SharePoint Designer's Intellisense will recognize it.

10/07/2007

Great tools for web developers pt. 3

The third in the series of tools for web developers is for the ones that don't want or don't have the option to install any software or addons and just need a quick access to a tool for inspecting DOM

1. Mouseover DOM inspector v. 2 - MODIv2

This thing is pure JavaScript, DHTML and CSS so you really don't need anything else for inspecting a DOM of a certain page. All you need is to bookmark a link on the help homepage:

And then go to the page you want to inspect the DOM, and next just call the script from your favourites.

And you're already exploring the DOM.

It doesn't contain as many tools as the previously described toolbars, but it's a very good solution for quick start and instant DOM inspection.

Technorati tags: web development, web design, DOM, html, css, javascript

Great tools for web developers pt. 2

In my previous post I've presented a tool that I find very useful when debugging display, creating javascript related to HTML DOM, etc. The tool is intended for Internet Explorer. The FireFox users aren't deprived of such tools either. There are two tools available:

1. Web developer toolbar for Mozilla Firefox

It offers quite a wide array of tools for web developers, such as ruler, css validation, DOM explorer, etc.

It has a nice feature when exploring DOM - it displays all the parrent elements - so you can see how any element is nested.

A neat add-on to that feature would be to be able to pause the selection and view the nested DOM, since there are a lot of times too many nested elements and the text goes out of the screen.

2. Firebug

A good combination of both - ie and firefox dev toolbar, it has very good tools for debugging HTML, CSS and JavaScript. What I like about it is that you can select the elements and it automatically also selects the HTML. And to manipulate the HTML, JavaScript and CSS in real time is very easy.

What I like about it is that it is easy to use, it has ability to monitor, debug and execute JavaScript, it helps with visualising some of CSS properties, and its toolset is nicely organized and easy to use. On the image below you can see how easy is to manipulate HTML in real time.

The problem of displaying too many nested elements is solvet neatly with a simple solution: the elements are ordered in opposite sense - it displays nested elements from right to left - instead of html > body > ... div it displays div < ... < body < html.

These are some neat tools that may make your life easier. I recomend using them all together because you know what headaches the IE/FireFox display compatibility can cause :)

Technorati tags: web development, web design, css, firefox, javascript, html

10/04/2007

Great tools for web developers pt.1

Many times to refference or change the the element's properties in a DOM of a web page, I was just going crazy. Especially in SharePoint this can be difficult, because some elements are nested DEEP within other elements (table > div > div > div > ... > input).

You can help yourself a bit with javascript:alert() or by viewing code, but there are tools to make your life as a web developer much easier:

1. Internet Explorer developer toolbar

This tool is a super add-on to Internet Explorer, with which you can easily explore the dom elements and their properties simply by mouse over and click.

Some screen shots

It has lots of other neat features like visual display of class and id info, outlining certain elements, disabling styles, images, clearing temporary files, etc. I especially like the color picker and the ruler, enabling you to select colors or to measure width or height of anything directly on the screen!

Color picker

Ruler

9/06/2007

Preloader image for ajax and similar web applications

I started to create my first ajax-like web application and I was looking a good site, where to find animated gifs.

After a while I've found a great site, which not only offers animates gifs, but actually you can generate the loader alone, selecting the foreground, background and style of the preloader.

Click here to get (generate) your preloader image.

Technorati tags: javascript, web development, web design, ajax, loader, preloader

8/17/2007

Resolving the "Unable to display this Web Part" problem after SharePoint Designer restore

If you've restored the SharePoint site using commands Site --> Administration --> Restore site and this site had special XSLT data views you may be in for a big surprise!

You can receive the following message:

Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator.

Or in Slovene language

Spletnega gradnika ni mogoče prikazati. Če želite odpraviti težavo, odprite spletno stran v urejevalniku HTML, združljivim s storitvami Windows SharePoint Services, kot je program Microsoft Office SharePoint Designer. Če težave ne morete odpraviti, se obrnite na skrbnika spletnega strežnika.

The problem is that while restoring the site, SharePoint designer doesn't correct the GUIDs of lists being used. For example: You're having an XSLT data view of a list called Contacts. When restoring SharePoint designer creates the list with a new GUID, but it uses the old GUID (from where the backup was made) of the list. The solution is simple: Fix the GUIDs of lists used in dataviews:

1. Open the Manage content administration page of your site (http://server/site/_layouts/mcontent.aspx)

2. Copy the shortcut of the list being used in XSLT to clipboard

3. In the URL you'll find the new GUID of a list between brackets ( in http://server/site/_layouts/ListEdit.aspx?List={89D731E5-0538-4999-B4AF-D7A5D9EA781F} the GUID is 89D731E5-0538-4999-B4AF-D7A5D9EA781F

4. With SharePoint Designer open the page with XSLT data view and search for term ListID in the code.

5. Select the value of the ListID parameter. It should be the GUID of the list (either in ListID="....." or in the same tag, look for GUID-like numbers.

6. Prest CTRL+H for Search and Replace with the value still selected. It will automatically populate the "Find what" field with it. Now paste the copied URL with GUID in the "Replace with" field and remove all but the GUID. Make sure you have the "Find in Source Code" option checked.

7. Now just press the "Replace all" button and your XSLT data view will magically come to life :).

I hope that this bug will be fixed with next version of SharePoint Designer, or maybe can develop some kind of plugin for that procedure to speed up the process for all the pages. I know that with FrontPage this wasn't happening.

Technorati tags: sharePoint, backup, restore, SharePoint Designer, Data View, XSLT, GUID

8/14/2007

Access server different server with certain host name - build a new site while current still exists

The upgrade from Windows SharePoint Services 2.0 to 3.0 gave us in the company the opportunity to reconstruct some of the sites. The issue was that while the new site in WSS3 was in development, the site in the current server would stay active.

With version 2 this wouldn't be a problem. While having the existing www.site.com we'd create a new SharePoint site with the same host header and add a host header like new.site.com and work on it using new.site.com, while the DNS server is still pointing to the old site with www.site.com. At the end you just need to change dns for www.site.com.

The challenge comes with the version 3.0, because it's bound to host headers. Therefore it's best to work with the original host header from beginning. So how to build a website on a new server with a host header www.site.com while the other one still exists?

One alternative is already described in one of my previous posts.

The second alternative is to set up a DNS server to point to the new IP with the existing domain and use it like primary dns server on the development computer. Not practical - just to sacrifice the whole DNS server for one site.

My friend Miha - who in my oppinion should have a blog for all the great stuff that he advised me untill now - showed me even a better alternative. The third - best - alternative is that you trick your Windows XP or Windows Vista that www.site.com is on a certain IP - therefore server. Let's say for example that the existing site www.b4business.si is on IP 123.123.123.123. And the new server where we want to develop the site is on IP 123.123.123.321.

All we need to do is to edit the hosts file, which is located in c:\windows\system32\drivers\etc folder. At the end add the hostname (domain) and desired IP. - like in the picture below:

In Vista you have to have administrative rights to edit that file. After you've updated the hosts file, flush the DNS resolver cache (Start --> Run --> ipconfig /flushdns) and the the hosts file overrides any dns. Now you can edit the www.b4business.si on a new server.

When the site is ready, change the DNS to point to the new site and don't forget to remove the entry in hosts file.

Update: I've had the path to the file wrong. Now it's ok.

Technorati Tags: web design, DNS, domains, host headers, web development, sharepoint

7/07/2007

Another great .flv flash video player

In one of my previous posts I've already explained how to publish your own video on web pages (still a bit difficult in SharePoint blog :( because it gets filtered out). I've come across another very good .flv flash video player. It's published under creative commons licence and it's free for non.commercial use. What I also like about it is

that it has an online wizard for creating the embed code with all the configuration you need.
supports playlists
highly configurable
supports image previews
etc...

Below is a sample video..

6/06/2007

More options for creating a favicon

In my past post about creating favicon online nicolas sent me a comment with a link to another good tool for creating favicons. It's a favicon generator from images. All you need to do is to upload 16x16 or 32x32 .gif or .png file and it will generate the favicon for you. You can find this tool on Web Script lab.

If you have Paint.net, you can also download a plugin that will save your image like a favicon - so you can make your favicon also offline.

There are many options also online if you don't want to make your favicon. One is to search for them. I've also found one favicon gallery.

All this talk about favicon. And how to insert the favicon? If you have a favicon file named favicon.ico in the same folder that the web page you're trying to add it to, in the head if the page add the following line of code:

<link REL="SHORTCUT ICON" href="favicon.ico" type="image/x-icon">

4/08/2007

Create favicon online

Usually for websites we just have to create the favicon only once. So it's a bit of unuseful to download and install extra software for this (even though we can make the icons with paint.net)

For one time ocasion you can draw or create the icon from an image file online. Here's an online icon-maker.

3/24/2007

A good starting point for creating web designs

A w3c recommendation is that for website layouts and design layers should be used instead of tables. In lots of WYSIWYG HTML editors you don't get the built-in functionality to easily create layout with layers.

So I've found a very good starting place for creating a website. It's a set of "wireframes" from which to build your web page layout.

They're using XHTML and CSS.

Click here to visit the site and get the CSS templates.

2/06/2007

Create comics online

Lately I'm noticing lots of sites passing information in a new way - with the aid of comic books! I like the Idea! Below you have some samples:

The Meatrix

The Enchanted Office

Genuine Fact Files

Creating (static) comics is no problem for mac users, While there also exists some programs for Windows I've found a very nice online service that lets you create simple comics - online. You can even create comics anonymous. But registration brings benefits, like strip blogging, Here is a simple example that I've created in minutes.

2/01/2007

Embed videos in your page

Google Video, SoapBox, YouTube and some others nowadays offer you a grrrreat way to publish your videos online and embed them in your site. But each embedded video has the logo of the service provider. You can also embed your own streaming video with all the free tools.

Step 1. Record and edit the video. For editing you can Windows Movie Maker is a super tool. Here you can learn a lot about Movie Maker.

Step 2. Encode your video into flv. For encoding I've discovered a great free tool: Riva flv encoder. With this tool it's really simple to encode the flw so if you can't afford Flash with video encoder, this is a super alternative.

Step 3. Upload your .flv. Use your website space to upload the flv video.

Step 4. Embed a free video player. Jose found a very nice looking online flv embedable player on Advanced Flash Components. We're also using the commercial version on www.prazniki.net. Here's a link to the free embedable flv player. There you also find the instructions on how to embed the player into your website.

Below is a sample for one of the videos that I've edited on the fly some time ago for B4Learning - now is Piflar's Web.

Technorati tags: web design, multimedia, video, embed, flash, flv

1/28/2007

IE 6 can support transparent png

Even though the new IE doesn't have problems with semi-transparency in png images we would believe that we still have to be careful - a lot of people is still using Internet Explorer 6. In my previous posts I've already shown that one solution is to use additional CSS for ie6 and older.

I've found that with the help of a simple JavaScript fix also the old IE can display transparent pngs properly.

Read about how to enable transparent png-s in Internet Explorer 6 and older here.

We still need a separate CSS for other incompatibilities :)

Technorati tags: web design, css, compatibility, internet explorer, transparency

1/20/2007

Some good resources from Adobe

Probably you've noticed that the topic of the month for me is the cross-browser compatibility. So here's an additional resource from Adobe. Community based portal where you can get a lot of experience from others, facing certain problems with CSS. And it's well categorized also.

The site is called CSS Advisor. Already in my bookmarks. Thanks, Jose for the tip.

1/15/2007

CSS for different output (handhelds, print,...)

Thanks, Jose, for a good question. I've done some more digging and as a mater of fact we can make specific CSS according to the device the page is intended for. We can define CSS for different outputs, like handhelds, printing, screen, even projectors, etc. using the media type. Below's an example for first inserting the CSS for all output and then additionally adding the separate CSS for printing.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="printing.css" media="print">
</head>
<body>
...

Another method is in the CSS itself. Below is an example of writing specific styles for handheld devices and printing inside of the CSS file.

<style type="text/css">
@media = print, handheld {
    h1 { font-family: Arial; font-size: 0.8em; }
}

As seen in the example above, the Heading 1 is going to be with font Arial and size 0.8em.

Which options you have for output (most common used in bold):

all - for all media type devices
aural - for speech and sound synthesizers
braille - for braille tactile feedback devices
embossed - for paged braille printers
handheld - for small or handheld devices
print - for printers
projection - for projected presentations, like slides
screen - for computer screens
tty - for media using a fixed-pitch character grid, like teletypes and terminals
tv - for television-type devices

(source for above: W3Schools)

Even though there is a way to distinguish CSS for IE and other browsers, detecting them is a whole another story.

Technorati tags: css, compatibility, web design

Important notice