Website, Webmaster, Webdeveloper
Home > LOEKELOE > COMPUTER STUFF > Website, Webmaster, Webdeveloper > Bermain dengan teknologi HTML5: Part 2 (Semantic)
Total Views: 954 Share : Facebook ShareFacebook Twitter ShareTwitter Google+ ShareGoogle+
Page 2 of 2 |  < 1 2

fvxK - 14/08/2012 11:17 AM
#21

Quote:
Original Posted By gest
hmm.. maksudnya pertanyaan agan di atas untuk database table itu.. Database yang akan ditampilkan dalam bentuk table (misal tabel perbandingan produk)? Ataukah data dari table dalam database yang akan ditampilkan dan tidak harus dalam bentuk table html (misal data komentar artikel)? Kalau hubungannya dengan layout, menurut ane walaupun "bisa".. mungkin gampangnya diliat dari fungsinya masing-masing aja, kalo table itu untuk tabular data dan div untuk layout.. D
CMIIWW.. iloveindonesias


sepertinya kalau layout make div deh.. dan tabularnya memake

Quote:


Data Table with Numbered Pagination


Show 102550100 entriesSearch:

Rendering engineBrowserPlatform(s)Engine versionCSS grade



Gecko
Firefox 1.0
Win 98+ / OSX.2+
1.7
A

Gecko
Firefox 1.5
Win 98+ / OSX.2+
1.8
A

Gecko
Firefox 2.0
Win 98+ / OSX.2+
1.8
A

Gecko
Firefox 3.0
Win 2k+ / OSX.3+
1.9
A

Gecko
Camino 1.0
OSX.2+
1.8
A

Gecko
Camino 1.5
OSX.3+
1.8
A

Gecko
Netscape 7.2
Win 95+ / Mac OS 8.6-9.2
1.7
A

Gecko
Netscape Browser 8
Win 98SE+
1.7
A

Gecko
Netscape Navigator 9
Win 98+ / OSX.2+
1.8
A

Gecko
Mozilla 1.0
Win 95+ / OSX.1+
1
A
Showing 1 to 10 of 57 entriesFirstPrevious12345NextLast



eh melenceng g ya..
gest - 14/08/2012 12:25 PM
#22

Quote:
Original Posted By fvxK
sepertinya kalau layout make div deh.. dan tabularnya memake



eh melenceng g ya..


:cool yep, itu maksudnya.
[CODE]Tables are semantically incorrect markup for layout.[/CODE]
fvxK - 14/08/2012 02:38 PM
#23

Quote:
Original Posted By gest
:cool yep, itu maksudnya.
[CODE]Tables are semantically incorrect markup for layout.[/CODE]


jadi emang dah bener seperti itu ya..

aduh mana ni para pakar kok pada ngendem apa memang lagi sibuk..
aldysrr - 14/08/2012 05:14 PM
#24

owh iya denger, ada chrome iframe jelasin dong mastah
gest - 14/08/2012 06:04 PM
#25

Quote:
Original Posted By aldysrr
owh iya denger, ada chrome iframe jelasin dong mastah


maksudnya Chrome Frame yah?
[CODE]

[/CODE]
kalau setau ane sih itu supaya ie bisa ngerender halaman web dengan menggunakan chrome engine.. tapi itu harus diinstall soalnya merupakan plugins untuk ie.
fvxK - 14/08/2012 06:35 PM
#26

Quote:
Original Posted By gest
maksudnya Chrome Frame yah?
[CODE]

[/CODE]
kalau setau ane sih itu supaya ie bisa ngerender halaman web dengan menggunakan chrome engine.. tapi itu harus diinstall soalnya merupakan plugins untuk ie.


apa namanya itu ya

oh ia recommended donk buat extention di chrome yang bagus buat developer

thanks
gigcarnation - 14/08/2012 06:57 PM
#27

Quote:
Original Posted By cs.wha
Wah, keren nih ada yang bahas semantic web. Bahas tentang rich snippet juga dong gan. D


rich snippet kayak gimana? bingungs

Quote:
Original Posted By Deviant96
thanks gan infonya, dulu sih ane kalo mau miringin teks pake tag yang lagi di pikirin aja gan haha. Kalo lagi mikir ya pakenya kalo mikir pakenya


sama gan hammer:
tapi ane lebih sering pake
soalnya lebih pendek hammer:

Quote:
Original Posted By gest
ijin ikutan mastah..
sekedar berbagi, untuk deteksi apakah fitur tertentu di html5 disupport oleh browser user (misal ie6) bisa memakai modernizr.
[CODE]http://modernizr.com/[/CODE]
Cara kerjanya adalah sbb:

[*]modernizr akan melakukan serangkaian test untuk menentukan fitur apa saja yg disupport browser
[*]membuat JavascriptObject berdasarkan hasil test tsb dengan bentuk Boolean
[*]menambah beberapa css class pada html element berdasarkan test tsb, untuk menentukan fitur apa saja yang disupport (maupun yg tidak).
[*]Menyediakan script loader, sehingga developer akan mudah untuk menyediakan fallback untuk fitur yg diperlukan.


Contoh:
[CODE][removed]
if (Modernizr.canvas) {
alert("Browser ini support canvas HTML5!");
}
[removed][/CODE]
Misal untuk input field dengan placeholder sbb:
[CODE]
<input type="text" placeholder="Insert Username">
[/CODE]
Untuk browser yg support html5 tentu akan langsung menampilkan placeholder tsb. Untuk yg non-supported biasanya menggunakan javascript, dalam hal ini jquery sebagai fallback. Dengan modernizr kurang lebih spt ini:
[CODE]
$(document).ready(function(){
if(!Modernizr.input.placeholder){

$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
}
});
[/CODE]
Penjelasan singkat script di atas.. yg paling penting D
[CODE]if(!Modernizr.input.placeholder){...[/CODE]
Apabila browser tidak men-support input dengan attribute placeholder, maka isi attribute value dengan variable yg diambil dari attribute placeholder. Jadi untuk browser jadul bisa seolah2 menampilkan placeholder text D


thanks tambahannya gan D
ane sih sudah tau tentang modernizr
tapi ane baru tau kalo modernizr juga menambahkan javascriptoblect
kirain cuman nambah class di html doang hammer:
cs.wha - 14/08/2012 07:16 PM
#28

Rich snippet yang ada di sini gan: "schema.org". Namanya rich snippet atau micro data ya, ane belum ngerti. D
gigcarnation - 14/08/2012 07:20 PM
#29

Quote:
Original Posted By cs.wha
Rich snippet yang ada di sini gan: "schema.org". Namanya rich snippet atau micro data ya, ane belum ngerti. D


kalo gak salah yang begituan namanya microdata
btw kaskus beta juga pake begituan loh D
fvxK - 15/08/2012 02:58 PM
#30

butuh css nih D

ada yang mau learning gua ga.. D

cendols pm
gigcarnation - 15/08/2012 04:04 PM
#31

Quote:
Original Posted By fvxK
butuh css nih D

ada yang mau learning gua ga.. D

cendols pm


maskdunya bingungs
fvxK - 23/08/2012 02:32 PM
#32

sepiii banget...
S4nJi - 23/08/2012 02:50 PM
#33

Yay, someone used HTML5 Correctly D
Semantic itu susah yak dijelasin, but we got the meaning, TS :highfive:

Btw table makin ribet deh
[php]


Header Col 1Header Col 2


Row 1 Col 2Row 1 Col 2
Row 2 Col 2Row 2 Col 2
Row 3 Col 2Row 3 Col 2


Footer Col 1Footer Col 2

[/php]

thead,tbody,tfoot, jarang yang pake ._.
Ironically, masih banyak yang buat website pake table hammer:
cs.wha - 23/08/2012 03:43 PM
#34

Quote:
Original Posted By gigcarnation


kalo gak salah yang begituan namanya microdata
btw kaskus beta juga pake begituan loh D


Oh micro data ya. Bahas ntu donk gan, biasanya theme premium udah pada pake gituan. Kalo rating produk atau menu seperti breadcumb muncul di google emang keliatan keren gan. D
gest - 23/08/2012 03:53 PM
#35

Selain
untuk itu optional di html5..
[CODE]http://www.w3.org/TR/html5/syntax.html#optional-tags[/CODE]
di source webkit sendiri ada yg namanya processFakeStartTag(tbodyTag);.. intinya browser bikin kalo ditemukan dan
[CODE]
if >(isTableCellContextTag(token-name())
|| >token-name() == trTag) {
processFakeStartTag(tbodyTag);
ASSERT(insertionMode() == InTableBodyMode);
processStartTag(token);
return;
}
[/CODE]
[CODE]http://code.google.com/searchframe#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/html/parse r/HTMLTreeBuilder.cpp&q=processFakeStartTag&exact_package=chromium[/CODE]

dan beberapa end tags juga optional di html5:
[CODE]
Structural:
, ,

Lists:
, ,

Table:
, , , , , ,

Juga:
,
[/CODE]

Jadi, bisa aja nulis list dan table kayak gini:
[CODE]

item one
item two
item three



Selector engines, parse direction

Left to right Right to left

Mootools Sizzle
Sly YUI 3
Peppy NWMatcher
Dojo Acme querySelectorAll
Ext JS
Prototype.js

[/CODE]

Minimal markup di html5:
[CODE]


hi mom

you rock!
[/CODE]

Coba lihat source code 404 page Google:
[CODE]http://www.google.com/404[/CODE]

CMIIWW..
gigcarnation - 24/08/2012 12:42 PM
#36

Part 3 udah muncul nie gan D
Silakan cek post pertama D
angel182 - 24/08/2012 07:26 PM
#37

      gak ngerti ane nya hammer:
banyak banget kode2 nya, ribet
gigcarnation - 26/08/2012 04:07 PM
#38

Quote:
Original Posted By S4nJi
Yay, someone used HTML5 Correctly D
Semantic itu susah yak dijelasin, but we got the meaning, TS :highfive:

Btw table makin ribet deh
[php]


Header Col 1Header Col 2


Row 1 Col 2Row 1 Col 2
Row 2 Col 2Row 2 Col 2
Row 3 Col 2Row 3 Col 2


Footer Col 1Footer Col 2

[/php]

thead,tbody,tfoot, jarang yang pake ._.
Ironically, masih banyak yang buat website pake table hammer:


kalo mau bikin tabel pake zencoding aja, biar lebih cepat D

Quote:
Original Posted By cs.wha


Oh micro data ya. Bahas ntu donk gan, biasanya theme premium udah pada pake gituan. Kalo rating produk atau menu seperti breadcumb muncul di google emang keliatan keren gan. D


lebih baik ente langsung aja ke TKP, lebih lengkap :nagcir: --> http://schema.org

Quote:
Original Posted By gest
Selain<html> <head> <body>
untuk itu optional di html5..
[CODE]http://www.w3.org/TR/html5/syntax.html#optional-tags[/CODE]
di source webkit sendiri ada yg namanya processFakeStartTag(tbodyTag);.. intinya browser bikin kalo ditemukan dan
[CODE]
if >(isTableCellContextTag(token-name())
|| >token-name() == trTag) {
processFakeStartTag(tbodyTag);
ASSERT(insertionMode() == InTableBodyMode);
processStartTag(token);
return;
}
[/CODE]
[CODE]http://code.google.com/searchframe#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/html/parse r/HTMLTreeBuilder.cpp&q=processFakeStartTag&exact_package=chromium[/CODE]

dan beberapa end tags juga optional di html5:
[CODE]
Structural:
</html>, </head>, </body>

Lists:
, ,

Table:
, , , , , ,

Juga:
,
[/CODE]

Jadi, bisa aja nulis list dan table kayak gini:
[CODE]

item one
item two
item three



Selector engines, parse direction

Left to right Right to left

Mootools Sizzle
Sly YUI 3
Peppy NWMatcher
Dojo Acme querySelectorAll
Ext JS
Prototype.js

[/CODE]

Minimal markup di html5:
[CODE]

<meta charset=utf-8>
<title>hi mom</title>

you rock!
[/CODE]

Coba lihat source code 404 page Google:
[CODE]http://www.google.com/404[/CODE]

CMIIWW..


jujur aja gan, ane malas pake thead, tbody dan tfoot hammers

Quote:
Original Posted By angel182
      gak ngerti ane nya hammer:
banyak banget kode2 nya, ribet


ya, emang gitu
kal oHTML tagnya dikit mah jadi parah hammer:
zona848 - 13/09/2012 12:54 PM
#39

ilmu lagi

mantep dah
gigcarnation - 20/10/2012 09:58 AM
#40

sup2: sup2: sup2:
nyundul trit biar gak ilang di New KASKUS
Page 2 of 2 |  < 1 2
Home > LOEKELOE > COMPUTER STUFF > Website, Webmaster, Webdeveloper > Bermain dengan teknologi HTML5: Part 2 (Semantic)