顯示具有 HTML 標籤的文章。 顯示所有文章
顯示具有 HTML 標籤的文章。 顯示所有文章

好用的線上產生HTML碼的彩色的程式碼-hilite.me, 幹好繞口

自己打完標題都覺的不好念XD, 算了...沒差啦
這個還不錯用, 也不用再你的blog加一些有的沒的外掛, 掛久了你也都不記的到底你掛了哪些套件了, 真的是這樣子XD...

BJ4了

http://hilite.me/

Unicode 轉換 NCR


資訊雖然有點久的了,但,好東西一定要下記錄,線上轉換才是王道阿~
將你的unicode字元,轉換成 NCR字碼,只要你有字碼轉換的需求,不多說,直看結果


網址滴佳
http://www.endmemo.com/unicode/unicodeconverter.php


玩玩 jsbin.com

好用的jsbin,http://jsbin.com是一套前端的編輯工具線上,可在撰寫前端程式碼,然後可即時反應,也不用自己F5,XD

開始玩一下吧


在JavaScript區塊中來個JSON如下,完成JSON後,再按CTRL+S,進行存檔
{ 
  
  "name": "jsbin",
  "age": 99,
  "birthday": "1988/02/02",
  "mails": {"home": "hotmail@mail.com", "work": "yahoo@mail.com"},
  "phones": {"mobile": "0923456789", "home": "048353868" }
            
}



將網址列的URL記下來,等一下會用到


再開一個新的jsbin,在JavaScript區塊中來個一段如下

$.ajax({
  url: 'http://jsbin.com/dijeyodote/2/edit?js',
  dataType: 'json',
  success: function(data) {

    var json_str=JSON.stringify(data);
    var json = JSON.parse(json_str);
    alert(json.phones.mobile);   
    
  }
    
});


完成,顯示JSON的mobile值


好,收工 XD


Python Dictionary, 字典的應用

dictionary, 字典是指有一組以上的 key 與 value 所組成不多說, 直接展示吧...
"""建立hi_dict的dictionary"""

hi_dict = {'name': '王小明', 'age': 25, 'mail': 'sample@gmail.com'}

"""取得某key的值"""

print hi_dict.get('name')
"""或"""
print hi_dict['name']

"""加入一組 key 與 value"""
add_dict = {'blog','http://myblog.com'}
hi_dict.update(add_dict)
"""或"""
hi_dict.update({'blog','http://myblog.com'})

"""移除一組 key 與 value"""
hi_dict.pop('blog') """若key 'blog' 不存在時會回傳, KeyError: 'bolg' 訊息"""


"""複製dict"""
hi_dict2=hi_dict.copy()



PG專用最佳字型, Monaco font

不解釋, 看下面註解XD
var hello = function () {
        //再也不會搞不清楚是數字或英字大小寫 1,i,l,0,o,O
        var my_array = ["1", "i", "l", "0", "o", "O"];
    }

下載與啟動web2py-01

到這去http://web2py.com/init/default/index
選這-->

選自己的OS下載-->


下載完解壓



解壓到你喜歡的位置去, 我喜歡D:\


找到D:\web2py\web2py.exe檔後 , double click it,  就會出現


你要設定一組密碼給它, 記的要記住哦, 呵呵...我輸入的是!@#$%^&,
咳...咳!! 白吃哦, 我怎會告訴你勒 >_< , 輸完密碼後按 start server 就可以了

登登~登登, 你的web的首頁出現了, 酷吧!!

下回再說明如何處理web2py這傢伙, 881








最近的新玩具web2py-00

最近在想幫朋友找尋一個簡單的web app planform
特點
1. 可以跨作業系統運作
2. 不用安裝就可以工作
3. 線上資源好找

這個好像有點.............沒錯, 找到了! 就是使用python語言的web2py
沒錯! web2py正是我想要找的

web2py這兩天試玩了一下, 感覺還不賴, 時間有限, 改天再為各位介紹

這有文件
http://web2py.com/books/default/chapter/35/00
http://web2py.com/init/default/documentation

這有影音
https://vimeo.com/user315328/videos

HTML5 教學範例

HTML5教學範例與資源, 以下30多個資源可幫你開始學習HTML5。


Blowing up HTML5 video and mapping it into 3D space(將HTML5視訊吹散並組成3D效果)
最近我研究了HTML 5中的Canvas 和Video標籤,並發現了一些很酷的特性。其中之一就是Canvas.drawImage() api。此為詳細介紹。

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3(用HTML5 和CSS3 打造向下相容的網頁)
HTML5更加語義化,使用HTML5 我們不必在網頁上佈滿沒有意義的div。它引入了有意義的tag,比如 navigations和 footers 使語法更有意義也更接近自然語言。


Coding A HTML 5 Layout From Scratch(HTML 5佈局)
這篇文章將教你

  • 用原有技術將元素放置在特定位置
  • 最新的技術潮流
  • Microformats與HTML5協同使用
  • 介紹HTML5與CSS3的新特性


Coding a CSS3 and HTML5 One Page WebsiteTemplate(製作CSS3和 HTML5 一頁式網站樣板)
這篇文章介紹了如何利用CSS3 和jQuery的新特性製作HTML5 網頁模版。 HTML5
仍在完善當中,你也可以選擇性的下載XHTML版。


Comprehensive video tutorial on HTML5(全面的HTML5視訊指南)
這是一個叫Brad Neuberg的工程師製作的HTML5教學視訊。


Create modern Web sites using HTML5 and CSS3(用HTML5與CSS3打造時尚網站)
這篇文章介紹了許多HTML5的功能和語法及API,還有CSS3的新的選擇器,效果和特性。最 後,還將教你如何利用這些新特性開發一個網頁。當你讀完這篇文章,你就能用HTML5和CSS3開發一個自己的網站啦。


Designing a blog with html5(用html5設計部落格)
許多HTML5 特性要結合JavaScript API一起使用,以增加網頁的互動性。但仍有一些新元素可讓傳統的Web1.0頁面更加語義化。為了學習這些,我們來看怎樣建立一個部落格。


Designing for the Future with HTML5 and CSS3 Tutorials and Best Practices(為未來設計:HTML 5 和 CSS3 指南與最佳案例)
這篇文章將介紹用 HTML5和CSS3搭建的幾個最佳網站。


Design and Code a Cool iPhone App Website in HTML5(用HTML5設計和實現一個超酷 iPhone App 網站)


Have a Field Day with HTML5 Forms(建立HTML 5表格)
這篇文站將教 你 如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。


How To Create A Nice Blog Design Touching The Future(不用photoshop,完成網頁設計)


How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6(怎樣讓所有瀏覽器都渲染HTML5標記——即使是IE6)
這篇文章將教你如何用JavaScript和CSS,使 HTML5頁面向下相容,即使是IE6也不例外。


How to Make an HTML5 iPhone App(製作HTML5 iPhone應用)
這是 一篇針對iPhone的指導,但是許多技術也可用在相容HTML5的手機瀏覽器上。


HTML 5 and CSS 3: The Techniques You』ll Soon Be Using(HTML 5 和CSS 3:你將用到的技術)
這篇文章使用HTML 5和CSS 3 搭建部落格頁面。如果你已經熟悉html 和CSS,將很容易跟上。


HTML5 for Beginners. Use it now, its easy!(HTML5初學指南)
給所有具有基礎HTML知識的初學者的HTML 5 入門指南


HTML5 Presentation
這篇文章介紹了HTML5 的發展歷史和它的基本特性


HTML5 Tutorial – Getting Started(HTML 5 入門指導)


How to Build Web Pages With HTML 5(怎樣建立HTML5網頁)


Simple Website Layout Tutorial Using HTML 5 and CSS 3(HTML5和CSS3佈局指南)
HTML5最令人期待的新標籤包括HTML5最令人期待的新標籤包括header, footer, aside,
nav,audio,同時它還包括畫圖,線下存儲資料,拖放等API。頁面佈局將會更易理解。這裡將介紹一個最簡單的HTML5佈局頁面,用CSS3 設定樣式。最終結果如下


Structural Tags in HTML5(HTML 5 結構標籤)
HTML5 有許多標籤幫助網頁結構化,這能省去以網頁中許多div


HTML5 Boilerplates(HTML 5樣板)
此文介紹了一些你能拿來就用的HTML5 樣板檔案


HTML 5 canvas – the basics (HTML 5 基礎——Canvas) 
對HTML 5 Canvas使用方法的全面指導


HTML 5 Tutorials(HTML 5 指南)


Implementing HTML5 Drag and Drop: New Premium Tutorial (HTML 5 拖放)
HTML5 的一個新特性就是拖放,不過IE早在5.5時代就支援拖放了,而HTML 5
的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。


Preview of HTML 5
這是一篇比較老的文章,介紹了HTML5的特性和優點。


The HTML 5 Canvas For Flash Developers :Drawing (HTML 5 Canvas 的畫圖功能)


The Power of HTML 5 and CSS 3
介紹了HTML 5 與CSS3能創造的各種效果。


View Source Tutorial: Sticky Notes With HTML5 and CSS3(HTML5 和CSS3 打造便利貼效果)


webOS HTML5 Database Storage Tutorial(webOS HTML5資料存儲指南)
HTML5 的本機存儲功能將使資料存儲十分簡便。


Yes, You Can Use HTML 5 Today!
本文介紹了一些現已被支援的HTML 5 特性,對初學者十分有用

引自: http://ten2.tw/blog/html5教學/

Have a Field Day with HTML5 Forms(建立HTML5表格)

Have a Field Day with HTML5 Forms(建立HTML5表格)
這篇文站將教 你 如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。

引自: http://24ways.org/2009/have-a-field-day-with-html5-forms

Mail Icon Generator, 製作你的Email或網址貼紙

像這樣  的Email貼紙,那這要從哪取得呢?或是怎麼製作?除了製作email,可以做網址,其實很簡單,滑鼠點幾下就完成。

在這裡制作 http://services.nexodyne.com/email/index.php

顯示當前正在輸入密碼後自動隱藏 iPass

iPass 是一款, 讓網頁密碼輸入也能跟iphone般一樣, 擁有蒙面密碼輸入的提醒效果, 癈話不多說見下圖吧。

演示位置

引自: http://codecanyon.net/item/ipass/146135



no-cache 防止網頁被儲存於快取區

無論如何,其實瀏覽器在載入網頁之後,裡頭的任何內容檔案都存在一個 C:\Documents and Settings\你的使用者名稱\Local Settings\Temporary Internet Files 資料夾裡頭,下次再存取就直接從那個資料夾讀取,速度就快多了,除非按下重新整理才會重新從網路上讀取。

但是這樣,所有的檔案都一清二楚了,能不能夠不要快取呢?其實是可以的:

1.將以下原始碼貼到網頁的<HEAD>和</HEAD>之間

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 00:00:00 GMT">

2.在上面的設定中,你可以把Wed, 26 Feb 1997 00:00:00 GMT改成任何你想用的日期,只要你指定的是過去的時間就行了。

第一行的作用則在於防止快取(之前誤寫成nocache,其實中間應該有「-」才對,已更正),但只對有SSL安全保護的頁面有用,如某些銀行網路的線上存款系統等;其餘普通網頁還是會被快取,只是會被視為立刻過期;至於第二行的設定,則是設定頁面過期的日期,由於設定的是過去的日期,所以會被立即視為已過期。當頁面被視為已過期後,只要你離開了該頁,瀏覽器就會清掉該頁的快取了。

JQuery UI Dialog和ASP.NET Button

今天實作了 jquery ui dialog 的運用 , 郤發現 jquery ui dialog 控件內加入了一個
伺服器提交鈕 , 郤沒有反應. 在g了之後...有了解決辦法.

$(function () { 
var dlg = $("#testDialog").dialog(); 
dlg.parent().appendTo(jQuery("form:first")); 
});


原文自:http://www.52live.com.cn/b/post/fix-asp-net-button-not-work-in-jquery-ui-dialog.aspx

javascript 控制 HTML 超文本的應用

[下拉式選單 (select elements)]


selectedIndex - Reference the value and text for the selected option.

將所選的順序, 文字, 值顯示出來

http://www.mredkj.com/tutorials/tutorial002.html

Use JavaScript to select options.

單選與複選, 利用javascript變更選單的值

http://www.mredkj.com/tutorials/tutorial003.html

Use JavaScript to select options.

複選選單列出所選的值

http://www.mredkj.com/tutorials/tutorial004.html

Add/remove options anywhere in a Select list - works in old and new browsers

新增/刪除下拉式選單 (select) 的選項內容

http://www.mredkj.com/tutorials/tutorial006.html



[表格 (tables)]

Add and delete columns dynamically in a table

增加/刪除 欄

http://www.mredkj.com/tutorials/tableaddcolumn.html

Add and delete rows dynamically in a table

增加/刪除 列

http://www.mredkj.com/tutorials/tableaddrow.html

html網頁所見即所得編輯程式Amaya(免費軟體)


屬於比較進階的網頁編輯程式,初學者比較不適用。需用複雜html多功能且有切基礎者, 比較適合, 這軟體較複雜, 不需這麼多功能者建議改用其他編輯器

軟體特色: 多頁式同時瀏覽/編輯HTML, 像Word的可格式定義style/DTD,
支援UTF-8, (X)HTML, 數學式 MathML (.mml),SVG,加強式表格編輯與特殊符號,
長文件標籤可以樹狀表示, 單頁同時編輯兩文件互相比較(更新網頁時好用),
可以在文件內自己加註(annotation), W3C藉此把HTML推到一個新境界

多年前的Mozilla為我們帶來了免費多平台的初階HTML所見即所得
編輯器, Nvu帶給我們多頁編輯的驚喜, 但是它們都已經消失而不再更新 (KOMPOZER
算有解決nvu的bug). 難道網頁編輯者只剩商業軟體可用嗎? 玩玩免費的Amaya, 幾乎
帶給我們與某些商業軟體功能相同水準, 強到將html的應用推到個人文件實作!

【官方網站】http://www.w3.org/Amaya/

【其他版本下載區】http://www.w3.org/Amaya/User/BinDist.html

【此程式支援繁體中文】設定方法
上方工具列 [Edit]-->[Preferences]-->[Dialogue Language] 改
Traditional Chinese, 按Apply後, 關掉並重新啟動Amaya即可成為中文介面

HTML 自動重新整理或跳到特定網頁

在 <head> 後,加入下列程式碼

<meta content='10' http-equiv='Refresh'/>


<meta content='10' URL='http://tw.yahoo.com' http-equiv='Refresh'/>



如果你是部落客,您必須要能編輯原始程式碼,如Google Blogger。

讓 IE 6 與 IE 7 支援更好的CSS標準

長期以來,網頁設計師對於IE牛步更新對CSS的支援一直感到很無力,雖然IE8開始對於CSS支援有所進步,但是不可能要求每個使用者都去更新為IE8,也因此,這是寫程式的人一直感到很無力的地方。

幸好,在百書爭鳴的圖書館,發現一本「碼上就用CSS」,而在這本書中,讓海芋從中學到IE6支援比較新的CSS語法的方法了。

在 <head> 前加入以下程式碼。

< !-- if lt IE 8 -->
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript" />
< !-- endif -->


原文連結:http://www.inote.tw/2007/09/goodbye-ie6goodbye-suck-css.html