2012年4月22日星期日

可笑的12年國教

我是百分之百反對12年國教的一群人...12年國教這種去菁英化的行為...非常鄉愿愚蠢我不是菁英的那群可是我相信 社會是需要菁英的存在 我不是菁英但是我相信因材施教...因材施教並不是把一堆程度亂七八糟的學生混在一起要老師根據個別學生程度教學...一個老師要對應幾百個學生這是根本不可能的事情藉由考試分出程度根據程度分班分校...這樣才能讓學生得到屬於他程度的教學還是該分成資優班普通班跟資源班....這樣不就走國中的分班回頭路說要多元學習...面對現實吧...除了讀書以外的多數學習都是要錢的！！你要窮人家買鋼琴？小提琴學芭蕾舞？給家庭不富裕的人一個可以多種管道升學的假象...然後等到他們面對現實後才發現考試讀書才是真的...可是到那時候就算你讀的好也要抽籤分發...（幹你娘這哪招阿）教改到現在小孩只變得越來越蠢越來越沒抗壓性遇到問題只會抱怨不懂去找解決問題的方法反正老爸老媽都會幫你們解決說不應該給小孩壓力...每天考試這種不危及到飯碗的壓力都承受不了了...出社會的影響你每頓飯的工作壓力承受的了嘛？我已經預見台灣未來可悲的教育走向...12年國教一段時間後...會發現私立的菁英高中冒出頭來....手頭有點錢的家長就會搶破頭的把小孩送進私立菁英高中更有錢的菁英家長就會送出國讀國外的菁英學校...沒錢的菁英呢？玩泥巴吧... 在台灣的教育裡可笑的是 不是學生決定自己的求學路程....學生不喜歡讀書沒辦法靠自己的自由意志讀五專四技二專之類的技職學校...高中都不用考了...哪個家長會願意自己小孩被貼上不愛讀書所以去考技職的標籤...誰都想自己的小孩看起來會讀書要學生考大學不會讀書難道是錯嘛？不會讀書根本沒錯會讀書的小孩不見得是好人不會讀書的小孩也可以是好人有成就的人.... 高中不會教你糕點怎麼烤不會教你汽車怎麼修....多少父母會對兒子說...既然你不想讀書就不要去抽籤高中吧技職學校也不錯...大多數的父母應該會說大學這麼多好歹讀一個回來吧考高中是給父母面對現實的機會 假象的公平....不如讓大眾知道不公平的事實...企圖去明星學校去菁英化自以為是的學者...真的都很鄉愿很愚蠢... 世界還是需要菁英的存在...他們需要幫我們搞懂他媽的難懂的幾何代數...還要幫我們實驗那些小到哭杯看不見的化學分子結構...還要幫我們急救診療複雜到不行的身體....這些都是菁英....這些都是一般人無法做到的.... 面對現實吧....這社會還是需要菁英...雖然近幾年來菁英搞爛的我們台灣許多大大小小的地方....有人貪汙有人偷機有人詐術....台灣的教育走過了這麼多年...缺少的絕對不是去菁英化人人平等的假象....而是對小孩教導的道德良知....道德良知才是台灣教育真正該去注意檢討的方向....

2011年10月4日星期二

Tips, Tricks and Tools You Will Need to Start Using HTML5 Today

Introduction

HTML5 has been a really hot topic in web development. With the support of most modern browsers available (Safari, chrome, firefox, IE10 and mobile devices), even though the specification has not fully completed yet, but many people have already adopted it as the main technology for all the web development projects. Online giant websites such as Google, facebook, twitter and youtube, they are all built in HTML5!

For me, the most exciting features of HTML5 are the canvas and the robust form capabilities. Canvas experiment can be seen all over the places (not IE, better with Chrome) but for the form elements, they aren't well supported yet. However, as a late adopter, I can see now is the time to pick up HTML5 and start to update myself with the latest implementation of the specifications.

So, I made this post, for myself as a research and for you all who want to learn it as well. I will make a second series about HTML5 next week about references and tutorials. Stay tuned!

HTML5 Support Charts

Before you start, you might want to know the supported feature by most modern browser as well as mobile platform too.

Enable HTML5 tags!

Older version of IE can't recognise the new html elements. However, they are already a few of javascript or css solution to fix that weakness.

HTML5Shiv: This script makes IE to recognise and style the HTML5 elements.
HTML5 Enabler: Similar to HTML5Shiv, HTML5 Enabler gets IE to acknowledge the new elements in HTML5.
Modernizr: Modernrizr allows us to take the advantage of the new capabilities of HTML5 and CSS3.
HTML5 Reset: This one is something different from the rest. It comes with folder structure and files ready for you to start a new project. For HTML5 and CSS3 support, it uses modernizr.

Javascript Plugins

I have found a range of javascript plugins to compensate the support of HTML5 on some browsers.

VideoJS
HTML5 Video player. You get consistent look between browsers. WIth forced fallback to flash features, it will work in all browsers including IE6 and mobile devices.
AudioJSHTML Audio player. audio.js uses html5 audio element and it has the same main features like VideoJS - consistent layout and fallback to flash if HTML5 is not supported.
HTML5WidgetImplements a subset of the HTML5 Forms module, including calendars, colour swatches, sliding widgets, client side validation and more.
Webforms2HTMl5 Form Attribute support eg pattern, required, autofocus.
LimeJSLimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.
FlexieJSNot really about HTML5, it's the support for the awesome CSS3 Flexible Box Model.

Online Tools

Also, there are a few HTML5 tools available online to speed up the pace to develop HTML5 websites. I have found a few HTMl5 cheatsheet and online reference as well.

HTML5 BoilerplateHTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site. You get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash.
Switch to HTML5Useful online tool that generates the HTML5 document structure according to your preference.
InitializrInitializr is an HTML5 templates generator to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate above.
HTML5 Visual Cheatsheet
HTML5 Canvas Cheatsheet
HTML5 PocketBook

One More Thing...

You can keep track of HTML5 update via this link

HTMl5 Tracker

And, HTML5 websites inspiration. This HTML gallery consists all the websites made with HTML5.

HTML5Gallery

Next week, we will be talking about HTML5 tutorials and references online. Stay tuned!

interface

http://interface.eyecon.ro/

jQuery plugin 大集合

研究了 jQuery ，發現他的 plugin 實在方便，透過幾行簡短的 javascript 便可以做出很好的效果
以下是幾個 jQuery 的 plugin, 節錄自 http://www.wowbox.com.tw/blog/article.asp?id=3250
若需要更新，請自行去此網站取得

最近試用了 jQuery lightBox plugin ，讚!!

A delicious javascript tagging input field

http://devthought.com/wp-content/projects/jquery/textboxlist/Demo/#

A brief review of existing components and the presentation of the powerful “jquery.tagInput”

Once again, working on one of our new secret products (which is called Licorize

), I was in need to select a third party component for speeding up development: this time, a tagging field.

… before continue reading do you like to go straight to live demo?

I realized in seconds that I already had in mind a delicious solution. Delicious (.com) and its wonderful tagging system its really nearly what I wanted, probably even a little more…

What I really love in this component as seen on Delicious is the smoothness of user interaction. Let me explain the concept: try to write a tag directly from the input field and the drop down will show your already used tags, in order of frequency. Amazing, mainly it saves me scrolling the list: most used on top, golden rule. This is not different from what usually the other components do, but in this case the string searched is a little bit “boldified”. This is stylish!

Another nice feature of delicious’s tagging field is the integration with “recommended” and “popular”: not only by clicking the tag it is inserted/removed like every nerd-programmer will be able to imagine, but even while you are typing in the input field, the suggested tag is magically highlighted – this is a masterpiece!

Of course the interface behavior is supported by meaningful contents: suggested tags are computed on the base of the analysis of the url contents and mainly, I suppose, on other users tagging criteria; having million of users makes the term “statistic” meaningful.

(BTW you can access this data using the Delicious api)

The only things I would change in this jewel is the tag separator from [space] to [comma]; this will give you the capability to add multiple word tags, even if it may induce the user in using the tag field as a sort of notes one. So the separator “flavor” may open a Pandora’s box: if ever in my life I’ll write a tag component – which I’ll try to avoid as much as possible.

Apart from the separator, I needed exactly this component, but unluckily it is entangled in Delicious’ js library, so I decided to have a look at available jQuery based components.

As usual this list does not pretend to be complete as I’m focused on developing products, not on writing reviews, but someone else could find my hints useful (I have already wrote some reviews on charting and grid components).

The top ranked one is jQuery tag suggestion by Remy Sharp.

This nice component is very easy to use and is based on an array of suggested tags that can be supplied via a js array or via Ajax.

A basic axample:

$('input.tagSuggest').tagSuggest({  tags: ['javascript', 'js2', 'js', 'jquery']});

An Ajax example

$('#tags').tagSuggest({  url: '/tag-suggestion'});

Layout is configurable via css, and some parameters will help you in fine tuning this component.

Even if this is a nice component it is quite far from Delicious one, at least because it does not implement multiple tag collection: mine, suggested, popular. Another little limitation is that the suggested tag list is static, even if called through Ajax.

Another cool component is Tagger by Chris Iufer.

Here the focus is on maintaining a tag list, instead of filling a field.

Usage is really simple:

But this is even farther from my goal…

Even Pines Tags by Hunter Perrin goes in the wrong direction, at least compared with Delicious. It is focused mainly on writing / removing tags (like the previous one):

The documentation is little bit weak but usage is still easy:

$(“#tags”).ptags();

In the same flow is JTAG by Benoît Vidis

cute, but not my prefered one.

Another component that cought my attention was MagicTags by Dave Geddes.

Nice graphics, but here the core seems the transitions effects, making the usage of this component at bit annoying.

Nice look, but similar behavior for TestBoxList by Guillermo Rauch.

That’s all folks! I didn’t find other components, maybe the “tag” search key induces too much noise in search engines, but differently from usual there aren’t dozens of components, the choice is limited.

So I reached this sad conclusion:

I MUST WRITE MY OWN COMPONENT!

At least now my requirements are clear:

supporting already used tag list, eventually filled with an Ajax call
filtering results using user inputs
supporting suggested tags, with “smart” selection
supporting multiple separators
supporting frequency
having a nice-ligth-stylish look
be delicious!

After a couple of days of programming this is the result:

typing on the text field a drop down will show your used tags:

I’ve set up a live demo on BugVoice site (new secret product is offline for the moment).

The usage is quite easy at least in the minimal configuration:

insert your input field:

tags:

then instantiate the component:

This is just a static case example; in case you have thousands of tags, you should use something like a Json Ajax call.

There are some configuration parameters, this is the complete list:

tags: is a Json array of objects with “tag” and “freq” properties; freq is not mandatory if you do not use it for sorting. It is not mandatory if jsonUrl is specified.
jsonUrl: will receive the text of current tag typed in the “search” parameter.
autoFilter: true/false default=true when active shows only matching tags, “false” should be used for server-side filtering
autoStart: true/false default=false when active the dropdown will appear straight on entering the field, otherwise only while typing
sortBy: “frequency”|”tag”|”none” default=”tag”. When sorting by frequency is on, the filler should report the “freq” property for each tag
tagSeparator: default=”,” any separator char as space, comma, semicolon
boldify: true/false default true “boldify” the matching part of tag in the dropdown box
suggestedTags: callback function to retrieve an object array like ["sugestedtag1","sugestedtag2","suggestedtag3"].If this parameter is not present tag suggestion functionality will be kept hidden.
suggestedTagsPlaceHolder: jQuery proxy for suggested tag placeholder. If it is not supplied it is created below the input field. When placeholder is supplied (hence unique), tagField should be applied on a single input.Something like $(“#myTagFiled”).tagField(…) will work fine: $(“:text”).tagField(…) probably not!

so a more complex example will look like:


 

tags: 
suggested tags:

in this case the jsonUrl “tags.jsp” is a silly JSP page that will return 4 tags starting with the text typed by the user. Here the sample code:

<%@ page import="net.sf.json.JSONArray, net.sf.json.JSONObject" %><%
  JSONArray jsa= new JSONArray();
  String search=request.getParameter("search")
  search=null?"":search;
  for (int i=1;i<5;i++){
    JSONObject o= new JSONObject();
    o.element("tag",search+i);
    o.element("freq",i);
    jsa.add(o);
  }
  out.print(jsa.toString());
%>

This component is released under MIT license. Enjoy it!

Any feedback will be really appreciated.

訂閱：文章 (Atom)

羽翼。飛翔。尋夢

2012年4月22日 星期日

可笑的12年國教

2011年10月4日 星期二

Tips, Tricks and Tools You Will Need to Start Using HTML5 Today

Introduction

HTML5 Support Charts

Enable HTML5 tags!

Javascript Plugins

Online Tools

One More Thing...

interface

jQuery plugin 大集合

jQuery plugin 大集合

File upload-文件上傳

Form Validation-表單驗證

Form - Select Box stuff-表單－選取框

Form Basics, Input Fields, Checkboxes etc.-表單的基本輸入框，選擇框等

Time, Date and Color Picker-時間、日期和顏色選取

Rating Plugins-投票插件

Search Plugins-搜索插件

Inline Edit & Editors-嵌入的編輯器，所見即所得的編輯器

Audio, Video, Flash, SVG, etc-音頻，視頻，flash，svg等

Photos/Images/Galleries-照片，圖像，相冊等

Google Map-google地圖

Games-遊戲

Tables, Grids etc.-表格，格子等

Charts, Presentation etc.-圖表

Border, Corners, Background-邊，角，背景

Text and Links-文本和鏈接

Tooltips-提示

Menus, Navigations-菜單，導航

Accordions, Slide and Toggle stuff-幻燈、翻轉

Drag and Drop-拖拽

XML XSL JSON Feeds

Browserstuff-瀏覽器相關

Alert, Prompt, Confirm Windows-警告，提示，確認框

CSS-樣式表單

DOM, Ajax and other jQuery plugins-DOm,ajax以及其他

A delicious javascript tagging input field

A brief review of existing components and the presentation of the powerful “jquery.tagInput”

我就是我

標籤

blog特區

網誌存檔

關於我自己

##EasyReadMore##

2012年4月22日星期日

2011年10月4日星期二