Hong Kong Adobe Flash platform developer (Flex, AIR and Flash)
Web Usability
Google 同 Yahoo! improve Flash indexing
03 years ago
今日 Google o係 webmaster central blog 公布左佢地已經 improve 左 Flash content 既 indexing power
所有 version 既 Flash content o係唔需要改動既情況底下都可以得到更好既 indexing result
同一時間 Adobe 亦o係 Adobe Developer Center 發表左 SWF searchability FAQ
裡面除左有耳熟能詳既 marketing slogan 之外
The openly published SWF specification describes the file format used to deliver rich applications and interactive content via Adobe Flash Player, which is installed on more than 98 percent of Internet-connected computers
亦有提及到背後既原理
以及 Yahoo! 都會於稍後 update search engine
的確~ 咁多年以黎 Flash 都比人彈 SEO
每一次我幫人做 project analysis 既時候
第一句都係問 “application base” 定 “content base”
今次呢個 news 的確幾吸引~
但係問題係唔係就咁就解決呢?!?!
我地係唔係唔再需要寫特登寫 XHTML version / XSL / 一大堆 supportive AS?!?!
言之尚早~!
At least… Munsang Biology web d content 仲未 index 到~ 哈哈
Anyway~ should be a great start!
詳情:
Improved Flash indexing by Google Webmaster Central Blog
http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html
SWF searchability FAQ by Adobe Developer Center
http://www.adobe.com/devnet/flashplayer/articles/swf_searchability.html?devcon=f1
點先算係一份好既 FYP?
04 years ago
by Vicker
in Web Usability
呢幾日睇左好多 Final Year Project~
發現左一 d 臥”獅”藏”蛇” (臥虎藏龍)…
有 d 平時唔顯眼既人寫 d FYP 真係勁到嚇親你~
睇左大家既 project 自己都學左唔少野~
諗返轉頭~ 點解 Final Year Project 既 presentation session 唔可以做到好似一個 conference 咁?
大家一齊睇人 present~ 大家一齊比 comments~ 甚至黎個公投~
咁樣相信大家o係 FYP 學到既野可以多好多倍~
自己係一個 Web Application Developer~
對於 Algorithm-based 既 FYP 我只可以講句 “勁”
但係望住一大堆只係為左滿足某一個 specific purpose 既 form-based application…
我覺得好無奈… 幾十甚至幾百頁 HTML 加 d Javascript 加個 database… 算 FYP 嗎?
我會覺得佢的確出左好多力… 但方向錯左…
Innovation 對一個 FYP 黎講好重要~ 但我著眼點係有無用過心黎做而唔係交行貨~
其實就算係一張 form~ 真係用心寫既都一定贏一個得個做字既 system~
有 d student 係好用心機 design form 的~
Real time feedback…
Auto complete…
Dynamic combo box content loading… etc…
就算平時我覺得小豬唔係 programming 既材料
我睇完佢個 demo 都覺得佢好用心諗過個 UI…
Inline field editing…
Apply all boxes…
都非常 user friendly~ 減少左好多 click 黎 click 去既問題…
簡單但係真係有切身地考慮過 user
呢點唔係最重要咩?
比起一 d 幾十種 feature~ 幾十張 form~ click 黎 click 去~ 又 popup 呀咁~
我更喜歡呢黎小豬的 design~ simple and clear
我唔敢話自己寫野 user friendly
以上只係我 as a user 既感覺~
但身為 developer… 應該要諗清楚~
Technology 重要? Challenging 重要? Innovation 重要?
最終個 application 其實都係 user 比分~
當然~ 有心去做先係王道~
Alternate Style Sheets
06 years ago
by Vicker
in Web Usability
When we designing our web site style, have we think about whether others like our style? I guess it is not possible making a style which suits everyone’s taste. So why not letting the visitor selecting his own style? That is why Alternate Style Sheets become an important function in a web site.
The idea of alternate style sheet is that we will first prepare a few different style sheets to be the alternate. And then providing a drop down box within the web page allowing the user to choose the style he / she likes. And the preferences are stored in the cookies, so the next time he / she returns will be browsing in his / her favorites.
This method is not simply talking about suiting someone’s taste. It is also raising the accessibility of the web sites which is suggested by W3C. Because we can design styles which have larger fonts for the elderly, or design styles which have simpler color combinations for the people suffering color blindness.
Although it increases the workload designing the styles, it worths.
Reference:
Alternative Style: Working With Alternate Style Sheets. [Online]. Sowden, P. Available: http://www.alistapart.com/stories/alternate
Aural Cascading Style Sheets (ACSS)
06 years ago
by Vicker
in Web Usability
Cascading Style Sheets (CSS) is widely used when developing a web page. It can be used in both layout and styling. However it is meaningless for the blinds. So are there any styles for the blinds?
Aural Cascading Style Sheets (ACSS) is the answer. Actually ACSS is not a new technology. It can be viewed as an add-on to the original CSS. The following are the commands supported by ACSS.
voice-family
speech-rate
pitch
pitch-range
stress
richness
By means of these commands, the speech produced by the disables assisting browsers like JAWS that I previously mentioned can be “styled”.
For example the following will make the browser reading the text in a woman high pitch voice.
Phantom of the Opera. Arrrrrrrrrrrrrrr~~~~
References:
ACSS: Aural Style Sheets. [Online]. Burns, J. Available: http://www.htmlgoodies.com/beyond/css/article.php/3470211
Blog Talk 2 – How to Implement Consistent Framework
06 years ago
by Vicker
in Web Usability
I think all of you have done the redesign assignment already and starting to write the report. When you are redesigning the web, I think most of you may have faced a certain problem in mind that is how to make all the pages consistent? As all the pages will have the same html opening tags, meta tags, linking of the style sheets, header navigation bar and the footer copyright declaration part. If I simply copy and paste it to every page, it is time consuming and not easy to maintain in the future. So I want to introduce a few methods here.
—————————————————————
1. Frames
I think I don’t need to talk too much about frames, it is just a standard HTML tag that is easy to implement. It will divide the screen into areas which each area will load it’s corresponding page.
The advantage is that it is server independent, any web hosting services can run it. However there are a bunch of problem using frames to achieve consistency which are shown below.
- Browser don’t know what to bookmark
- Opening the source will open the frameset but not the page
- Search engine will have problem crawling the pages
—————————————————————
2. Client Side Include
Include means that you will insert one page (in here HTML) into another one. For example, you may have a navigation menu which will appear in every page. So you can simply include the navigation menu page into every pages of your web site to achieve consistency. In here client side include means the include process is done on the client side which can be achieved using JavaScript.
Here is the JavaScript example:
<script type="text/javascript">
function print_header ()
{
var elem = document.getElementById (”header_content”);
elem.innerHTML = "<table><tr>...</tr></table>";
}
</script>
<span id="header_content"></span>
The advantage of using client side include is that it is server independent just like frame. Any browser which supports JavaScript will work. However there are a few disadvantages as below.
- Destroying HTML structure (if you look at the JavaScript structure, you can see that it is some sort of program and strings instead of standard HTML)
- Hard to maintain
- Search engine won’t be able to crawl because it is made at client side
—————————————————————
3. Server Side Include
In contrast, server side include is done by some server side scripting. It can be some simple ones like the SHTML or some complicated ones like PHP, ASP or JSP. The pros of server side include is that it can totally eliminate all the disadvantages in the previous methods. However the main disadvantage is that it is server dependent, and it is sad that CityU personal web do not support these.
The example of SHTML is illustrated below:
=> index.shtml
<!–#include file=”header.html”–>
<body>
……
</body>
<!–#include file=”footer.html”–>
=> header.html
<!DOCTYPEhtml PUBLIC “-//W3C//DTD XHTML 1.1//EN”"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-tw”>
More resources and tutorials
How do I include another file inside a HTML file?
How do I include one HTML file in another?
GoogleRankings
06 years ago
by Vicker
in Web Usability
I am sure many classmates are still trying their best to reach Google.
Here is another tool which I explored and it is quite useful. It is the GoogleRankings.
Although it is called GoogleRankings, it is not only focusing on Google. Actually it is a web application which can acheive the following.
1. Analyse the web given whether it has a well written source code. e.g. Has it used the TITLE tag, META description tag, META keyword tag, etc.
2. Analyse the web content, and resulting the most frequently used words within the content. (It will automatically skip the “stop” words)
3. Having a search in a few famous search engine and returns the web’s ranking and popularity based on the keywords.
Using this tool, we can find out whether our web have a good SEO state or not. If not, we can have some further modifications.
One thing to remind is that in order to use this tool, it is necessary to have a Google API key which is obtainable using any email within this web page.
Good luck being crawl~~!!
Google Sitemaps (Beta)
06 years ago
by Vicker
in Web Usability
I guess everyone already trying Andy’s CityU Web Hacker event. Usually what we can do will be simply using meta tag or submitting to those web engines. However, can we be even more active to direct the search engine to crawl our site?
Google Sitemaps (Beta) is a brand new technology from Google which allows web administrators to guide Google how to crawl our web!
The logic is very simple and worth to try! First you must own a Google account (e.g. gmail), login to the system. And then submit your web’s sitemap using XML format. The format of the XML file is detaily described here.
After submitting the sitemap, a simple verification is still needed before it really works. Finally after a few days, you can check the statistics it provided to see how and when google crawl your site!I am still testing this technology too, so anyone who works please share :p
Check Your Links~~!!
06 years ago
by Vicker
in Web Usability
Browsing around the web and found some old statistics from Search Engine Showdown. It is a short report about the dead links found in the famous search engines. You can have a look at here. Although the report is a few years ago already, it is still quite shocking. On average there is around 5% of dead links!
Dead links are really disgusting sometimes. For example, when you want to find a certain information on the web. After finding a few hours, you hardly got a link. However, it is dead… I am sure it is a disaster.
The presence of dead links have quite a number of reasons behind. e.g. the closure of a certain web, the typing errors, illegal link copying, etc. Are there any method to avoid them? The following are some tips.
1. Use more relative links.
The meaning of relative links are links that referring to the current path instead of the root. e.g. For absolute link, we will have something like “http://www.cityu.edu.hk/image/logo.gif”. For relative, we will simply say “image/logo.gif”, assuming that your document is one level upper than the image folder.
The advantage of relative link is that, even your web is transferred to a different domain, it still works. This is very useful for authors who usually edit the files locally and upload to server after editing.
2. Try not to link to other web’s file, copy them.
We will not know or notice when the other web move the file away or rename it. So if we have web space, try to copy it down and link to the local copies.
3. Using some link validator.
W3C Link Checker
Dead-Links.com
This will make the checking of dead links easier and faster.
Hope we will not see this in the future.
Blog Talk 1 – Color
06 years ago
by Vicker
in Web Usability
Within the area of web usability, one of the important part sure will be color matching.
First lets see an example here.
Hayden Video Weddings
If you really need some wedding service, I am sure you will not trust this one… Because if you dont look at the details, you will never know this is a wedding service… Even you want to see the text is very difficult. So sometimes color matching is even more important than the web content.
Lets see another example.
Beyond the Bones (Bad Example)
Actually this is a web done by an author who want to show the bad example only. Again, it is hard to see the text and it is too bright to look at it.
This one is the original document.
Beyond the Bones (Original)
You can see the great difference between the pages. So color matching is really important which will you affect you whether you will stay or simply browse away.
So how can you learn the secrets of the color combinations? Here I suggest some of the great tools.
The first one is Color Schemer Studio. It is a small application which you can create some color schemes from a single color that is chosen by you. And after you create the schemes, you can even use their tester to preview the resulting web.
If you dont want to pay for it, you can still have alternatives. Actually the company that produce Color Schemer Studio have made an online version – Color Schemer Online v2. Although the functions are not as powerful as the Studio one, it is very useful too.
Another one is a free tool – Web Color Theory. In here, you can do some drag and drop to test different color combinations. You can even test it in a web template similar as the Color Schemer Studio.
So next time when you design a web, try to use these tools to help you design the best color combos.
