HTML5+CSS3在触屏网站开发的实践与挑战

"HTML5+CSS3在触屏网站上的实践" HTML5和CSS3是现代网页开发中的核心技术，尤其在构建触屏网站时，这两者的重要性不言而喻。本资源是一个关于HTML5和触屏应用实践的PPT，由卞飞于2011年07月制作。该PPT探讨了当时触屏网站的发展现状，以及如何利用HTML5和CSS3进行优化，以提升用户体验。 在触屏网站的现状部分，PPT列举了几个关键的应用场景，包括机票搜索、酒店搜索、团购、列车搜索、景点查询以及用户中心。这些场景反映了触屏设备在日常生活中日益增长的影响力，并且强调了优化这些功能以适应触屏操作的重要性。 在整体架构上，PPT提到了一个由浏览器、VelocityServlet、Mobile Server、Map、Json组成的系统，这种架构允许动态数据的获取和处理，以提供更流畅的用户体验。前端结构方面，团队选择了结合Jquery这一成熟的JavaScript框架，来处理前端的切图和CSS工作，以实现更好的兼容性和交互效果。 在前端切图和CSS的经验分享中，PPT提到了以下几个关键点： 1. 调研阶段，团队考虑过纯HTML5+CSS3方案，但最终选择了混合方案，以确保兼容性，同时针对Nokia S60 V5提供单独版本，考虑到其对新技术的支持不足。 2. 实施过程中，团队利用CSS3的选择器如`:first-child:last-child`, `:first-of-type:last-of-type`来解决首尾元素样式问题，用`nth-child(n)`实现斑马条纹效果，利用`type="tel"`和`type="search"`改进表单输入体验，使用`input[type="search"]`优化搜索框，同时尝试了屏幕自适应技术，尽管在Nokia S60 V5上效果不尽如人意。 3. 在实际应用中，为了实现良好的触屏体验，团队注意到事件响应区域需要足够大，以便用户能够方便地触摸操作，同时设计需要兼顾人性化。 在前端JavaScript经验分享部分，PPT讨论了对四大移动Web开发框架（iUI, jQTouch, Sencha Touch, jQuery Mobile）的评估。由于这些框架的UI风格与项目需求不符，且缺少必要的组件，团队最终选择了在PC上已经成熟的jQuery，通过自定义实现如日期选择器、建议输入等功能。 在实施过程中，为了隐藏浏览器地址栏并使页面置顶，团队编写了相应的JavaScript代码，但在不同平台上（如Android和iOS）存在差异，需要采用不同的解决方案。 总结来说，这个PPT详细阐述了HTML5和CSS3在触屏网站开发中的应用，强调了技术选型、兼容性处理、用户体验优化等方面的实践经验，对于理解和掌握触屏网站开发具有很高的参考价值。