Pagpapahayag ng IT

Ay basahin ito sa ilang mga blog ... naisip ito ay gandang Catalog ito para sa hinaharap Ref .... din ay maaaring maging isang mahalagang katanungan pakikipanayam na tinanong ka ng ilang araw ....

Magsulat ng isang snippet ng CSS na ipakita ang isang talata sa asul sa mga lumang browser, red sa mas bagong browser, berde sa IE6 at itim sa IE7

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}

Nagkaroon ang kakaiba isyu na ito, kung saan ang isang piraso ng Javascript nagtrabaho multa sa lahat ng mga ans browser tulad ng dati bar ng IE ... Simple ito ay, ngunit dahil ang script ay hindi isinulat ko, kinuha ng isang habang upang i-debug ang error na "Bagay ay hindi sumusuporta sa ito ari-arian o paraan" na lamang ang IE ay pagkahagis up. Marahil! Kung ako ay upang isulat ang script, hindi ko ay may error na ito sa lahat, bilang hindi ihalo ang aking mga variable na pangalan sa patlang na ID :).

Problema: Bagay ay hindi sumusuporta sa ito ari-arian o paraan (sa linya 3)

 function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

Solusyon:
Ang error ay binuo sa ang thirdrow ng sa halimbawa sa itaas (Line 3 ... "shortdesc = document.getE ...."). Ako sinubukan lahat ng uri ng mga hangal na mga bagay, na wala ako ay kahit na nagkakahalaga ng banggitin dito at sa wakas hulaan kung ano! lamang ang pagbabago ng shortdesc var sa iba pa kayong mapupuksa ang error. Talaga! Ang pangalan ng variable ay may sa iba't-ibang mula sa fieldID

Para sa ilang oras na ngayon ako ay naghahanap sa mga solusyon sa tumakbo / subukan ang aking mga mga static HTMLs sa Eclipse / Android emulator. Hindi lubos matagumpay pa .... kung ano ang ibig sabihin ko sa pamamagitan ng "ganap" ay HTML ang makakakuha ng load OK ngunit ang lahat ng CSS at js, ie ang visual na expression ay hindi nakita. Sa mga salita ng developer, ang CSS ay hindi mailalapat sa pahina ...

Naisip gagawin ito ng ilang kapwa Newbie Android UI developer, Kung nabanggit ko ang snippet na pababa na ginamit ko upang ipakita ang HTML.

AT Android gurus, MANGYARING magdagdag ng iyong mga komento upang makatulong sa amin ng mga novices sa mobile application UI developer karagdagang!

Paumanhin! ngunit Im ipagpalagay na alam mo kung paano lumikha ng isang Android Mobile Application sa Eclipse.

Lumikha ito bilang iyong aktibidad; ito ay basahin ang file 'index.html' mula sa iyong mga ari-arian ng proyekto / folder.

 public class Test extends Activity {  /** Called when the activity is first created. */  @Override  public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    WebView webview = new WebView(this);    setContentView(webview);    try {      InputStream fin = getAssets().open("index.html");        byte[] buffer = new byte[fin.available()];        fin.read(buffer);        fin.close();        webview.loadData(new String(buffer), "text/html", "UTF-8");    } catch (IOException e) {      e.printStackTrace();    }  } } 

Re-Cycling ay Buzzword at Sa Web Development ang ibig sabihin nito walang ibang. Ito conserves ng enerhiya, sa mga tuntunin ng pagsisikap!

Sa paglipas ng taon ng pagsulat ng CSS at paglikha ng HTML mula sa disenyo, ako sinundan ng ilang mga pinakamahusay na kasanayan, sa paghabol ng pag-save ng oras at enerhiya sa kung ano ang aming karaniwang term bilang "Re-Inventing ang Wheel". Oras at oras muli, ako ay sinabi sa aking sarili, na ako dapat lumikha ng ilang mga template, ang ilang mga karaniwang muling magagamit ang CSS na ko bang gamitin ng kahon sa aking mga hinaharap na trabaho. Kahit na hindi ganap na ngunit ako ay pamahalaan upang makamit ang ilang mga ng mga layunin.

Sa furthering, Re-Paggamit ng CSS, ako ay tumingin sa ang ilang mga frameworks CSS na ay karaniwang magagamit sa amin at nagpasya upang ilagay ang mga ito upang gamitin, dahil ang mga ito ay sinubukan at nasubok at na nilikha sa pamamagitan ng magkano karanasan developer, kaysa sa aking sarili. Higit pang mga mahalaga ay "Iwasan ang RE-INVENTING".

Kahit na ang karaniwang kaalaman sa Beterano, ako sinubukan pen ilang mga pangunahing konsepto / mga pinakamahusay na kasanayan / mga saloobin na nawala sa paglikha ng mga frameworks na ito, upang gumawa ng mga posibleng ang RE-pagbibisikleta ng CSS. Sana ito ay makakatulong sa ilang ng mga developer ng CSS na lamang tungkol sa at kamakailan boarded ang CSS pambandang trak!

Keys Re-pagbibisikleta ng CSS:

Gamitin ang Madaling mapapangalanan balarila

Ito ay upang maging ang pinaka-mahalagang kadahilanan sa paggawa ng CSS / HTML muling-magagamit. Ang pagbibigay ng pare-pareho mga pangalan sa mga sangkap ng pahina ay nagbibigay-daan sa muling paggamit ng mga bahagi ng pahina at ang kanilang mga estilo na may kakaunti o pagbabago. Sa linya na may argument na ito, Kahit HTML5, sa isang malakihang pagbabago ng pagbabago sa kanyang predecessors, ay upang ipakilala ang ilang mga istraktura viz tag. <article>, <section>, <header>, <aside>, at <nav> [ Ano ang HTML5 dalhin? ]. Kahit na sa HTML 4 (o mas mababa), ito ay pinakamahusay na pangalan ng karaniwang mga seksyon ng iyong pahina consistanly tulad sa simpleng halimbawa sa ibaba ...

Tandaan, ang mga Karamihan sa mga pahina sa iyong proyekto, tapusin up nagkakaroon ng parehong istraktura elemento ng core. Kilalanin ang mga mga karaniwang mga elemento sa pahina ng core ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

I-reset ang mga Estilo ng Default (CSS Resets): Kung gumamit ka ng isang framework o isulat ang iyong sarili, dapat kang magbigay ng CSS Resets [ Ano ang CSS Resets? ], bilang sila bawasan o alisin minsan ang mga visual na inconsistencies na nangyari sa pagitan ng iba't-ibang mga browser. Sa simpleng salita ang mekanismo ng CSS I-reset ang nagtatakda ng mga estilo ng HTML Sangkap sa zero o null halaga, kaya ang pinakamahalaga anumang browser halaga ng default na maaaring sila ay poses. Ito ay nagbibigay ng isang malinis na talaan ng mga kandidato upang itakda ang mga katangian ng mga sangkap na ito na walang bisa ng anumang User-Agent Default [ CSS2.1 User Agent Style Sheet Default ]. Ang lahat ng mga CSS frameworks ng pag-reset ng mekanismo. Kung ikaw ay sumusulat sa iyo CSS Resets, ang isang salita ng pag-iingat ay na kung mangyari mong kalimutan na i-reset ang isang key ari-arian, maaari itong humantong sa cross-browser isyu, na lubhang mahirap upang i-debug. Tandaan, Panatilihin ang isang kopya ng pag-reset ng estilo at i-drop ang mga ito sa bawat bagong proyekto kang lumikha ng.

  body, div, dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  pre, form, fieldset, input, piliin, textarea,
  p, Blockquote, talahanayan, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Itakda ang default (baseline Estilo) sa Sangkap:

Matapos mong itakda (sa zero o null) ang mga Halaga ng default ng ilang mga katangian ng ilang mga HTML Sangkap, ay kinakailangan na mag-aplay ng ilang mga estilo sa buong bawat halimbawa ng mga sangkap na ito. Ang mga default na setting ay maaaring mag-iba ng bawat disenyo o ayon sa pinakamahusay na kasanayan mong sundin.

Karamihan sa CSS frameworks, palaging introduces ilang bagong mga default, sa karagdagan sa pag-reset sa default na estilo ng browser.
Ang mga default ng pagiging walang bisa ng User-Agent Default (Nakuha ang layo sa pamamagitan ng I-reset ang CSS), ang mga ito ay pare-pareho sa buong browser.

Tandaan, ang baseline estilo ay ginagamit upang itakda ang mga estilo na ay pumunta magamit disenyo-wide. hal.

  html {font-size: 77%; font-pamilya: Arial, sans-serif;}
 malakas, h1, h2, h3, h4, h5, h6 {font-timbang: bold;} 

Abstract na mga Estilo para sa mga Karaniwang mga HTML Bahagi at Karaniwang klase:

Karamihan sa mga proyekto na binubuo ng maraming mga pahina ay karaniwang HTML na mga elemento na ginagamit sa buong site, para sa eg ilang mga uri ng mga form, mga alerto at mga error, mga pasadyang mga Popup, LightBoxes atbp Dahil ang tulad ng mga bahagi ay ginagamit muli sa buong proyekto, ay maging kapaki-pakinabang na magbigay ng isang magtakda ng mga klase na nauugnay sa mga paunang-natukoy na mga estilo para sa mga bahagi at maaari mong i-save ang iyong sarili ng maraming oras.

Bukod sa pagtukoy ng mga magagamit muli kahulugan ng mga estilo para sa mga karaniwang HTML Component, maaari naming mga abstract estilo klase na nauukol sa palalimbagan, kulay o kahit na layout. Ko ang aking sarili ay may posibilidad mong gamitin ... karaniwang klase tulad ng Clearfix, Font08, FontGrey, AlignL, DisplayB atbp.

  form na input {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; taas: 26px; kulay: # 000000; linya-taas: 30px; font-size: 1.1em;}
 form na textarea {border: 0px; background: # ffffff; kulay: # 000000; font-size: .9 em; linya-taas: 1.5em; overflow: makikita;}
 . Fbold {font-timbang: bold; kulay: # cccccc;}
 . Fgrey {kulay: # 666,666;}
 . Flightgrey {kulay: # bbbbbb;}
 . Clearfix {malinaw: parehong;}
 . Divider {border-itaas: 1px solid # 647B06; hangganan-ilalim: 1px solid # 9CC00A; taas: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-ihanay: karapatan}. Alignc {text-ihanay: center}
 . Floatr {Float: karapatan;}. Floatl {Float: natitira;} 

Pag-aayos sa mga karaniwang quirks browser

Iba't-ibang mga browser ipatupad ang CSS code at magbigay ng iba't ibang antas ng suporta para sa mga pagtutukoy CSS. Ang resulta ng .... "Mga Browser Quirks", na namin ang mga developer ay iniwan sa pagharap sa isang bagay. Lalo na, IE6 haunts pinaka CSS coders na may deadline upang matugunan. Ang magandang balita ay karanasan ay nagdala ng sama-sama posibleng magagamit muli pag-aayos sa mga isyung ito (Kadalasan termed bilang CSS Hacks ).

Tandaan, Panatilihing mga hacks / pag-aayos na madaling gamitin

  / * Ang mga sumusunod na zoom: 1 patakaran ay partikular na para sa IE6 + IE7.  * /
    * Html. Clearfix,
    *: Unang-anak + html clearfix sa {
           zoom: 1;
      } 

Panatilihin ang pagpipino ng iyong CSS

• Ang ugali ng re-pagbibisikleta ay hindi dumating sa iyo sa araw. Ito ay may binuo. Kaya planuhin ang iyong mga Re-Cycling. Tumungo ito sa isip na maaari mong abstract default estilo, mga palalimbagan kahulugan, Layout, HTML Sangkap Estilo atbp Subukang mag-isip nang maaga.
• Din tumingin ng bumalik sa iyong nakaraang mga proyekto, ito ay makatulong na makilala ang mga istilo na malamang mong gamitin madalas sa buong porjects. Abstract ito.
• Alisin ang anumang mga hindi nagamit na estilo. Ang pagsasanay na ito ay panatilihin ang iyong CSS framework mula sa isang karaniwang sintomas na tinatawag na "Bloating" -
• Alisin ang paulit-ulit estilo.
• Gumawa ng isang hanay ng mga estilo na ay sapat na kakayahang umangkop sa port ito sa buong proyekto.

A Look Sa CSS Frameworks

Sa wakas. Kung ikaw ay inspirasyon at balak na gamitin ang isa o higit pa ng sa CSS frameworks, Heres ay mabilis na listahan ng ilang mga tanyag na mga ....

• 960 Parilya System : Grid Ang 960 System ay isang pagsisikap upang talagusan ang daloy ng trabaho ng web pag-unlad sa pamamagitan ng pagbibigay ng mga karaniwang ginagamit na sukat, na batay sa isang lapad ng 960 pixels. May tatlong variants: 12, 16 at 24 mga hanay, na maaaring ginamit sa hiwalay o sa tandem. Iisip wala na hindi ka maaaring lumikha ng isa para sa iyong sariling madaling sapat, ang balangkas ay nagbibigay ng mga template ng grid para sa print sa PDF format, na maaaring gamitin ang isa sa dibuho ang iyong pahina designs.Bet, ito gumawa ng isang propesyonal na impression, kung dalhin ka ng ilang mga sheet kapag pumunta ka sa isang client para sa mga pangangailangan ng pagtitipon ng UI. Nagbibigay din ito ng mga pangunahing mga template ng grid para sa mga popular na disenyo software tulad ng Paputok, Flash, InDesign, ilustrador, Photoshop, Visio, atbp pagbibigay ng isang "starter para sa sampung" upang simulan ang iyong trabaho sa disenyo.
• Magplano : magplano nagbibigay nang tiyakan naiuri file CSS sa para Resets, Grids, Forms, Print, palalimbagan, plugin para sa mga pindutan, ang mga tab at sprites atbp Ito ay nagbibigay din ng suporta para sa IE bilang isang hiwalay na isama.
• SenCSs : Hindi tulad ng sa itaas dalawang, SenCSs (malinaw kahulugan), ay hindi magkaroon ng CSS na kahulugan para sa Layout. Ang isama ang mga font, paddings, margin, mga talahanayan, listahan, header, blockquotes, mga form at higit pa.
• BlueTrip : nito sa orihinal na paghahabol sa katanyagan ay na, ito ay isang kumbinasyon ng mga ang pinakamahusay na mga tampok na ibinigay sa pamamagitan ng iba pang mga frameworks iba tulad ng Blue print, Trip oli ... mula sa kung saan ito ay makakakuha ng ang pangalan nito. Nito hanay ng tampok na kabilang sa 24-haligi grid, mga palalimbagan estilo, sa orm estilo, print, pindutan atbp
• Yui Grids : nagdala sa iyo sa pamamagitan ng sa Yahooo Developer Network, ay sumusuporta sa mga likido-lapad (100%) layout pati na rin ang mga preset nakapirming-lapad ng layout sa 750px, 950px, 974px, at ang kakayahan upang madaling-customize sa anumang numero. Bilang maaari mong makita, nito technically lamang ang layout Component. Yui din na ibinigay sa HTML / CSS na mga hanay para sa iba pang mga sangkap ng pahina
• YAML (Ngunit isa pang Multicolumn Layout)
• Emastic

Tandaan, ang paggamit ng frameworks CSS ay hindi magpahiwatig na ikaw ay tamad na lumikha ng isa sa iyong sariling ... Ito ay nagpapahiwatig na ikaw ay matalino upang matuto mula sa mga iba sa karanasan at mga pagkakamali, makatipid ng oras at dagdagan produktibo!!!!

CSS nakumpleto 10 taon pagkakaroon ng taong ito! Mga na na-paligid para sa isang habang, kita ang kanilang mga tinapay (o hindi) paggamit ng CSS, pagkatapos ay maaari mong malaman kung paano namin ay ng starving para sa isang mahusay na pagpili ng mga font. Kahit na ang kakulangan ng mga font designer tulad ng sa mga sa CSS Zen Garden na ginawa ang paggamit ng mga imahe ng background ng CSS upang palitan ang mga font sa pagtugis ng paggawa ng ilang mga katarungan sa kanilang mga disenyo. Din namin sinubukan Flash / JavaScript ® hacks upang makamit ang aming mga layunin sa disenyo. Sa pamamagitan ng walang ibig sabihin ito ay isang maling paraan upang makuha ang mga font na gusto namin sa aming mga disenyo ng web, ngunit tiyak, ito ay hindi ang pinaka-kanais-nais na paraan. at sa paglipas ng mga taon ng web designer, tulad ng sa akin, ay ganap na pinagbatayan sa sampung o kaya ang mga font para sa kanilang mga disenyo.

Kamakailang mga developments sa mga pamantayan ng web at mga format ng font gumawa ito posible na render ng HTML na teksto sa mga typefaces iba pang kaysa sa parehong lumang mga font sa default. Dumating sa ang "@ fontface" CSS decleration.

Ang @ fontface provids isang solusyon na mag-link sa aktwal na file sa font at makuha ang mga ito mula sa web. Gamit @ fontface, designer maaaring gumamit ng mga font na walang kinakailangang pirmi ang teksto ng mga imahe ng background. Ang pagpapatupad ay napaka-tuwid forward, tulad ng ipinapakita sa ibaba ngunit ng lahat ng mga mahusay na mga bagay ay may salungat na bahagi nito, HINDI LAHAT ng mga browser na sumusuporta sa isang solong "uri ng font". Kung ikaw ay pagpaplano upang gamitin ang ang @ fontface sa site na may nangangailangan ng kalyeng browser support, pagkatapos ay mayroon ka upang magbigay ng mga pinagkukunan sa mga iba't-ibang mga font-uri ng parehong.

1. TrueType - Ang isang format na dinisenyo upang tumingin mabuti sa-screen. Inirerekumenda lalo na para sa Windows browser (Chrome).
2. Ang OpenType (CFF) - ito format ay mas mahusay para sa print trabaho at hindi laging tumingin ng mabuti sa Windows.
3. EOT - Kailangan mo ang format na ito kung nais mong i-target ang Internet Explorer. Ay hindi gumamit ng IE ang anumang iba pang mga format. Ang aming EOT ng ay itinuturing na "Lite," dahil sila ay ni-compress o domain-hinihigpitan.
4. SVG - Ito ay isang XML na format na sinusuportahan ng ilang mga browser na kabilang ang iPhone.
5. WOFF - ito cross-browser, web-lamang na font format ay magaan ang timbang (font data ang zip compress) at maaaring compiled sa alinman TrueType o habol (CFF) binabalangkas. Ito ay kasalukuyang suportado ng FireFox 3.6 +.

Paggamit ng @ fontface

  @ Font-face {
 font-family: ng 'CalligraphyFLFRegular';
 src: url (ang 'CalligraphyFLF.eot');
 src: lokal (ang 'CalligraphyFLF'), lokal na ('CalligraphyFLF'), url (ang 'CalligraphyFLF.woff') format ('woff'), url ('CalligraphyFLF.ttf') format (ang 'truetype'), url ('CalligraphyFLF . ng SVG # CalligraphyFLF ') na format (SVG');
 }
 @ Font-face {
   font-family: "Ang iyong typeface";
   src: url ("font / font_filename.eot");
   src: lokal ("Kahaliling pangalan"), lokal na ("Alternatename"),
     url ("font / font_filename.woff") na format ("woff"),
     url ("font / font_filename.otf") na format ("opentype"),
     url ("font / font_filename.svg # font_filename") format ("SVG");
   }
 h2 {font-family: "Ang iyong typeface", Georgia, serif;} 

Bilang maaari mong makita ang mula sa halimbawa sa itaas, upang isama ang napiling typeface font, ang isa ay mag-link sa isang hanay ng mga fonttypes para sa parehong typeface. Samakatuwid mga tao ay sumangguni sa ito bilang "Font Kit".
May Font mga Kit magagamit na tahasang nagbibigay-daan sa pag-uugnay sa ang ari-arian ng CSS @ font-mukha na ito sa ilalim ng End User License Agreement (EULA).

Kapaki-pakinabang WebFont Resources:

• Mga Font magagamit para sa @ font-face Embedding pahina ng wiki sa http://webfonts.info/wiki/index.php?title=Main_Page
  
• Sa Ray Larabie . Siya ay isang kilala na taga-disenyo ng font na ginawa ng mga daan-daan ng mga kagiliw-giliw na TrueType font malayang magagamit para sa paggamit sa web. Kanyang mga font ay matikas, pandekorasyon, at mapaglaro.
• Ang Dieter Steffmann ay isa pang mahusay na designer font. Siya, masyadong, ay ginawa ng maraming maganda font na magagamit para sa lahat upang gamitin.
• Font tindahan : nag-aalok ng mga font na dinisenyo para mismo sa web paggamit. Higit sa 30 ng ang pinaka-matagumpay na mga pamilya ng FontFont ay magagamit na ngayon bilang FontFonts Web. FontShop din ay may isang detalyadong WebFont sa gabay sa gumagamit http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Ang Font ardilya : Showcases ang lahat ng mga font na ang Font ardilya ay nag-aalok para sa paggamit sa @ font-CSS Embedding mukha. Font ardilya ay nag-aalok ng isang kahanga-hanga dami ng uri, ginagawang patay simpleng upang pumili ng isa, at handily ay nag-aalok ng "kit" - ang typeface ng iyong mga pagpipilian, sa ilang mga format, na nakabalot sa demo HTML & CSS na gumagamit ng napaka kasalukuyang @ font-mukha syntax . Sila rin ay nag-aalok ng isang paraan upang gumawa ng iyong sariling @ font-face kit . Kung ang typeface na nais mong gamitin ay lisensiyado naaangkop (ang mga na dumating sa iyong computer ay hindi kinakailangang okay), ang generator ang gumagawa EOT, SVG, at hey! WOFF file.

Sa aking limitadong kasanayan-set sa mga tool tulad ng Photoshop at ilustrador, maaari ko matapat mangumpisal na I'ma mas mahusay na developer kaysa Ako ay isang taga-disenyo. Ngunit ang aking background sa core (server side) pag-unlad sa Java / PHP / COBOL, ay naging isang napaka-positibong impluwensiya sa aking mga UI mga kasanayan sa pag-unlad. Ano ang ibig sabihin ko ay, habang ang paglikha ang aking mga disenyo, ibig sabihin tuwing gagawin ko design, tingin ko tungkol sa kung paano ang disenyo ng maaaring pinakamahusay na-convert sa HTML-CSS at habang ginagawa ang HTML-CSS, ako magbigay ng isang-iisip tungkol sa backend teknolohiya at gumawa ng mga makatwirang sigurado na ang HTML ay maaaring madaling ipatupad sa ng XSL loop o PHP snippet atbp

Sa paglipas ng taon, ako ay thrown ulo sa sa disenyo sa pamamagitan ng UI designer na marahil donot magkaroon ng isang palatandaan kung ano ang HTML o CSS ay. Lahat mga taon na ako ay iniisip na Gusto kong humihingi ng labis, Kung inaasahan ko lang ang taga-disenyo, na sinusubukan upang shov ang kanyang "imposible sa code" na disenyo down aking lalamunan, upang maunawaan lamang nang kaunti kung ano ang kanyang disenyo ay iko-convert sa. NA ay makakatulong sa kanan?

Pagkatapos, ako ay dumating sa kabuuan sa post na ito ngayon ... designer Web na maaari hindi code ... Salamat Panginoon! Ako ay isa lamang sa maraming mga na pakiramdam ang parehong ... Ang itaas artitle ay isang bit ng isang mahabang paghinga ... ngunit nagkakahalaga ang read, ang bawat salita nito.

Salamat ang Elliot Stocks Jay ... Pakiramdam ko ay hinalinhan!

Narito ang ilang mga sipi mula sa Elliots artikulo .

Wow, kung ano ang isang araw! Ito na nagsimula sa isang maliit na tiririt at natapos sa isang talakayan na tila magwalis sa buong ang buong komunidad ng web design. Ito ay lilitaw may mga ilang mga napaka-malakas na mga opinyon na gaganapin sa ang paksa ng kung designer web ay dapat ma-code.
...
Kaya, bago makuha namin sa na ito, payagan ako sa mabilis paglalagom kung ano ang sinabi ko sa umaga na ito sa Twitter:

Matapat, ako shocked na sa 2010 pa rin ako pagdating sa 'web designer' na hindi maaaring code sa kanilang sariling mga disenyo. Walang dahilan.

... Dapat ko na isang maliit na mas tiyak sa aking tiririt. Ako ay pakikipag-usap tungkol sa mga designer na walang kahit na ang pinaka-basic HTML at CSS kasanayan upang buksan ang isang patag na disenyo sa isang aktwal na site. Hindi mga tao na sadyang hindi pumili sa code; mga hindi maaari. At pati na rin ako nagre-refer lamang sa front-end code dito, siyempre ito ay katawa-tawa sa tingin na designer ay dapat din ang mga kahanga-hangang back-end programmer ...

Makuha namin 'web disenyo na ipinadala sa ilustrador, 300dpi, imposibleng code, walang pagbabago / usability.
~ Amy Mahon

Ito ay pagkuha ng huli, at Mayroon akong Pakibalot up na ito sa anumang paraan. Alam ko doon ay marami na hindi sumasang-ayon sa akin, at ang aking layunin ay hindi upang sumugat ng damdamin o mapataob sinuman na hindi maaari code, ngunit Umaasa ako na ang ilang mga ang sinabi ko na sumasalamin sa ilang ng ang mga puntos na palaging dumating up kapag delving sa ito debate.

Sa pagtatapos ng araw, hindi ko mawala anumang pagtulog sa na code at na hindi maaari. Ako lamang na tunay na nagulat sa makahanap ng maraming mga designer na kakulangan harap-end na mga kasanayan, bilang Akala ko ito ay isang bagay ng nakalipas.

Ring basahin ang mga komento, may mga paligid ng 320 mga komento, bilang ko isulat ... ang mga ito ay nagkakahalaga ng isang basahin.
Mangyaring basahin ang Elliots buong post dito .. Web designer na hindi code

Dahil ang radio button at ang teksto ay inline, kaya ang teksto ay ihanay mismo sa ilalim ng pindutan ng radyo, Ang ang teksto ay lilitaw upang maging bahagyang sa ilalim ng radio button.
Kung gusto mo ito upang ihanay sa tuktok, makikita mo ilagay ang radio at ang teksto sa magkahiwalay na lalagyan tulad ng mga divs o sumasaklaw (bilang naaangkop) at sila ay mag-ingat ng pagkakahanay. Magiging mas madali gumamit ng mga cell sa talahanayan masyadong, ng iyong disenyo maikling Pinapahintulutan ito.

Hindi na ito ay tumingin sa parehong sa bawat browser, pati na ang bawat browser ay nagpapakita radios bahagyang naiiba, kaya doon ay palaging pagpunta sa isyu ng laki kahit na kung ano ang gagawin mo.

Ang HTML5 ay pa rin ng draft. Ang bilang isulat ko, Work sa HTML 5, na nagsimula noong 2004, pa rin ang ibinigay na hugis sa pamamagitan ng isang pinagsamang pagsisikap sa pagitan ng W3C HTML WG at ang WHATWG . Ang salita ay na ang mga susunod na gen HTML ay mayroon ng mga pagpapahusay at mga tampok, na kung saan gagawin ang bagong istraktura at semantika, form kontrol, API, multimedia tag atbp.

Sa simpleng Ingles ... kung ano ang ibig sabihin sa amin developer UI ...

• May ay karagdagan ng ilang mga istruktura viz tag. <article>, <section>, <header>, <aside>, at <nav>, kung saan ay palitan ang karamihan ng <div> mga ginagamit sa isang web page, paggawa ng iyong mga pahina sa isang bit mas semantiko, ngunit mas mahalaga, mas madali upang basahin.
  Uy! Lamang isipin ang pagsisikap na-save sa paghahanap na ang isa nawawala malapit div tag.
  hal

  <body>
   <header> ... </ header>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Section>
   </ Article>
   <aside> ... </ bukod>
   <footer> ... </ footer>
 </ Body> 

Sa halip ng

  <body>
   <div id="header"> ... </ div>
   <div id="nav"> ... </ div>
   <div class="article">
     <div class="section">
       ...
     </ Div>
   </ Div>
   <div id="aside"> ... </ div>
   <div id="footer"> ... </ div>
 </ Body> 

• Sa pagdating ng audio at video na nilalaman tulad ng YouTube, ang paggamit ng mga naka-embed na multimedia sa webpage ay increaded sa pamamagitan ng fold. Tumatagal ito sa account, Ngayon ang plano ay upang magdagdag ng mga katutubong suporta para sa-embed ng video at audio sa browser mismo, kaya payagan ang mga gumagamit upang i-play, pause, itigil, humanap, at ayusin ang lakas ng tunog gamit ang builtin DOM API para sa mga script upang kontrolin ang playback.

hal

  <video poster="poster.jpg">
     <Pinagmulan src = sa "video.3gp" type = "video/3gpp"
     media = "handheld" na>
         <source src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Audio> 

• Mas mahusay na tinukoy mga semantiko tungkulin para sa mga umiiral na mga elemento para sa eg. ang <strong> at <em> ay maaaring ngayon talagang magkaroon ng iba't ibang kahulugan yan sila kumilos naiiba.

May mga mas maraming mga pagbabago / upgrade sa mas bagong bersyon ... Ang patuloy na-update ang post na ito bilang dumating ko accross anumang mga kagiliw-giliw na mga kapaki-pakinabang .... Manood ng ito puwang

Ang dokumentong ito ay hindi maaaring magbigay ng tumpak na impormasyon bilang HTML 5 pagtutukoy ay aktibo pa rin sa pag-unlad. Kapag may pagdududa, laging suriin ang HTML 5 detalye dito .

Oras at muli, Kapag ang lahat ng iba pang mga browser na nakita upang kumilos bilang sinabi sa pamamagitan ng ang mga patakaran W3C, IE spirals out ka ng espiritu ng pag-unlad sa pamamagitan ng pagkahagis ng isang pag-aalboroto, na hindi mukhang magkaroon ng isang pag-aayos. Lamang tulad ng isa ay ang isyu na ito sa IE7.

Problema Pahayag:
Ako at kaya maaaring marami ng iba pang malubhang mga web developer napansin higit pa kaysa sa maraming mga isang beses, na kapag may nested sa kamay sa layout, sa pasadahan sa ilang mga link (anchor tag), na naglalaman ng lalagyan tila upang ilipat ang ilang mga pixels sa kanan . Sinubukan ko sa google na mga solusyon para sa mga isyu na ito, ngunit marahil ay hindi natagpuan ang anumang mga makatwirang sagot sa kung bakit at kapag ito nangyayari (na maaaring makatulong upang maiwasan ang isyu na ito mula sa nangyayari), kaya hindi ko nakita ang isang malinaw na solusyon sa problema ...

Posibleng Solusyon:
Sa labas ng karanasan, mayroon akong abiso 90% porsyento ng ibig sabihin ang mga oras, na ang isyu na ito ay naayos na sa pamamagitan ng pagdaragdag ng isang ari-arian ng mag-zoom sa CSS kahulugan ng di-behaving lalagyan ...

 # Somediv {
       zoom: 1;
 }

muli ang mga dahilan ay hindi maliwanag ... subukan ito ...
Ang ilang mga elemento sa IE ay may isang "hasLayout ng" ari-arian, na kung saan ay "totoo" sa pamamagitan ng default. Ang Maraming visual na mga pag-uugali ng CSS, halimbawa, ang isang alpha filter ay gumagana lamang sa isang sangkap na hasLayout. at ang {zoom: 1} ay tila upang bigyan ang mga elemento ng target hasLayout ari-arian .... Kapaki-pakinabang? Wala ako sa tingin ...

Ang mga ari-arian ng zoom ay tila suportado ng Chrome, ngunit ang paggamit nito yupi na tila sa gumawa magkano ang masama epekto sa aking layout ... subukan ito, Kung ito gumagana para sa iyo ... kung hindi, i-bookmark ang pahinang ito sa ilalim ng "dais CSS"

• Ang Pahayag Uri ng Dokumento kailangang dumalo sa simula ng isang dokumento na gumagamit ng HTML syntax. Maaaring opsyonal na ito ay ginagamit sa loob ng syntax XHTML, ngunit ito ay hindi kinakailangan. Ang XHTML dokumento ay hindi na kailangang isama ang DOCTYPE dahil XHTML dokumento na ay inihatid tama ang paggamit ng isang XML ng uri ng MIME at naproseso bilang XML sa pamamagitan ng browser, ay palaging ibinigay sa walang quirks mode.

• Sa XHTML, mga pangalan ng tag ay case sensitive at ay karaniwang tinukoy na nakasulat sa maliit na. Sa HTML, gayunpaman, mga pangalan ng tag ay case insensitive at maaaring nakasulat sa lahat ng malalaki o halo-halong kaso, kahit na ang pinaka-karaniwang kapulungan ay sa patpat na may maliit na. Ang kaso ng mga tag na simula at wakas ay hindi ang parehong, ngunit ang pagiging pare-pareho ay gumawa ng mas malinis ang code ng hitsura.

Mga benepisyo ng Paggamit ng HTML

• Paurong tugmang na may umiiral na mga browser
• Mga may-akda ay na pamilyar sa ang syntax
• Ang maawain at mapagpatawad syntax ibig sabihin nito ay hindi gumagamit pagalit na " Yellow Screen ng Kamatayan "kung ang isang pagkakamali ay hindi sinasadyang slips sa pamamagitan ng
• Maginhawa takigrapya syntax, hal may-akda ay maaaring ligtaan ilang mga tag at mga halaga ng katangian

Mga benepisyo ng Paggamit ng XHTML

• Mahigpit XML syntax ay naghihikayat sa mga may-akda upang isulat ang nabuo nang maayos markup, kung saan ang ilang mga may-akda ay maaaring makahanap ng mas madali upang mapanatili
• Integrates direkta sa iba pang mga XML vocabularies, tulad ng SVG at MathML
• Pinapayagan ang paggamit ng XML Processing, na ang ilang mga may-akda gamitin bilang bahagi ng kanilang pag-edit at / o mga proseso sa pag-publish