INsReady Inc.        Upgrade Your Creatvty           引锐信息科技有限公司            升级你的创造力Drupal front end development  王景昇 (Jings...
INsReady Inc.   Upgrade Your Creatvty             引锐信息科技有限公司       升级你的创造力Agenda:  1. Presentation (1 hour):     1. Themin...
INsReady Inc.      Upgrade Your Creatvty              引锐信息科技有限公司          升级你的创造力Theming & jQuery: 1. Theme can change the...
INsReady Inc.   Upgrade Your Creatvty         引锐信息科技有限公司       升级你的创造力Theming & jQuery:
INsReady Inc.       Upgrade Your Creatvty              引锐信息科技有限公司           升级你的创造力Theming & jQuery: A quick example: Bart...
INsReady Inc.     Upgrade Your Creatvty                         引锐信息科技有限公司         升级你的创造力The number of lines of codes in ...
INsReady Inc.       Upgrade Your Creatvty                引锐信息科技有限公司           升级你的创造力Theming & jQuery:It takes tremendous ...
INsReady Inc.             Upgrade Your Creatvty                    引锐信息科技有限公司                 升级你的创造力Subtheming:  Sub-them...
INsReady Inc.                  Upgrade Your Creatvty                      引锐信息科技有限公司                      升级你的创造力Subthemin...
INsReady Inc.   Upgrade Your Creatvty引锐信息科技有限公司       升级你的创造力
INsReady Inc.   Upgrade Your Creatvty引锐信息科技有限公司       升级你的创造力
INsReady Inc.       Upgrade Your Creatvty               引锐信息科技有限公司           升级你的创造力Great Base Themes:  1. Omega - Respons...
INsReady Inc.     Upgrade Your Creatvty         引锐信息科技有限公司         升级你的创造力Omega subtheme & 960 grid              Demo Time!
INsReady Inc.          Upgrade Your Creatvty                    引锐信息科技有限公司              升级你的创造力Views & PanelsThey are the ...
INsReady Inc.                  Upgrade Your Creatvty                           引锐信息科技有限公司                      升级你的创造力CSS ...
INsReady Inc.   Upgrade Your Creatvty          引锐信息科技有限公司       升级你的创造力Responsive Design & Examples:
INsReady Inc.   Upgrade Your Creatvty          引锐信息科技有限公司       升级你的创造力Responsive Design & Examples:
INsReady Inc.      Upgrade Your Creatvty           引锐信息科技有限公司          升级你的创造力Omega theme has Grid Responsive Settings.
INsReady Inc.     Upgrade Your Creatvty             引锐信息科技有限公司         升级你的创造力Workshop Tasks:  1. Create your own Omega su...
INsReady Inc.     Upgrade Your Creatvty         引锐信息科技有限公司         升级你的创造力Thank You/ 谢谢!SPECIAL THANKS to 陈刚& 上海万达信息股份有限公司...
Upcoming SlideShare
Loading in...5
×

Drupal Front End Development

2,916

Published on

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文件

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,916
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Drupal Front End Development

  1. 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. 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. 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. 4. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Theming & jQuery:
  5. 5. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Theming & jQuery: A quick example: Bartik (The default Drupal 7 theme) Demo: http://sandbox2.insready.com
  6. 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. 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. 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. 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. 10. INsReady Inc. Upgrade Your Creatvty引锐信息科技有限公司 升级你的创造力
  11. 11. INsReady Inc. Upgrade Your Creatvty引锐信息科技有限公司 升级你的创造力
  12. 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. 13. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Omega subtheme & 960 grid Demo Time!
  14. 14. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Views & PanelsThey are the magic to let you create complex data presentationwithout writing any code! Demo Time!
  15. 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. 16. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Responsive Design & Examples:
  17. 17. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Responsive Design & Examples:
  18. 18. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Omega theme has Grid Responsive Settings.
  19. 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. 20. INsReady Inc. Upgrade Your Creatvty 引锐信息科技有限公司 升级你的创造力Thank You/ 谢谢!SPECIAL THANKS to 陈刚& 上海万达信息股份有限公司for sponsoring this training! 王景昇 (Jingsheng Wang) CEO @ INsReady 微博: @王景昇 Twitter: @skyredwang
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×