Enviar búsqueda
Cargar
Professional Web Development
•
4 recomendaciones
•
764 vistas
Joseph Chiang
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 63
Descargar ahora
Descargar para leer sin conexión
Recomendados
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
CSS Components
CSS Components
拓樹 谷
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
Why Sass?
Why Sass?
拓樹 谷
Middleman 一小時完成你的專案原形
Middleman 一小時完成你的專案原形
Even Wu
Mario Benedetti. No te rindas
Mario Benedetti. No te rindas
Manuel Gimon
Recomendados
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
CSS Components
CSS Components
拓樹 谷
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
Why Sass?
Why Sass?
拓樹 谷
Middleman 一小時完成你的專案原形
Middleman 一小時完成你的專案原形
Even Wu
Mario Benedetti. No te rindas
Mario Benedetti. No te rindas
Manuel Gimon
thiết kế website bằng blogspot
thiết kế website bằng blogspot
Làm seo blogspot miễn phí
Pseudo Block
Pseudo Block
Masahiko Sakamoto
Sig
Sig
christianhg2009
CSS Technieken Toegelicht
CSS Technieken Toegelicht
Tweepixels
Index
Index
grateful7
Joomla Day Austin Part 2
Joomla Day Austin Part 2
Kyle Ledbetter
Geld verdienen mit clickbank banner und textwerbung
Geld verdienen mit clickbank banner und textwerbung
Jaroslaw Istok
Joomla Day Austin Part 3
Joomla Day Austin Part 3
Kyle Ledbetter
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
Takashi Uemura
Typo3 v7-2-whats-new.russian
Typo3 v7-2-whats-new.russian
Oleg Karun
Basic HTML
Basic HTML
Md Rubel Hossain
Embarbussamentswiki1
Embarbussamentswiki1
Mª Carmen Romero
Geld verdienen mit Clickbank Banner und Textwerbung
Geld verdienen mit Clickbank Banner und Textwerbung
Jaroslaw Istok
Johny see book update
Johny see book update
Ahmad Syaifudin
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Robin Pokorny
Blog code
Blog code
Otgontsetseg Dorj
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
Fernanda Bernardo
sport handicap
sport handicap
rimammm
Asp .Net 2.0 安全機制 Ii
Asp .Net 2.0 安全機制 Ii
Chui-Wen Chiu
Inheritance patterns
Inheritance patterns
Luke Smith
Get started with YUI
Get started with YUI
Adam Lu
YUI 3 quick overview
YUI 3 quick overview
Luke Smith
Más contenido relacionado
La actualidad más candente
thiết kế website bằng blogspot
thiết kế website bằng blogspot
Làm seo blogspot miễn phí
Pseudo Block
Pseudo Block
Masahiko Sakamoto
Sig
Sig
christianhg2009
CSS Technieken Toegelicht
CSS Technieken Toegelicht
Tweepixels
Index
Index
grateful7
Joomla Day Austin Part 2
Joomla Day Austin Part 2
Kyle Ledbetter
Geld verdienen mit clickbank banner und textwerbung
Geld verdienen mit clickbank banner und textwerbung
Jaroslaw Istok
Joomla Day Austin Part 3
Joomla Day Austin Part 3
Kyle Ledbetter
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
Takashi Uemura
Typo3 v7-2-whats-new.russian
Typo3 v7-2-whats-new.russian
Oleg Karun
Basic HTML
Basic HTML
Md Rubel Hossain
Embarbussamentswiki1
Embarbussamentswiki1
Mª Carmen Romero
Geld verdienen mit Clickbank Banner und Textwerbung
Geld verdienen mit Clickbank Banner und Textwerbung
Jaroslaw Istok
Johny see book update
Johny see book update
Ahmad Syaifudin
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Robin Pokorny
Blog code
Blog code
Otgontsetseg Dorj
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
Fernanda Bernardo
sport handicap
sport handicap
rimammm
Asp .Net 2.0 安全機制 Ii
Asp .Net 2.0 安全機制 Ii
Chui-Wen Chiu
La actualidad más candente
(19)
thiết kế website bằng blogspot
thiết kế website bằng blogspot
Pseudo Block
Pseudo Block
Sig
Sig
CSS Technieken Toegelicht
CSS Technieken Toegelicht
Index
Index
Joomla Day Austin Part 2
Joomla Day Austin Part 2
Geld verdienen mit clickbank banner und textwerbung
Geld verdienen mit clickbank banner und textwerbung
Joomla Day Austin Part 3
Joomla Day Austin Part 3
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
Typo3 v7-2-whats-new.russian
Typo3 v7-2-whats-new.russian
Basic HTML
Basic HTML
Embarbussamentswiki1
Embarbussamentswiki1
Geld verdienen mit Clickbank Banner und Textwerbung
Geld verdienen mit Clickbank Banner und Textwerbung
Johny see book update
Johny see book update
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Blog code
Blog code
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
sport handicap
sport handicap
Asp .Net 2.0 安全機制 Ii
Asp .Net 2.0 安全機制 Ii
Destacado
Inheritance patterns
Inheritance patterns
Luke Smith
Get started with YUI
Get started with YUI
Adam Lu
YUI 3 quick overview
YUI 3 quick overview
Luke Smith
Promises. The basics, from Promises/A+
Promises. The basics, from Promises/A+
Luke Smith
Attribute
Attribute
Luke Smith
Hack with YUI
Hack with YUI
Luke Smith
Destacado
(6)
Inheritance patterns
Inheritance patterns
Get started with YUI
Get started with YUI
YUI 3 quick overview
YUI 3 quick overview
Promises. The basics, from Promises/A+
Promises. The basics, from Promises/A+
Attribute
Attribute
Hack with YUI
Hack with YUI
Más de Joseph Chiang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Let's Redux!
Let's Redux!
Joseph Chiang
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
Joseph Chiang
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
Joseph Chiang
JavaScript Promise
JavaScript Promise
Joseph Chiang
F2E for Enterprise
F2E for Enterprise
Joseph Chiang
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
F2E, the Keystone
F2E, the Keystone
Joseph Chiang
前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練
Joseph Chiang
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Joseph Chiang
Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Joseph Chiang
Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練
Joseph Chiang
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
前端工程開發實務訓練
前端工程開發實務訓練
Joseph Chiang
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
Joseph Chiang
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
Joseph Chiang
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
Joseph Chiang
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)
Joseph Chiang
YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎
Joseph Chiang
Más de Joseph Chiang
(20)
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Let's Redux!
Let's Redux!
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
JavaScript Promise
JavaScript Promise
F2E for Enterprise
F2E for Enterprise
JavaScript Code Quality
JavaScript Code Quality
F2E, the Keystone
F2E, the Keystone
前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
前端工程開發實務訓練
前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)
YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎
Professional Web Development
1.
Professional Front-end Engineering
josephj 2008.11.17 Yahoo! Course @ http://tw.developer.yahoo.com/course/
2.
•YDN •YAP •ITHome •SA@Taipei
Open YUI 3.0 •Yahoo! Live
3.
Links •
http://developer.yahoo.com/r3/ • http://devzone.zend.com/article/2585-Using-YAML-With-PHP- and-PECL • http://farm4.static.flickr.com/ 3251/3017901989_17f1bc4a5e_b.jpg • http://www.sun-line.idv.tw/blog/index.php?load=read&id=521 • http://profiles.yahoo.com/josephj6802 • http://apps.yahoo.com/-MMT5Q550/YahooFullView/index.php • http://www.slideshare.net/josephj/slideshows
4.
•YUI Grids • Yahoo!
Pipes •
5.
YUI Grids
Box Model
6.
Pipes
7.
Web 2.0
Format
8.
http://www.flickr.com/photos/tags/twopenhack08
9.
http://api.flickr.com/services/feeds/photos_public.gne?
tags=twopenhack08&lang=en-us&format=atom
10.
http://api.flickr.com/services/feeds/photos_public.gne?
tags=twopenhack08&lang=en-us&format=php
11.
<script src=” http://api.flickr.com/services/feeds/photos_public.gne?
tags=twopenhack08&format=json&jsoncallback=getFlickrData”></script>
12.
http://api.flickr.com/services/feeds/photos_public.gne?
tags=twopenhack08&format=lol
13.
14.
API
Feed Schema
15.
Service
...
16.
JavaScript
HTML ...
17.
Schema Code
18.
Pipes
Remix Feed
19.
20.
Yahoo!
F2E
21.
1. HTML Yahoo!
22.
23.
<div id=”nav”>
<div class=”hd”> <h2> </h2> </div> ID <div class=”bd”> .hd, .bd, .ft <p> </p> header body footer </div> <div class=”ft”> <a href=”...”> ... </a> </div> </div>
24.
yhtw_masthead ykpmt ykpsb ykpimt
ykpadv ykpimqa ykpimr ykpug ykpiht ykpiht
25.
ykpsb • ykp
+ prefix • sb search box • inc/search_box.php
26.
id
CSS namespace form .extra [HTML] [CSS] <style> <div id=”ykpsb”> #ykpsb { <div class=”bd clearfix”> margin-bottom:10px; <form ...> } ... #ykpsb form { </form> float:left; <div class=”extra”> } ... #ykpsb .extra { </div> float:right; </div> } </div> </style>
27.
1
HTML 3 Mins http://josephj.com/training/ncu/html-module.html 1. id 2. hd, bd, ft class 3. CSS font:bold 16px; background:#ffe; color:#369;
28.
2. CSS
float
29.
<table> <table border=”1”>
<tr> <td align=”left”> </td> <td align=”right”> </td> </tr> </table>
30.
CSS
float <div id=”masthead” style=”border:solid 1px #000”> <span style=”float:left”> </span> <span style=”float:right”> </span> </div>
31.
float border
32.
IE
zoom:1 <div id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> </span> <span style=”float:right”> </span> </div>
33.
<div id=”masthead” style=”zoom:1;border:solid
1px #000”> <span style=”float:left”> </span> <span style=”float:right”> </span> </div> <style> /* clear:both */ #masthead:after { content:’’; display:block; clear:both; } </style>
34.
2
CSS 3 Mins http://josephj.com/training/ncu/float.html 1. 2. YUI 3. border 4. float border:solid 5px #ccc; font:bold 197%;
35.
3. CSS <img>
CSS background User
36.
Yahoo!
CSS
37.
<img> background-image
38.
background:[
] [url( )] [x, y ] [ ]; background:#369 url(ico_yui.gif) left top repeat-x; 0 100% repeat-y 0 -12px no-repeat background-color:#369; background-image:url(ico_yui.gif); background-position:left top; background-repeat:repeat-x;
39.
3
CSS 3 Mins http://josephj.com/training/ncu/background.html 1. http://josephj.com/training/ncu/bg_nav.png
40.
4. CSS
41.
• position •
position:static; • position:absolute; • position:relative; • position:fixed; • top, right, bottom, left • 5px position:relative; top:5px; • position:absolute; right:0; left:0; • IE6 position:fixed;bottom:0;
42.
<div/> <div/> <div/> <div/>
position:static;
43.
<div/> <div/> <div/>
<div style=”position:absolute; bottom:0;right:0;”> position:absolute;
44.
<div/> <div style=”position:relative;” />
<div style=”position:absolute; bottom:0;right:0;”> <div/> position:relative; position:absolute;
45.
4
CSS http://josephj.com/training/ncu/position.html 1. li position:relative; 2. img position:absolute; top, right
46.
5. CSS Hack
47.
IE 6,7 • •
background:blue; • IE 6 7 * CSS Rule • *background:red; • IE 6 _ CSS Rule IE 7 • _background:green;
48.
#article .bd {
background:blue; FF, IE 6, IE 7, Safari... *background:green; IE 6, IE 7 _background:red; IE 6 } IE 6, IE7, Firefox
49.
5
CSS Hack http://josephj.com/training/ncu/css-hack.html 1. #article .bd FF pink, IE7 green, IE6 red
50.
6. CSS
51.
18px
18px background:100% 0; background:100% -18px; 72px background:0 -36px; background:0 -54px; CSS Sprites http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
52.
53.
•
http://josephj.com/training/ncu/round-corner.html • http://josephj.com/training/ncu/round-corner-sample.html • http://josephj.com/training/ncu/round-corner-sample-2.html • http://josephj.com/training/ncu/round-corner-sample-3.html
54.
7. YUI
55.
7
YUI http://josephj.com/training/ncu/yui-menu.html 1. new YAHOO.widget.MenuBar([ id]); YUI 2. render()
56.
7
YUI http://josephj.com/training/ncu/yui-menu.html (true false) autosubmenudisplay hidedelay n (true false) lazyload
57.
8. YUI
UI
58.
YUI Button HTML
YUI Button
59.
8
YUI http://josephj.com/training/ncu/yui-button.html 1. new YAHOO.widget.Button([ id]);
60.
6. YUI
Web 2.0
61.
YUI Container
YAHOO.widget.Dialog YAHOO.widget.Panel YAHOO.widget.Panel YAHOO.widget.SimpleDialog
62.
9
YUI http://josephj.com/training/ncu/yui-panel.html 1. var oPanel = new YAHOO.widget.Panel([ id], [ ]); #panel 2. oPanel.render(document.body) append 3. oButton.addListener(‘click’, onButtonClick) onButtonClick oPanel.show();
63.
9
YUI http://josephj.com/training/ncu/yui-panel.html close fixedcenter modal underlay shadow’, ‘matte’ visible width { 1: 1, 2: 2}
Descargar ahora