-
01
-
02
-
03
-
04
-
05
Loading Spenser Li Portfolio...
You have reached the personal portfolio of Spenser Li. Here you will find everything you need to know about Spenser Li as a front-end developer, including samples and working histories, and learn the professional skills and experience of him which may eventually be an asset to your company.
Please simply follow the "Next Chapter" link below or use the slide navigation on the left to browse this website. You can also swtich language by clicking the language link on the bottom of this website. Thank you and enjoy.
As a developer AND an artist, I am constantly evolving and I honestly see no limits to what I can create with the art of front-end web developing. My resume (120kb, PDF format) can be found here. And definetly you can browse this site to find more about my skills and work.
Spenser Li 李蓓卿
brownkuma@gmail.com
Call: (+86 21) 135 6406 9856
您现在正在阅读李蓓卿的在线档案。在这里您能通过他的作品展示和工作履历，发现他的前端开发技术与经验能为您的公司带来的潜在价值。
请您点击下面的“下一主题”链接，或通过左侧的滑动导航来浏览本站。您也可以从页面下方的语言选项中切换浏览语言。感谢您访问本站。
作为一个开发者兼画家，我总是在不断磨砺自己，并且在前端开发和网站设计领域毫无保留的发挥自己的创造力。您可以在这里下载我的简历（120k, PDF格式） ；也可以通过浏览本站，查阅我技能和工作经验的详细信息。
Spenser Li 李蓓卿
brownkuma@gmail.com
电话：(+86 21) 135 6406 9856
I'd love to use this site as a sample to interpret my proffessioal skills.
I fully undertand the specs of HTML 4.0, XHTML 1.0 Transitional/Strict and XHTML 1.1, and have much experience in wrtiting semantic HTML documents. And I understand the concept of user accessibility and write strictly under its specification too. View source code of this page.
I fully understand the specs of CSS 1, CSS 2 and CSS 3 Draft. And I have much experience in carrying out any web designs - no matter how complex they are - into real functioning webs pages. I'm also familiar with CSS architects which is very helpful in team collaboration. View CSS of this page.
I have much experience in JavaScripts, not only in coding, but also in architect as well. I'm able to write highly reusable JavaScript modules that can handle many tasks within a page (in some cases even between pages), to make a page more interactive and user-friendly. By using JavaScript architects, I can also make team collaboration more efficient. I'm capable of writing my very own Javascript framework too.
As in this page, all the animations were written with JavaScript. Usually effects like this can only be achieved by using Flash or similar methods. And I used delayed loading in some sections such as Creative Design and Art Portfolio. The same technique is widely used in front-end applications like Gmail or Microsoft Live Search in order to save user resources.
View source code to see how so much complex yet wonderful effects work without any Flash used.
Next > Experience in Cross Browser Developing
Prev < Experience in XHTML & CSS
我不仅有相当的JavaScript开发经验，并且熟知JavaScript架构。我能独立编写可高度复用的JavaScript功能模块，大大提升某个页面（甚至某些页面间）的用户交互体验。通过应用JavaScript架构，能大幅提高团队协作开发的效率。另外，我也能自行开发JavaScript框架。
以本网站的动画特校为例，它们全部由JavaScript编写而成。通常为达到同样的效果，只能使用Flash或类似的工具。另外本站部分页面，例如创意设计和画作展示还使用了按需加载技术，以优化客户端加载。同样的技术也被应用于Gmail和Microsoft Live Search等大型客户端应用上。
您可以点击查看本页的JavaScript源代码，体会下不使用Flash也能创造出复杂动画效果的奥妙吧。
I've been doing web pages ever since I entered university. In my 8 years of front-end developing, I encountered various browsers from old Internet Explorer 5 to the most up-to-date Google Chrome. Plus I own both PC and Mac, I have much experience in dealing with browser capability issues, in the form of CSS, HTML and JavaScript - not only CSS hacks!
I'm capable of making a strong enough web pages that look and funcion uniform in all kind of browsers in all major operating system and all major media like screen, print, handheld systems or projections. Even for text browsers like Lynx, I can still make it accessible following WAI (Web Accessibility Initiative) specs. That means, the web pages I make also have good crawlability to search engines.
This page has been tested and works great in the following browsers:
Next > Familiar with XML and XSLT
Prev < Experience in JavaScript
我从刚入大学时就开始钻研前端开发技术，至今已经有8个年头，期间和各种浏览器打过交道，从已经几乎绝种的 Internet Explorer 5 到 最近的 Google Chrome，加之我拥有一台Mac电脑，所以我对处理不同平台不同浏览器的差异（其中包括 CSS, HTML 和 JavaScript, 而不仅仅只是 CSS hack）有相当丰富的经验。
我编写的网页有足够的健壮性，能在主流操作系统，主流媒体（如屏幕显示、打印、移动设备及投影仪）上的各种浏览器上保持显示和功能一致。因为严格遵循WAI规范，即使使用像Lynx这样的纯文本浏览器也能正常浏览。这意味着网页对采用类似技术的搜索引擎相当友好。
本网站经过以下浏览器的测试，并做到用户体验一致：
I'm familiar with the specs of XML, XML Namespaces, XML Schema, XSLT, XPath, XQuery and other XML related techniques. Although I don't use those very often in my previous jobs, I still have a firm hold of those knowledges and have experience in using them in various projects.
Here is a sample RSS feed page I did for my personal art website BEFORE RSS was getting largely supported by popular browsers. Basically I used XSLT to parse an RSS page (which is a specific form of XML page) to make it into an HTML page that ready to be displayed by any browser. This is EXACTLY the same way how Blizzard Entertainment present most of their web pages.
You are welcome to view the source code of this XML and XSLT. Please note the original RSS codes were slightly altered in order not to triger the built in RSS parser of modern browseres.
Next > Experience in Creative Design
Prev < Experience in Cross Browser Developing
我熟悉XML, XML Namespaces, XML Schema, XSLT, XPath, XQuery等各种XML相关规范。虽然在以前的工作中并没有很多机会应用这些知识，但是我仍旧有能力将其应用到其他项目开发中。
早在各主流浏览器支持RSS之前，为使当时的主流浏览器都能支持显示RSS，我就曾为我的个人网站设计过一个RSS更新的页面。本质上来说，这个演示页面就是使用XSLT将RSS文件（一种特殊的XML文件）解析成所有浏览器都支持的HTML页面。这也正是 Blizzard Entertainment 打造网站的方式。
您可以点击链接查看该演示的XML和XSLT源文件。RSS的XML源文件经过小小改动，以避免启动现在主流浏览器自带的RSS解析功能。
One of my largest advantage compare to other graduates in computer science is, I'm much experienced in creative design, in terms of both graphic and interaction.
I believe that a good design is made of a lot of small things. Take this portfolio website as an example, you can find the following interesting features:
Other than the features above, there are also other small features to make this design fun and interactive. Find them out! :) And view my art portfolio for more infomation on my graphic design.
Next > Experiences in Team Managing
Prev < Familiar with XML and XSLT
与其他计算机专业人士相比，我最大的优势之一是在创意设计方面（包括平面设计和交互设计）一样有丰富的经验。
我认为好的设计必须在细节上做足功夫。以本网站为例，细节上有以下特色：
除此之外，本网站还有许多交互细节，您可以在浏览网站的过程中细细体验。除此之外，您可以在这里查看我的画作。
In 2006, I was promited as the project manager of a front-end team which includes 2 web designers and 2 developpers. And in my current company, I work as chief front-end architect and lead the front-end team of one designer, 2 developers and a tester.
My duty as a project manager involves communicating with other teams like production team and back-end developing team, and directing my team, making specs work schedules and offer technique supports. My current employer is an American so my daily job requires verbal and written communication in English with the management team. I am confident in my skill in communication in English.
Next > Work History from 2007 to 2008
Prev < Experience in Creative Design
我从2006年以来就开始管理一个由2名web设计师和2名开发人员组成的前端团队。我在现在的公司任首席前端架构师一职，并作为项目经理指导一个由1名web设计师，2名开发人员和1名测试人员组成的前端开发团队。
作为项目经理，我的职责对外主要是联系其他团队，如产品团队和后端开发团队；对内主要负责指导团队工作，制订工作进度以及提供技术支持。我现在的雇主是美国人，在日常工作中经常需要使用英语进行书面和口头交流，因此我对自己的英语交流能力十分有信心。
Next > Work History from 2004 to 2007
Prev < Experiences in Team Managing
Next > Website Portfolio
Prev < Work History from 2007 to 2008
The latest website I directed and developed is Wo de yi chu. My clients covers China Telecom, China Mobile, China Unicom, Alcatel-Lucent, Shanghai Metro Inc, and the People's Government of Shanghai.
Here is a brief list of websites / browser applications I made for the clients above (in Chinese):
我的衣橱
中国移动彩铃业务网站
中国移动一机双号业务网站
中国联通炫铃业务网站
上海贝尔阿尔卡特服务器管理系统
上海申通地铁公司网站
上海地铁监控系统
上海外宣办网站
五洲集团内部业务网站
See what professional skills were involved in my works.