వర్గం: కూడలి

CSS తో వెబ్ పేజీల స్టైలింగ్ …

వెబ్ పేజీలు కంటికింపుగా కనిపించడం దాని స్టైలింగ్ మీద ఆధార పడి ఉంటుంది. ఎంత చక్కని కంటెంటు మీ వెబ్ పేజీలలో ఉన్నా దానిని సరిగా స్టైల్ చెయ్యకపోతే ఎవరూ చూడరు. నేను ఇంతకు ముందు రాసిన యూజబిలిటీ వ్యాసంలో కొంత దీని మీద చెప్పాను.

ఇప్పుడు అసలు వెబ్ పేజీలకు స్టైలింగ్ ఎలా చేస్తారో నాకు తెలిసినంత వరకూ చెబుతాను.

HTML టాగ్స్ ద్వారా చేస్తుందని అందరికీ తెలుసు. అంటే ఒక <P> అనే టాగ్ వాడితే పారాగ్రాఫ్ అని, <br> అంటే లైన్ బ్రేక్ కోసమనీ, ఇలా తయారు చేసారు. వాటిని ఉపయోగించి మనం వెబ్ పేజీలను రాస్తాము. అది ఒక ఫ్లో లా ఉంటుంది. ఎలాగంటే ముందు <HTML> టాగ్ తో మొదలవుతుంది. తరువాత <HEAD> టాగ్, తరవాత <BODY> టాగ్ అలాగన్నమాట.

ఇక కొద్ది కొద్దిగా విహరిణులు విస్తరించేసరికి ఎవరికి వారు (అప్పట్లో నెట్‌స్కేప్, ఇంటర్నెట్ ఎక్స్‌ప్లోరర్) తమ సొంత టాగులని ఉపయోగించడం మొదలుపెట్టారు. అలా కంపాటిబిలిటీ లేకుండా పోయింది అన్నమాట విహరిణుల మధ్య. అప్పుడే స్టాండర్డైజేషన్ మొదలెట్టారు. W3C (World Wide Web Consortium) HTML కి సంబంధించిన స్పెసిఫికేషన్లను మెయింటెయిన్ చేస్తుంది. స్టైలింగ్ విధానాల కోసం దాని చేత మెయిటెయిన్ చెయ్యబడే విధానం CSS

CSS పలు విధాలుగా రాయవచ్చు (వికీ నుండి):

  • External Stylesheet
  • Inline Style
  • Embedded Style

External Stylesheets: దీని ద్వారా అయితే మన స్టైలింగ్ ఆప్షన్స్ అన్నిటినీ మన HTML డాక్యుమెంటు లో కాకుండా ఇంకో వేరే డాక్యుమెంటులో భద్రపరుస్తాము. ఆ డాక్యుమెంటు .css అనే ఎక్స్టెన్షన్ తో ఉంటుంది. అలా తయారయిన డాక్యుమెంటు ని HTML పేజీకి ఆపాదించవచ్చు.

ఉదా: మీ HTML పేజీ ఇలా ఉందనుకోండి

<html>
<head>
<title>Example Document</title>
</head>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

అది ఇలా కనిపిస్తుంది.

దానికే ఓ స్టైల్‌షీట్ రాసి ఈ కింది విధంగా ఆ HTML పేజీకి అనుసంధానిస్తే ఇలా కనబడుతుంది.

style.css

h1 {
color: 000066;
text-align: center;
}

body {
font-family: Arial, serif;
}

example.html

<html>
<head>
<LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css”>
<title>Example Document</title>
</head>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

ఇలా ఇంకో ఫైలులో స్టైలుని రాయటం External Stylesheet విధానం అన్నమాట.

Embedded Style: మన స్టైలింగ్ ని HTML లోనే ఎంబెడ్ చెయ్యడం ఇంకో విధానం. అదెలా అంటే

<html>
<head>
<title>Example Document</title>
<style type=”text/css”>
h1 {
color: 000066;
text-align: center;
}

body {
font-family: Arial, serif
}
</style>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

పై విధంగా రాయవచ్చు.

Inline Style: ఇక మూడో విధానం స్టైలుని మన HTML ఎలిమెంటు తో పాటే ఉంచడం. అది ఈ కింది విధంగా

<html>
<head>
<title>Example Document</title>
</head>
<body style=”font-family: Arial, serif”>
<h1 style=”color: 000066; text-align: center;”>Example H1 Tag</h1>
</body>
</html>

పై మూడు విధాలలో మన సౌలభ్యాన్ని బట్టి వాడుకోవచ్చు.

ఒక వెబ్ పేజీ ని తగినట్టుగా డిజైన్ చెయ్యడం అంత సులభం కాదు. తగిన రంగులు, ఫాంటులు, టెక్స్ట్ సైజులు వాడకపోతే అసలు నప్పదు.

మనకు వివిధ బ్లాగు అగ్రిగేటర్లు ఉన్నాయి. అన్నిట్లోకీ మనం కూడలి నే ఎక్కువగా ఎందుకు వాడతాము. మంచి ఫీచర్లు ఒక కారణమయితే అంతకన్నా మంచి డిజైన్ అసలు కారణం. మంచి ఫీచర్లున్నా కానీ సరిగా డిజైన్ చెయ్యకపోతే దానిని వాడలేము.

ఇది చెప్ప్పినందుకు జల్లెడ వారికి కోపమొస్తే రావు గాక.

ఉదా: జల్లెడ ని తీసుకుంటే దాంట్లో కూడలి కంటే తొందరగా టపాలు ప్రత్యక్షమవుతాయి. చక్కగా శోధన అదీ కూడా ఉంచారు. అంతా బానే ఉంది కానీ ఆ పేజీ తెరవగానే నాకు దానిని వాడబుద్ధి కాదు. ఎందుకంటే అది అసలు కంటికింపుగా ఉండదు. మొదట్లో వారు ఓ సారి ఫీడ్‌బాక్ అడిగినప్పుడు సరి చెయ్యమని చెప్పినట్టు గుర్తు.

ఆ డిజైన్ వారికి నప్పినట్టు అనిపించవచ్చు. కానీ నాకు మాత్రం నచ్చలేదు. అందుకే నేను నా సొంత డిజైన్ తయారు చేసుకున్నాను దానికి, నా సొంత CSS ద్వారా. ఒక జిడ్డుకోతి స్క్రిప్టు ద్వారా దానిని జల్లెడ కి జతచేసాను. ఇప్పుడు నేను నాకు కావలసినట్టు వాడుకుంటున్నాను.

ముందు తరవాత పేజీల చిత్రాలు మీరు ఈ కింద చూడవచ్చు.

స్క్రిప్టు కావాలంటే ఇక్కడ నుండి దిగుమతి చేసుకోవచ్చు.

ఇక ముగించే ముందు నా అభిప్రాయం ఒకటి చెబుతా. మీరు వెబ్ పేజీలను డిజైన్ చేసేటప్పుడు ముద్దు మెథడాలజీ, అదే నండీ KISS (Keep It Simple and Stupid) ఫాలో అయితే మంచిది. స్టైలింగ్ చెయ్యాలని చెప్పి అతిగా రంగులు, హంగామా తగిలిస్తే మొదటికే మోసం వస్తుంది. చక్కని స్టైలింగుతో రాసి మాకు మరిన్ని మంచి వెబ్ పేజీలు ప్రసాదించండి 🙂

కూడలి కి కొత్త ఫీచర్లు…

అదేంటి వీవెన్ కాకుండా నేను విడుదల చేస్తున్నానేంటా అని అనుకుంటున్నారా ? అదే మరి.

మొన్న వీవెన్ గారు కూడలి కోసం కొత్త ఫీచర్ రిలీజ్ చేసినప్పుడు రానారె అడిగాడు, కూడలి లో మనకు కావలసిన టపాలు మాత్రమే కనిపించేలా చేసే ఫీచర్ కోసమని.

అంతకు ముందే నేను ఆ ఫీచర్ రాద్దామనుకున్నా… 🙂

దీనికి జిడ్డుకోతి కావాలి (అదే Greasemonkey). దానిని మీ మంట నక్క లో ఇన్స్టాల్ చేసుకోండి.

తర్వాత ఇక్కడ నుంచి స్క్రిప్ట్ ని దిగుమతి చేసుకుని జిడ్డు కోతిలో చేర్చుకోండి.

ఇదెలా పనిచేస్తుందంటే దీనిని మీ జిడ్డు కోతిలో అమర్చుకున్న తర్వాత మొదటి సారి కూడలి ని తెరుస్తే మిమ్మల్ని ఓ కొచ్చెన్ అడుగుద్ది, ఏ ఏ బ్లాగుల నుండి మీకు టపాలు కనిపించాలో అని. కాబట్టి ముందు మీకు ఏ ఏ బ్లాగులు కనిపించాలనుకుంటూన్నారో వాటి లంకెలు రెడీగా పెట్టుకోండి.

మీకు కావలసిన బ్లాగులన్నీ “|” డీలిమిటర్ తో అందులో ఇవ్వండి.

ఉదా: http://abc.blogspot.com|http://def.wordpress.com అలా అన్నమాట. అంతే కూడలిని ఓ సారి రిఫ్రెష్ చెయ్యండి. మీకు కావలసిన బ్లాగుల నుండి టపాలు మాత్రమే కనిపిస్తాయి.

ఉదా: http://uniquespeck.blogspot.com/ అనే బ్లాగొకటే కనిపించాలని నేను ఎంచుకుంటే కూడలి పేజీ నాకు ఈ కింద ఉన్నట్లుగా కనిపిస్తుంది.

కానీ ఇందులో ఓ మతలబు ఉంది. మీకు కావలసిన బ్లాగుల లిస్టులో ఓ కొత్త బ్లాగుని చేర్చాలనుకోండి ఈ కింది ప్రొసీజర్ ఫాలో అవ్వాలి:

మీ మంట నక్క URL bar లో about:config అని టైప్ చెయ్యండి. వచ్చిన తర్వాత, దాని ఫిల్టర్ బాక్సులో greasemonkey.scriptvals.http://employees.org/~praveeng/KoodaliFilter-Include.
blockurls అని టైప్ చేసి వచ్చినే ఎంట్రీ ని ఎంచుకుని మీ ఎలక తో డబల్ క్లిక్కండి. అక్కడ మీకు కావలసిన బ్లాగుని ఇంకో “|” జత చేసి జోడించండి. ఇక నుండి ఆ బ్లాగు టపాలు కూడా మీకు కనిపించడం మొదలెడుతుంది.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ఒక వేళ మీరు కావలసిన బ్లాగులు కాకుండా అక్కరలేని బ్లాగులు తీసెయ్యాలనుకున్నరనుకోండి కూడలి లోనుంచి దానికి కూడా ఓ స్క్రిప్ట్ రాశా. పై దీనికి ఉల్టా అన్నమాట. ఉపయోగించడం పై దానిలాగానే. కాకపోతే దీనికి మీకు అక్కరలేని బ్లాగుల లంకెలు ఇవ్వండి.

తరవాతి సారి నుంచి మీకు అక్కర్లేని బ్లాగులు కనిపించవు. పైదాని లాగే ఈ లిస్టు కి ఏదయినా ఇంకో బ్లాగు జోడించాలంటే మళ్ళీ about:config కి వెళ్ళి ఈ సారి greasemonkey.scriptvals.http://employees.org/~praveeng/KoodaliFilter-Exclude.
blockurls అనే దానిని ఎంచుకుని దానికి ఆ బ్లాగు లంకె ని జోడించండి. అంతే.

కూడలిలో కూడా ఇదే కోడునుపయోగించి ఫీచర్ ని జోడించచ్చు. కాకపోతే ఏ కుకీ నో ఉపయోగించాలి బ్లాగులను గుర్తు పెట్టుకోవడానికి.

* గ్రీజ్‌మంకీ గురించి ఓ చిన్న ఇంట్రడక్షన్ కావాలంటే నా ఈ టపా చదవచ్చు. ఇంకా ఎక్కువ తెలుసుకోవాలనుకుంటే ఈ పుస్తకం చదవండి.
* మీరు గనక మంట నక్క (firefox) ఉపయోగించనట్లయితే మీకిది పనికిరాదు.

కూడలి లాంటి అగ్రిగేటర్ సెటప్ చెయ్యడం ఎలా ?

కూడలి ఒక ఫీడ్ అగ్రిగేటర్. అంటే వివిధ RSS ఫీడ్ల నుంచి సమాచారం సేకరించి మనకు చూపుతుందన్నమాట.
ఇలాంటి వెబ్ సైట్ లని ఎలా సెటప్ చెయ్యాలి ?

దీనికి ఎన్నో విధానాలు ఉన్నాయి, ఒక రెండు మూడు విధానాలు చెబుతాను.

– మొదటిది వర్డ్ ప్రెస్ ఉపయోగించి. వర్డ్ ప్రెస్ గురించి అందరికీ తెలిసిందే. ఇది ఒక బ్లాగింగ్ సాఫ్ట్‌వేర్. దీనిని ఇన్స్టాల్ చేసుకోవడం చాలా సులభం. వర్డ్‌ప్రెస్ కి ఎన్నో ప్లగిన్స్ ఉన్నాయి. వాటిలో FeedWordPress ఒకటి. దీనిని మీ ప్లగిన్స్ డైరెక్టరీ లోకి కాపీ చేస్కుంటే మీకు మీ అడ్మిన్ సెట్టింగ్స్ లో దీని సెట్టింగ్స్ కనిపిస్తాయి. Blogroll అనే మెనూ కింద మీకు Syndication అని ఒక మెనూ కనిపిస్తుంది. దాంట్లో కి వెళ్ళి మీరు మీ ఫీడ్ URL అందులో ఇస్తే చాలు. మీ ఫీడ్ వర్డ్ ప్రెస్ లో వచ్చేస్తుంది. అలా అక్కడ ఎన్నో ఫీడ్ల నుంచి పోస్టులను సేకరించి మీ వర్డ్ ప్రెస్ లో చూపించచ్చు. ఉదాహరణకి ఇది చూడండి. ఇందులో పనికొచ్చేదేమిటి అంటే మీ పోస్టులన్నీ ఎప్పటికీ ఆర్చైవ్ అవుతాయి. అంటే పాత పోస్టులు కూడా లభ్యమవుతాయి అన్నమాట. కానీ ఇందులో నష్టం ఏమిటి అంటే ఈ పోస్టులు కనక ఎక్కువ గా ఉంటే అది తీసుకునే డాటా సైజు. డాటా బేస్ సైజు పెరిగిపోతూ ఉంటుంది. ఇదెక్కడ ఉపయోగం అంటే మీకు వివిధ బ్లాగులున్నాయి అనుకోండి, వాటన్నిటినీ ఒకే చోట చేర్చచ్చు దీని ద్వారా.

– ఇలా కాక మీరు కూడలి లాంటి పద్ధతి వాడాలనుకున్నారనుకోండి కూడలి వాడేది ప్లానెట్ అనే సాఫ్ట్‌వేర్. ఇది ముందే సెట్ చేసుకున్న టైములో పోస్టులను అన్ని బ్లాగుల నుంచీ తెచ్చి ఒక చిన్న ఫైలులో పెట్టుకుంటుంది. దీనికి డాటాబేస్ అవసరం లేదు. దీనిని నడపడానికి పైథాన్ అవసరమవుతుంది. ఇది ఎంతో చక్కని ఉపకరణం. ఎందుకంటే సర్వర్ల మీద ఒతిడి తేదు. పోస్టులన్నీ ఒకేసారి తెచ్చి పెట్టుకుంటుంది లోకల్ గా, అదీ టెంపరరీ గా… అంటే ఎంచుకున్న టైం ఇంటర్వెల్ అయిపోగానే మళ్ళీ లోకల్ ఫైల్ ని అప్డేట్ చేసుకుంటుంది. దీంట్లో లాభమేమిటంటే ఎక్కువ స్పేస్ అవసరం లేదు. ఎప్పటికప్పుడు పాత పోస్టులు వెళ్ళి కొత్త పోస్టులకి దారిస్తాయి (River of feeds). అదే కాక ఇది అన్నిటినీ కలిపి కొత్త ఫీడ్ కూడా ఇస్తుంది. కానీ దీని నష్టం ఏమిటంటే పాత పోస్టులను ఆర్చైవ్ చెయ్యలేము.

– ఇక మీకు ఎక్కువ కస్టమైజేషన్ కావాలంటె మీరు Magpie RSS అనే ఒక PHP లైబ్రరీ వాడచ్చు.

దాన్నుపయోగించి స్క్రిప్ట్ రాయడం ఎంత సులభమో ఈ కింద చూడండి.

<?
header(‘Content-type: text/html; charset=UTF-8’) ;
require_once(‘rss_fetch.inc’);

$rss = fetch_rss(“http://praveengarlapati.blogspot.com/feeds/posts/default”);

if ( $rss ) {
echo “<strong>” . $rss->channel[‘title’] . “</strong><p>”
echo “<ul>”
foreach ($rss->items as $item)
{
$href = $item[‘link’];
$title = $item[‘title’];
$summary = $item[‘summary’];
echo “<p><a href=$href>$title</a></p><p>$summary</p><p></p>”
}
echo “</ul>”
}
else {
echo “Feed could not be retrieved ! ” .
“<br>Error Message: ” . magpie_error();
}

?>

ఇది చాలా బేసిక్ స్క్రిప్ట్. దీనికి డాటాబేస్ జోడించి పూర్తి అప్లికేషన్ గా రాయచ్చు. లేదా కూడలి మాదిరిగా ఎప్పటికప్పుడు ఫీడ్లు తెచ్చేటట్టుగా కూడా చేసుకోవచ్చు.

* ఇక పైన చెప్పిన వాటన్నిటికీ మీరు నేను ఇంతకు ముందు చెప్పిన Yahoo! Pipes ఉపయోగిస్తే మీరు ఎప్పుడూ ఒక ఫీడ్ నే ఉపయోగించచ్చు. Yahoo Pipes! లో కొత్త ఫీడ్లను జోడిస్తే సరిపోతుంది. మీకు కావలసిన కస్టమైజేషను, ఫిల్టరింగు అదీ కూడా అక్కడ సులభంగా చేసుకోవచ్చు.

* ఇలాంటి అగ్రిగేటర్లు సెటప్ చేసేటపుడు గుర్తుంచుకోవల్సిందేమిటంటే మీ స్క్రిప్టులు గానీ ప్రోగ్రాములు గానీ ఆ బ్లాగులు, ఫీడ్లు హోస్ట్ చేస్తున్న సర్వర్ల మీద ఎక్కువ ఒత్తిడి పెంచకూడదు. ఎందుకంటే బాండ్విడ్త్ కాస్ట్లీ మరి.

సరి కొత్త కూడలి …

మీరందరూ సరి కొత్త కూడలి ని ఇప్పటికే చూసి ఉంటారు. నూతన సంవత్సరంలో కూడలి కి కొత్త సొబాగులు అద్దిన వీవెన్ గారికి ధన్యవాదాలు. కూడలి కి ఒక సరి కొత్త ఇంటిని కల్పించి సరి కొత్త design లతో ఎంతో చక్కగా అలంకరించారు.

అదే కాక కొత్తగా వ్యాఖ్యలు, వార్తలు, వెబ్ పత్రికలు అనే కొత్త పేజీలను సృష్టించారు. బావుంది.

అన్నిటికన్నా నాకు నచ్చింది మాత్రం నేను ఎన్నళ్లనుంచో ఎదురు చూస్తున్న RSS సౌలభ్యం. ప్రతి రెండు మూడు గంటలకోసారి కూడలి ని తెరిచి చూడక్కర్లెకుండా, మనకు నచ్చిన RSS ఫీడ్ readers లో ఈ ఫీడ్ ని తగిలించుకుంటే సరి.