Drupal Front End Development
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Drupal Front End Development

  • 2,750 views
Uploaded on

2011年11月28,29日,我在上海信息股份有限公司做了2天的Drupal培训。在中国做Drupal有关的培训一直是我非常感兴趣的事情,之前我在美国IBM,纽约议员信息办公室,纽约Linux用户社区,旧金山DrupalCon等等。。。都做过Drupal培训。而能把我知道的有关Drupal的东西分享给国内的开发人员,这是件非常有意义的事情。...

2011年11月28,29日,我在上海信息股份有限公司做了2天的Drupal培训。在中国做Drupal有关的培训一直是我非常感兴趣的事情,之前我在美国IBM,纽约议员信息办公室,纽约Linux用户社区,旧金山DrupalCon等等。。。都做过Drupal培训。而能把我知道的有关Drupal的东西分享给国内的开发人员,这是件非常有意义的事情。

第一节课:
演示
(1)主题化与jQuery
(2)子主题化
(3)Omega子主题与960格
(4)Drupal视图模块与Drupal面板模块
(5)CSS与jQuery
(6)适应性设计
研讨会
(1)创建你自己的子主题
(2)添加你自己的CSS与JS文件

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,750
On Slideshare
2,229
From Embeds
521
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 521

http://insready.com 516
http://cache.baidu.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Drupal front end development 王景昇 (Jingsheng Wang) CEO @ INsReady 微博: @王景昇 Twitter: @skyredwang The above QR-Code was generated by qr.insready.com
  • 2. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Agenda: 1. Presentation (1 hour): 1. Theming & jQuery 2. Subtheming 3. Omega subtheme & 960 grid 4. Views & Panels 5. CSS & jQuery 6. Responsive Design 2. Workshop (1 hour): 1. Create your own subtheme 2. Add your own CSS & JS files
  • 3. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Theming & jQuery: 1. Theme can change the look and feel of your Drupal site. 2. Logic must be separated as much as possible from presentation. To accomplish this, modules do as much of the work on the data as possible, and hand that data off to the presentation layer. Modules then provide default implementations that provide the basic presentation and serve as a basis for themes that wish to provide an alternate presentation. 3. ---- http://drupal.org/node/933976
  • 4. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Theming & jQuery:
  • 5. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Theming & jQuery: A quick example: Bartik (The default Drupal 7 theme) Demo: http://sandbox2.insready.com
  • 6. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力The number of lines of codes in Bartik: 66 ./templates/maintenance-page.tpl.php124 ./templates/node.tpl.php105 ./templates/comment.tpl.php246 ./templates/page.tpl.php 51 ./templates/comment-wrapper.tpl.php152 ./template.php 65 ./color/preview.html200 ./color/preview.css 39 ./color/preview.js132 ./color/color.inc 3671 total 41 ./bartik.info 48 ./css/ie-rtl.css 22 ./css/layout-rtl.css1650 ./css/style.css271 ./css/style-rtl.css 46 ./css/print.css 18 ./css/ie6.css 63 ./css/ie.css 58 ./css/colors.css 67 ./css/maintenance-page.css100 ./css/layout.css
  • 7. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Theming & jQuery:It takes tremendous effort to develop and design arobust, beautiful (and responsive) Drupal theme. Therefore, we use Sub-theme most of the time!
  • 8. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Subtheming: Sub-themes are just like any other theme, with one difference: They inherit the parent themes resources.
  • 9. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Subtheming:1. Inheritance 1. All style sheets defined in the parent theme will be inherited, as long as you declare at least one stylesheet in your sub-themes .info file. You must declare at least one stylesheet in your sub-theme for any of the parent themes stylesheets to be inherited. 2. All JavaScripts defined in the parent theme will be inherited. 3. Anything defined in the parent themes template.php file will be inherited. This includes theme function overrides, preprocess functions and anything else in that file. Each sub-theme should also have its own template.php file, where you can add additional functions or override functions from the parent theme. 4. Any .tpl.php files from the parent theme will be inherited. You can add template files with more specificity — for instance, node--blog.tpl.php building on an inherited node.tpl.php.2. Overriding 1. stylesheets[all][] = style.css 2. scripts[] = script.js 3. theme function overrides & template overrides http://drupal. org/node/173880#function-override
  • 10. INsReady Inc. Upgrade Your Creatvty引锐信息科技有限公司 升级你的创造力
  • 11. INsReady Inc. Upgrade Your Creatvty引锐信息科技有限公司 升级你的创造力
  • 12. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Great Base Themes: 1. Omega - Responsive HTML5 Base Theme 2. Zen http://drupal.org/project/zen 3. Fusion http://drupal.org/project/fusion
  • 13. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Omega subtheme & 960 grid Demo Time!
  • 14. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Views & PanelsThey are the magic to let you create complex data presentationwithout writing any code! Demo Time!
  • 15. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力CSS & jQuery 1. Drupal 7.x ships with jQuery 1.4.x 2. Drupal 8.x ships with jQuery 1.7.x 3. Drupal 7 dropped IE6 support. 4. Drupal 8 is considering to drop IE7 support. Developer Tools: 1. Chrome developer tool 2. Firefox firebug 3. IE9 developer tool 4. CSS Lint http://csslint.net/ (Check errors, Compatibility, Performance, Maintainability & Duplication, Accessibility and OOCSS) 5. jQuery Docs: http://docs.jquery.com/Main_Page 6. api.drupal.org 7. Devel http://drupal.org/project/develyour style is nothing more than an advice for browsers to display it in certain ways. Itis by no means a law
  • 16. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Responsive Design & Examples:
  • 17. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Responsive Design & Examples:
  • 18. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Omega theme has Grid Responsive Settings.
  • 19. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Workshop Tasks: 1. Create your own Omega subtheme 2. Add your own CSS & JS files 3. Make the header background black 4. Create a layout like New York Times, using Panels 5. Create a Views and display in a grid style 6. Use jQuery to create an overlay and display welcome message when user visits the site for the first time.
  • 20. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Thank You/ 谢谢!SPECIAL THANKS to 陈刚& 上海万达信息股份有限公司for sponsoring this training! 王景昇 (Jingsheng Wang) CEO @ INsReady 微博: @王景昇 Twitter: @skyredwang