Zločin i kazna by W3C Validator(ski) 3 - CSS
napisano u kategoriji: CSS i XHTML na 14 jul 2009Zašto vršiti validaciju CSS-a?
Šta je najgore što može da se desi ukoliko postoje greške? Jedino što može da se desi to je da broweser(i) ignorišu linje koda sa greškama i da vaš sajt izgleda sasvim drugačije od onog kako ste zamislili.
Sledeći link Why Validate Cascading Style Sheets? ilustruje razloge zbog kojih treba ispravljati greške (ili grehe... )
Svi CSS fajlovi podvrgnuti validaciji koriste podrazumevane postavke:
Upozorenja: Normalni izveštaj; Profile: CSS Version 2; Medium: Sve. Napredniji korisnici mogu da koriste neku od opcija dodatnog podešavanja.
Podaci se kategorizuju u tri sekcije:
"Author-Generated Errors" kada su greške uzrokovali sami autori
"Vendor-Specific Errors" greške proizvodjačkog koda
"Validator-Generated Errors" greške koje nisu u skladu sa specifikacijama CSS-a
CSS kodovi u nastavku su uzesti samo kao primer radi ilustracije i lakšeg razumevanja.
Navešćemo samo najčešće i najrasprostranjenije greške.
Zločin i kazna by W3C Validator(ski) 2 - HTML
napisano u kategoriji: CSS i XHTML na 07 jul 2009Kojih su to 10 osnovnih gešaka u pisanju HTML koda i saveti kako ih izbeći, kako izabrati neka alternativna rešenja, slede u ovom nastavku teksta:
Zločin i kazna by W3C Validator(ski) 1 - Uvod
napisano u kategoriji: CSS i XHTML na 07 jul 2009"Ako nema Boga, sve je dopušteno..." (F.M. Dostojevski, Braća Karamazovi)
Nemam nameru da ulazim u filozofske i religijske teme i diskusije, kako bi se moglo pomisliti na osnovu ovog iznad napisanog, ali moram da kažem - kada su u pitanju web dizajneri i programeri, pa čak i "obični" korisnici interneta (tzv. surferi), ova dilema nikako ne bi trebala da postoji, a samim tim ni rečenica sa početka ovog teksta ne bi trebala da se odnosi na Internet.
Zašto? Zašto porediti jednu viševekovnu dogmu sa modernim internetom? Da li ipak postoje neke sličnosti?
Kako učitati zaseban CSS fajl za IE
napisano u kategoriji: CSS i XHTML na 30 jun 2009Postoje nekoliko načina da se sredi šablon kad se pojave problemi sa raznim ekplorerima. Uobičajeno je to IE.
Sledećim kodom se poziva CSS skripta. Kod se stavlja izmedju tagova: <head>...</head> ispod title i meta tagova:
Ako je... onda učitaj
<!--[if condition]> HTML <![endif]-->
Ako nije ta verzija onda učitaj
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->
Koristite jedan od sledećih uslova:
Bilo koja verzija
IE
Verzija manje od
lt IE version
Manja verzija i ista
lte IE version
Samo ova verzija
IE version
Veće verzije i ista
gte IE version
Veća verzija
gt IE version
Primjer:
<!--[if lt IE 7]> <link href="/ie_6_i_nize.css" rel="stylesheet" type="text/css"> <![endif]-->
CSS Optimizacija
napisano u kategoriji: CSS i XHTML na 29 jun 2009
Kad je u pitanju izrada sajta, kao što znate, jako je bitno da se sajt optimizuje za što brže učitavanje. Kad su naši sajtovi u pitanju ne postoji veliko tržište i zato su male šanse da Vaš sajt zapati od velike bolesti - manjka protoka. Ipak, to ne bi smio biti izgovor da se maksimalno ne ubrza učitavanje sajta. Prepravljajući CSS datoteke, morate se izboriti za svaki mogući kilobajt da bi ste dobili brzi sajt. Neke od metoda optimizacije CSS datoteka su izbacivanje nekorišćenih selektora, praznog prostora, tabova, komentara i mijenjanje dugih komentara sa skraćenicama. Pretpostavljam da neki od vas imaju dovoljno znanja da sami edituju kod i da ga preprave ali smo ipak pripremili web alat za CSS optimizaciju.
Za optimizaciju posjetite sledeći link: CSS Optimizator
Joomla! Harcoded CSS
napisano u kategoriji: CSS i XHTML na 14 februar 2009Vjerujem, ko je makar jedanput radio šablon za Joomla! da je dolazio u situaciju da mu je potrebno podešavanje Joomla core stvari: naslova, modula, sadržaja... Sa dolje navedenim spiskom možete podesiti bilo koju standardnu džumlinu komponentu, modul ili plugin. Naročito je važno da ovo imate pri ruci prilikom dodatnog tvikovanja bilo koje ekstenzije.
Evo nadam se punog spiska:
Sadržaj - com_content
.componentheading
.contentpane
.contentdescription
.inputbox
.sectiontableheader
.sectiontableentry1
.sectiontableentry2
.sectiontablefooter
.blogsection
.contentpaneopen
.article_seperator
.contentheading
.contentpagetitle
.buttonheading
.small
.createdate
.modifydate
.readon
.pagenav_prev
.pagenav_next
.adminform
.button
.text_area
.blog
.blog_more
Kontakt - com_contact
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentpane
.contentheading
.contact_email
.inputbox
.button
Lofin forma - com_login
.contentpane
.componentheading
.inputbox
.button
Registracija - com_registration
.componentheading
.contentpane
.inputbox
.button
Korisnik - com_user
.componentheading
.inputbox
.button
.row1
.row2
Novosti - com_newsfeeds
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentheading
Pretraga - com_search
.componentheading
.contentpaneopen
.inputbox
.button
.searchintro
.small
.highlight
Glasanje - com_poll
.componentheading
.contentpane
.pollstableborder
.sectiontableheader
.smalldark
.button
.inputbox
Linkovi - com_weblinks
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.tabclass1
.tabclass2
.small
.category
.inputbox
Vraper - com_wrapper
.contentpane
.componentheading
.wrapper
"Prva strana" - includes/frontend
.moduletable
.newsfeed
.module
.message
Alat - includes\HTML_toolbar.php
.toolbar
Sitna podešavanja (ovo uvije volim doraditi) - includes\joomla.php
.profiler
.item
.small
.back_button
.buttonheading
.tab-page
.tab
.inputbox
Sitna podešavanja2 - includes\joomla.xml.php
.paramlist
.editlinktip
.text_area
.inputbox
Navigacija - includes\pageNavigation.php
.inputbox
.pagenav
Putanja - includes\pathway.php
.pathway
Nodovi - includes\js\dtree\dtree.js
.dtree
.dTreeNode
.node
.clip
Forme - includes\patTemplate\tmpl\forms.html
.message
.tooltip
.tab-page
.tab
.expander
Pluginovi- mambots\content\mosimage.php
.mosimage_caption
.mosimage
Pluginovi 2 - mambots\content\mospaging.php
.pagenavcounter
.pagenavbar
.contenttoc
.toclink
Glasanje 2 - mambots\content\mosvote.php
.content_rating
.content_vote
.button
modules\mod_mostread.php
.poll
.pollstableborder
.button
Zadnje vijesti - modules\mod_latestnews.php
.latestnews
Login - modules\mod_login.php
.button
.inputbox
modules\mod_mostread.php
.mostread
modules\mod_mostread.php
.syndicate
.syndicate_text
Pretraga - modules\mod_search.php
.inputbox
.button
.search
CSS: ID selektori vs Class
napisano u kategoriji: CSS i XHTML na 09 februar 2009Često postoji dilema kod izrade dizajna web strana oko pravilne upotrebe CSS ID-a i CSS klasa.
W3C definiše klasu ID kao "a unique identifier to an element" - jedinstveni identifikator jednog elementa. Takođe standardi specificiraju da ID ime može biti pozivano jednom na strani ili dokumentu. Ovo ima smisla jer uglavnom npr. ima samo jedan gornji meni na strani ili jedan header i sl. dok klasa može biti pozivana više puta. Druga razlika je što ID može biti pozvan i iz Javaskripta sa getElementByID function.
Ne postoji neko određeno striktno pravilo za upotrebu ID ili klase. Mogu se naći saveti da je za maksimalnu fleksibilnost bolje koristiti klase, izuzev kada je zbog Javaskripta bolje koristiti ID.
I klasa i ID imena su “case sensitive”. Npr, .klasa1 i .Klasa1 su dve različite klase.
Kako ih lakše razlikovati?
* ID = Kao lični identifikator koji je jedinstven za svaku osobu
* Class = Mnogo dece u jednom razredu
U CSS-u klasa je ime koje pocinje tackom (.) a ID selektor je ime koje počinje „tarabom“ (#). To moze da izlgeda npr. ovako:
#top_menu {
background-color: #ccc;
padding: 1em
}
.intro {
color: blue;
font-weight: bold;
}
U HTML to bi moglo da izgleda ovako:
<div id="top_menu">
<p class="intro">Ovo je neki tekst</p>
<p class="intro">ovo je neki drugi tekst</p>
</div>