Web Page Analyzer - free website optimization tool website speed Free Website Performance Tool and Web Page Speed Analysis Try our free web site speed test to improve website performance. Enter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Help Speed Up the Web Tired of waiting for slow web sites? <a href=" Page Analyzer</a> - Free web page analysis tool calculates page size, composition, and download time. Consider optimizing your site - with our Website Optimization Secrets book, contacting us about our optimization services, or our Speed Tweak tutorials. Related Website Optimization Services Try our targeted services to optimize your web site's ROI. Version History See the version history for all revisions.
Simple 2 column CSS layout This is a tutorial on how to use CSS to create a simple two column layout. If you want to create a three column layout, read on as this tutorial explains a basic concept that can be used to create as many columns as you need. When you’re done, take a look at How to create a 3-column layout with CSS. The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. To see the full CSS used for each step, view source on the example documents. 1. First of all, we create the basic HTML structure: After that, we put some content in the different sections: <div id="wrap"> <div id="header"><h1>Document Heading</h1></div> <div id="nav"> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> ... Now we have a completely unstyled HTML document which is structured in a way that lets us use CSS to control its layout. View step 1. 2. View step 2. 3. After that it’s time to give the content area a width and center it horizontally. View step 3.
Dominique's Weblog About gathering web 2.0 personal data into one safer place Everyday web 2.0 application holds our personal data into proprietary servers. While hosting providers could offer dedicated machines, I imagined once that, in a perfect future, I may rent a server for hosting my own personal data and let authorize web 2.0 applications to operate on such data. While reading recently a French paper on semantic web (Le web sémantique ou l'importance des données liées), I have found an interesting idea [from David Larlet] about such dedicated data servers. " Personal data represent currently the value that an application get while offering its service, often a "free" one. In most cases, you can't get back this value without being a geek, then it would be lost in case of policy change, bankruptcy, database crash, etc. While such box gathers more and more services over time, within medium-term, such box will have its own IP(v6?) This may going to change web application landscape. Here are few ideas.
Barrierefrei zum Mitnehmen: Einfach für Alle Ein Argument gegen barrierefreie Layouts war bisher immer das langweilige Aussehen und mangelnde Unterstützung der Accessibility–Features durch die verschiedenen Browser . Wie so oft zeigt sich das Web auch hier wieder von seiner besten Seite: mittlerweile haben viele Webdesigner stabile Layouts entwickelt, die teilweise sogar bis zu den 4er- und 5er- Browsern abwärtskompatibel sind. Layouts , die ein modernes Aussehen der Seiten auf den gängigsten Browsern garantieren und für kommerzielle Anbieter auch werblich einsetzbare Lösungen bieten. Und das Beste daran ist: die Entwickler stellen diese sogar kostenlos zur Verfügung, so daß Sie diese Bausteine für Ihren Webauftritt nutzen können. Sie finden hier eine ganze Reihe von Vorlagen, die Sie für Ihre Arbeit einsetzen können. Trennung von Inhalt und Verpackung: Sie sind konsequent ohne Tabellen aufgebaut und nutzen so die Standards HTML und CSS komplett aus, um eine anspruchsvolle und doch flexible Darstellung zu ermöglichen. CSS Enterprise
"Why is your desktop app not a web app?" While it may seem that everyone and everything is running on the web and mobile phone, what's the place for desktop applications? Is there one? How big is it? My hypothesis has been that the place of the desktop is simply becoming more clearly defined, rather than becoming less important. I then asked a number of technical leads of large desktop projects why they weren't creating web applications instead of desktop applications. Their answers can be read below. Jean-Claude Dauphin, UNESCO, creating J-ISIS, a bibliographic storage/retrieval system: It's mainly related to UNESCO's initiative to help reinforce the capacities of developing countries. Tonny Kohar, Kiyut, creating graphic applications, such as vector drawing programs and photo filters: Some applications require heavy interactive UI which, at the current stage, web applications are not cut out for. Dale Thoma, Saab Systems Grintek, creating applications for the South African National Defence Force: Rich functionality.
Hovereffekte mit CSS-Sprites Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden. Bei Menüpunkten passiert es oft, dass eine Grafik nachgeladen werden muss, wenn man mit der Maus über den Link fährt. Stefan David zeigt, wie solche Hover- bzw. Mouseover-Effekte ohne unnötiges Nachladen realisiert werden können. Hovereffekte, also eine Veränderung der Optik von Links beim Überfahren mit dem Mauszeiger (Mouseover-Effekt) sind häufig anzutreffen. Behoben wird dieses Problem mit der weniger bekannten aber nahezu ebenso einfachen Technik, die im Englischen unter dem Namen CSS-Sprites bekannt ist. Ausgangslage Wir haben eine Liste von Links, beispielsweise eine Navigation: <ul id="examplenavi"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">... Für den Hovereffekt benötigen wir nur eine Grafik, beispielsweise die hier verwendete link-bgr.png (Abb. links). Siehe das Beispiel. Bugs
The WebM Video Format – the Saviour of Open Video on the Web? | I don’t think I’m exaggerating when I’m saying something really really important has happened for the future of the Open Web. Finally, it looks like there might be a solution to the video codecs and patent encumbered alternatives we have been dealing with. Background About two months ago I wrote What Will Happen To Open Video On The Web? and expressed fear for the future of video on the web, and that the H.264 codec will never be something solid to build on, due to it being heavily patented. Introducing the WebM project Today at Google I/O 2010, Google announced the WebM project, which is, simply put: …dedicated to developing a high-quality, open video format for the web that is freely available to everyone. In more detail, it is a video format consisting of: VP8, a video codec released today under a BSD-style, royalty-free license (owned by Google from their acquire of On2 Technologies).Vorbis, open-source audio codec.A container format based on Matroska. What this means Who supports this?
Expanding Nested Lists This technique uses a nested list, some simple javascript, and CSS to create a expanding "tree" effect. It seems to work fairly well, but there are some issues, as I discuss below. Mostly, I haven't had the time to explore all of the issues. Feel free to send feedback to karlnelson@earthlink.net. The JavaScript function toggle(id){ ul = "ul_" + id; img = "img_" + id; ulElement = document.getElementById(ul); imgElement = document.getElementById(img); if (ulElement){ if (ulElement.className == 'closed'){ ulElement.className = "open"; imgElement.src = "opened.gif"; }else{ ulElement.className = "closed"; imgElement.src = "closed.gif"; } } } The HTML The HTML looks worse than it is. The CSS Issues Horizontal Spacing of Text. Accessibility. More on Accessibility... Michele Ide-Smith of Green Cathedral sent me a note about accessibility and this technique: I have tested your code with Connect Outloud which is a cut down version of Jaws for Windows (a popular screen reader) and it performed very well.
How do you convince the average web user to switch to a non-IE browser? As web designers and developers, we love to see how our sites and web apps look and function using a really good browser. It’s true that with the release of IE9, Microsoft has made great progress in the so-called browser wars. And although IE9 is a fast and reliable browser that has pretty good support for CSS3 and HTML5, there are still quite a few missing technologies that we all would like to see in Internet Explorer soon. But the reality is that while we as developers know that the user experience is greatly improved when a site is viewed in Chrome, Opera, Safari, or even Firefox, our users are not aware of this. Personally, I always do what I can to promote the good browsers. I had this experience recently when I went to my friend Alex’s home for dinner. “Why do you use Internet Explorer?” One of the first things I did was ask Alex some questions about his feelings towards browsing the web, and the software he uses. “Why do you use Internet Explorer? “No, not really. “No. Oh, dear.
Styling <hr> with CSS Introduction Even though it's sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet. On the other hand, simple, unstyled <hr> does not look good in richly styled documents. Which properties work Various CSS properties can be applied on <hr>: All three browsers allow setting width and height of the <hr> element. Examples Now, let's take a look at a couple of examples. so all rules are 80% wide and should have no initial borders. Let's add colors If you want to show a solid, red line, use the following code: color: #f00; background-color: #f00; height: 5px; and you get this result: Notice, that you have to use both the color and the background-color properties — the former for IE, the latter for Opera and Mozilla. Thin, red (unfortunately black in Opera), solid line, 1px high: Notes
The Rise Of The API, The Future Of The Web Last month, Twitter and Facebook made some moves to hide RSS feeds and put focus more on their APIs. There was the typical ranting that followed the news, some in favor of RSS and others not. Now that the conversation and controversy of RSS being killed again has died down, I wanted to address the real question behind Twitter’s and Facebook’s decisions. The real issue at hand is the evolution of the web. If you focus on a single web application, you would never find a reason to really move away from JavaScript and JSON. 73% of the APis on Programmable Web use REST. Granted, this is a biased sampling because Programmable Web is focused on public web application APIs. Some of the data format questions can be answered by other means as well. One important reason for the rise of APIs is that REST’s simplicity has allowed almost anyone to define an API. API usage is heavily determined by how easy it is to start programming against the API.
CSS Code Snippets For all it’s many advantages, sometimes it’s the little things that CSS layout makes difficult that really get to you. A logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. snippets on how to avoid easy pitfalls when creating your CSS layout, some of the following snippets are cross browsers while others are not. This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better methods, then post a comment below or email me so we add it in this series. 1. By Drew Douglass. 2. “Internet Explorer 6 is the only browser that recongizes the “* html _____” selector and thus is the only browser to read the hard-set height. of “height” as a min-height. href=" Walsh Another way to do this and make it valid CSS: 3. 4. html_files_with_a_user_stylesheet/">Roger Johansson 5.
NekoHTML