இரு நிரல் படிவம் ஒன்றை வேர்ட்பிரஸில் உருவாக்குதல்

வேர்ட்பிரஸில் ஒரு அழகான படிவம் ஒன்றினை உருவாக்குவது பற்றி சில நாட்களின் முன்னர் ஒரு பதிவில் பார்த்தோம். இப்பதிவில் Contact Form 7 இனை பயன்படுத்தி இரு நிரல்கள் உடைய ஒரு படிவம் ஒன்றை உருவாக்குவதனை பார்ப்போம்.

முதலில் Form editor இனை பயன்படுத்தி படிவத்தை உருவாக்கிக் கொள்ள வேண்டும். எங்களுக்கு இரு நிரலில் படிவம் தேவை என்பதனால் Form field களை css class களினால் கீழ் காட்டியது போல வேறுபடுத்திக் கொள்ள வேண்டும்.

<div id="two-column">
<div id="left">
First Name[text* first-name]
Email[email* your-email]
</div>

<div id="right">
Last Name[text* last-name]
Phone[text* your-phone]
</div>

Subject[text* your-subject]
Your message [textarea your-message]

[submit "Send"]
</div>

இங்கே சில விடயங்களை கவனிக்க வேண்டும்.
அ. ஒவ்வொரு Form field உம் P tag இனால் சூழப்பட்டுள்ளன.
ஆ. Label உம் Form element உம் br tag இனால் வேறுபடுத்தப்பட்டுள்ளன.
இ. #two-column என்கின்ற CSS ID இனால் முழு படிவமும் சூழப்பட்டுள்ளது.
ஈ. இடது புறம் இருக்கவேண்டியவை #left என்கின்ற CSS ID இனால் சூழப்பட்டுள்ளன.
உ. வலது புறம் இருக்கவேண்டியவை #right என்கின்ற CSS ID இனால் சூழப்பட்டுள்ளன.

படிவத்தை வேர்ட்பிரஸ் பக்கம் ஒன்றினில் சேர்த்து வெளியிட்டுக்கொள்ளுங்கள். பொதுவாக கீழ்க்காட்டப்பட்டது போல படிவம் இருக்கும்.

இப்பொழுது கொஞ்சம் CSS இனை சேர்ப்பதன் மூலம் படிவத்தை அழகாக்கிக் கொள்ளப் போகின்றோம்.

#two-column{
    width: 550px;
}
#two-column #left{
    width: 300px;
    float: left;
}
#two-column #right{
    width: 250px;
    float: right;
}
#two-column p{
    margin-bottom: 12px;
}
#two-column input[type="text"]{
    border:none;
    border:1px solid #000;
    font-size :14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
    padding: 5px;
}
#two-column #right input[type="text"], #two-column #left input[type="text"]{
    width:240px;
}
#two-column textarea {
    position: relative;
    padding: 5px;
    border:1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
}
#two-column input[type="submit"]{
    padding:8px 18px;
    background:#222;
    color:#fff;
    border: 1px solid #fff;
    float:right;
    font-size: 14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#two-column input[type="text"]:focus, #two-column textarea:focus{
    background: #eee;
}
#two-column input[type="submit"]:hover{
    background:#fff;
    color:#222;
    border: 1px solid #222;
}

இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டியதுபோல இருக்கும்.

இந்த வார இணையம் – பெப் 26

கூகிள் தனியுரிமைக் கொள்கை மாற்றம், நீங்கள் தெரிந்து கொள்ள வேண்டியது என்ன?

கூகிள் நிறுவனம் அண்மையில் தனது தனியுரிமைக் கொள்கையில் மாற்றம் கொண்டு வருவதாய் அறிவித்தது. பலரது வெறுப்பையும் சம்பாதித்திருக்கும் இவ்வறிவிப்பு தொடர்பாய் நீங்கள் அறிந்து கொள்ள வேண்டியது என்ன?

இவ்வளவு காலமும் ஒவ்வொரு கூகிளின் சேவைகளுக்கும் (Blogger, Search, Maps, G+ etc..) தனித்தனியான தனியுரிமைக்கொள்கைகள் இருந்தன. இப்பொழுது அனைத்து தனியுரிமைக்கொள்கைகளும் ஒன்றாக்கப்பட்டுள்ளது. இதன்மூலம் நீங்கள் ஒரு சேவையில் பயன்படுத்தப்படுகின்ற தரவுகள் மற்றையதொரு சேவையினை பயன்படுத்தும்போது கூகிளினால் பயன்படுத்தப்பட்டும். உதாரணமாக, நீங்கள் இரஜனிகாந்தினைப் பற்றி கூகிளின் தேடினால் பின்னர் நீங்கள் Youtube இனை பயன்படுத்தும் போது அது உங்களுக்கு இரஜனிகாந்தை பற்றிய காணொளிகளை முன்னால் காட்டும். இதில் பிரச்சனை என்னவென்றால் நீங்கள் கூகிள் சேவையில் செய்கின்ற ஒவ்வொரு செயற்பாடும், சேமிக்கப்பட்டு உங்களைப்பற்றிய பூரண தகவல் கூகிளிடம் இருக்கும். இதை கூகிள் எவ்வாறு பயன்படுத்தும் என்பதுதான் கேள்விக்குறி.

இது தொடர்பாய் பலரும் எதிர்மறையான கருத்துக்களையே தெரிவித்து வருகின்றனர். ZDNet இன் Larry Dignan, உங்கள் மனைவியை விட கூகிளிற்கு உங்களைப்பற்றிய அதிக விபரம் தெரியவரும் என சொல்கிறார். கீழே சிலருடைய கருத்துக்களை பாருங்கள்.

‘It means that things you could do in relative anonymity today, will be explicitly associated with your name, your face, your phone number.

‘If you use Google’s services, you have to agree to this new privacy policy. It is an explicit reversal of its previous policies.’

Mat Honan, Gizmodo

‘Google will know more about you than your wife does. Everything across your screens will be integrated and tracked.

‘Google noted that it collects information you provide, data from your usage, device information and location. Unique applications are also noted.

‘Sure you can use Google’s dashboard and ad manager to cut things out, but this policy feels Big Brother-ish.’
Larry Dignan, ZDnet.com

‘A user of Gmail, for instance, may send messages about a private meeting with a colleague and may not want the location of that meeting to be thrown into Google’s massive cauldron of data or used for Google’s maps application.’
Cecilia Kang, of The Washington Post

இது தொடர்பான கூகிளின் காணொளி: http://www.youtube.com/watch?v=KGghlPmebCY

VLC 2.0 வெளியானது

எந்த இயங்குதளமாயிருந்தாலென்ன எனக்கு பிடித்த ஒரே Video player VLC மட்டும்தான். நீண்ட காலத்தின் பின் மிகவும் அழகாக்கப்பட்ட இரண்டாவது பதிப்பு “Twoflower” வெளியாகியுள்ளது. முன்னைய பதிப்புகளில் இருந்த எளிமைத்தன்மை இப்பதிப்பில் காணாமல் போயிருந்தாலும் பல புதிய வசதிகள் சேர்க்கப்பட்டுள்ளன. MAC பதிப்பு முற்றிலும் புதிய வடித்தை பெற்றிருக்கின்றது. முன்னைய பதிப்புக்களை விட இப்பதிப்பு அதிக அளவான காணொளி வகைகளை திறக்கக்கூடியது.

தரவிறக்க: http://www.videolan.org

Apache புதிய பதிப்பு வெளியானது

இணைய வழங்கி மென்பொருள்களில் முதலிடம் வகிக்கும் Apache HTTP server இன் புதிய பதிப்பை (2.4) Apache foundation ஆறு வருடங்களின் பின்னர் வெளியிட்டுள்ளது. இதற்கு முன்னர் 2005ம் ஆண்டில் 2.2 பதிப்பு வெளியானது. இம்மென்பொருள் ஏறத்தாள 400 மில்லியன் வழங்கிகளை செயற்படுத்துகின்றது.

Apache foundation : http://www.apache.org/
Apache HTTP Server : http://httpd.apache.org/

அழகான படிவமொன்றை வேர்ட்பிரஸினில் உருவாக்குதல்

படிவங்கள் என்று வருகின்ற போது வேர்ட்பிரஸில் இருக்கும் சிறந்த ஒரு இலவச நீட்சி Contact form 7. மிக இலகுவாக படிவங்களை உருவாக்கிக் கொள்ள முடியவதும், அதனை இலகுவாக அழகுபடுத்திக் கொள்ள முடிவதும் இதன் சிறப்பம்சமாகும். இந் நீட்சியை பயன்படுத்தி வித்தியாசமானதொரு படிவத்தை எவ்வாறு உருவாக்கிக் கொள்ளுவது என்று படிமுறையாக பார்ப்போம்.

௧. படிவத்தொகுப்பானை பயன்படுத்தி உங்கள் படிவத்தினை கீழ் காட்டியவாறு உருவாக்கிக் கொள்ளுங்கள். படிவம் ஒரு பந்திக்குள் இடைச்செருகப் பட்டுள்ளது.

சில விடயங்களை இங்கே கவனித்துக் கொள்ள வேண்டும்.
அ. பந்தி முழுவதனையும் “p” tag இனால் மூடிக்கொள்ள வேண்டும்.
ஆ. Contact form 7 இன் Watermark வசதியை label ஆக பயன்படுத்திக் கொள்ளலாம்.

௨. உங்கள் படிவத்தை வேர்ட்பிரஸ் பக்கம் ஒன்றினில் சேர்த்து வெளியிட்டுக் கொள்ளுங்கள்.
௩. இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டப்பட்டது போல இருக்கும். (உங்கள் வார்ப்புருவைப் பொறுத்து மாறுபடலாம்.)

௪. கொஞ்ச css உங்கள் படிவத்தை அழகாக்கி விடும். (எனது படிவத்தை நான் myform என்கின்ற css id இனால் வேறுபடுத்தியிருக்கின்றேன்.)

#myform{
    width:650px;
}
#myform p{
    font-size:14px;
    line-height:30px;
}
#myform input[type="text"]{
    border:none;
    border-bottom:1px dotted #000;
    background: transparent;
    font-size :14px;
    width:250px;
}
#myform .watermark{
    color:#ccc;
}
#myform select {
    -webkit-appearance: button;
    -webkit-border-radius: 2px;
    -webkit-padding-end: 10px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url(images/select_arrow.gif),
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-color:transparent;
    background-position: center right;
    background-repeat: no-repeat;
    border:none;
    border-bottom: 1px dotted #000;
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#myform input[type="submit"]{
    padding:8px 18px;
    background:#222;
    color:#fff;
    border: 1px solid #fff;
    float:right;
    margin-right:20px;
}
#myform input[type="submit"]:hover{
    background:#fff;
    color:#222;
    border: 1px solid #222;
}

௫. இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டப்பட்டது போல இருக்கும்.