உள்ளடக்கம்
- HTML5 சொற்பொருளைப் பயன்படுத்தி பக்கங்களை உருவாக்குதல்
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- இன்னும் இருக்கிறது...
- ஆர்.டி.எஃப்.ஏ.
- மைக்ரோடேட்டா
- முற்போக்கான மேம்பாட்டிற்கு CSS3 அம்சங்களைப் பயன்படுத்துதல்
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- இன்னும் இருக்கிறது...
- CSS3 சாய்வுகளைப் புரிந்துகொள்வது
- CSS3, தயவுசெய்து!
- பதிலளிக்கக்கூடிய வடிவமைப்பைப் பயன்படுத்துதல்
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- இன்னும் இருக்கிறது...
- பாலிஃபில்ஸ் ஸ்கிரிப்ட் ஏற்றுதலை மேம்படுத்துகிறது
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- இன்னும் இருக்கிறது...
- yepnope
- பயனர் முகவர் கண்டறிதலைப் பயன்படுத்துகிறது
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- இன்னும் இருக்கிறது...
- மொபைல் உலாவி கண்டறிதல் முறைகள்
- மொபைல் புக்மார்க்கு குமிழியை முகப்பு பக்கத்தில் சேர்ப்பது
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- டெக்ஸ்டேரியா மற்றும் ஆட்டோகிரோ படிவங்களுடன் தொடர்பு பக்கத்தை உருவாக்குதல்
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- இன்னும் இருக்கிறது...
- உடனடி பதிலுடன் பொத்தான்களை உருவாக்குதல்
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- இன்னும் இருக்கிறது...
- வெப்கிட் குரோம் மறைக்கிறது
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- மொபைல் தள வரைபடத்தை உருவாக்குதல்
- தயாராகி வருகிறது
- அதை எப்படி செய்வது ...
- எப்படி இது செயல்படுகிறது...
- இன்னும் இருக்கிறது...
- கூகிள் மற்றும் மொபைல் நட்பு தள கட்டிடம்
- கூகிள் மற்றும் மொபைல் தள அட்டவணைப்படுத்தல்
இந்த பகுதி 4 ஆம் அத்தியாயம் HTML5 மொபைல் மேம்பாட்டு சமையல் புத்தகம் வழங்கியவர் ஷி சுவான், பேக் பப்ளிஷிங்கில் அவுட்.
மொபைல் சாதனங்களில், டெஸ்க்டாப் கணினியில் உள்ளதைப் போல அலைவரிசை எப்போதும் சிறப்பாக இருக்காது. நீங்கள் மெதுவான 3 ஜி நெட்வொர்க்கில் இருந்தால், வைஃபை ஹாட்ஸ்பாட்டை விட விஷயங்களை மிக மெதுவாக ஏற்ற முடியும். வைஃபை இணைப்புகளுக்கு கூட, பல மொபைல் உலாவிகள் டெஸ்க்டாப் கணினிகளை விட மெதுவாக செயலாக்குகின்றன. எனவே நாங்கள் மொபைல் தளங்களை உருவாக்கும்போது, அவை வேகமாகவும் பதிலளிக்கக்கூடியதாகவும் இருக்க வேண்டும்.
இந்த அத்தியாயத்திலிருந்து, HTML5 அம்சங்களையும் அறிமுகப்படுத்தத் தொடங்குவோம். HTML5 என்பது சொற்பொருள், புதிய CSS விதிகள் மற்றும் பண்புகள் மற்றும் புதிய ஜாவாஸ்கிரிப்ட் API களை உள்ளடக்கிய தொழில்நுட்பங்களின் தொகுப்பாகும், அவை சிறந்த கட்டமைக்கப்பட்ட வலைப்பக்கங்கள் மற்றும் சக்திவாய்ந்த வலை பயன்பாடுகளை உருவாக்க பயன்படும். பின்வருபவை எட்டு முக்கிய HTML5 அம்சங்கள்:
- சொற்பொருள்
- ஆஃப்லைன் மற்றும் சேமிப்பு
- சாதன அணுகல்
- இணைப்பு
- மல்டிமீடியா
- 3D, கிராபிக்ஸ் மற்றும் விளைவுகள்
- செயல்திறன் மற்றும் ஒருங்கிணைப்பு
- CSS3
இந்த அம்சங்கள் அனைத்தும் மொபைல் பிரத்தியேகமானவை அல்ல; சில மொபைல் வலைடன் தொடர்புடையவை, சில மொபைல் மற்றும் டெஸ்க்டாப் வலை இரண்டிற்கும் பொதுவானவை. இந்த அம்சங்கள் ஒவ்வொன்றையும் பற்றி பேசுவோம், மேலும் அவை எங்கள் மொபைல் வளர்ச்சிக்கு எவ்வாறு சிறந்த முறையில் உதவக்கூடும் என்பதைப் பார்ப்போம்.
புதிய சொற்பொருள் குறிச்சொற்கள் மற்றும் CSS3 ஐப் பயன்படுத்தி உருவாக்கப்பட்ட எடுத்துக்காட்டுகளின் அடிப்படையில், மொபைல் உலாவி என்ன வழங்குகின்றது என்பதையும், இந்த தனித்துவமான அம்சங்களைப் பயன்படுத்தி ஒரு வலைத்தளத்தை எவ்வாறு உருவாக்குவது என்பதையும் முழுமையாகப் பற்றி விவாதிப்போம்.
HTML5 சொற்பொருளைப் பயன்படுத்தி பக்கங்களை உருவாக்குதல்
இலக்கு சாதனம்: குறுக்கு உலாவி
HTML5 பணக்கார குறிச்சொற்களை அறிமுகப்படுத்தியது; இந்த குறிச்சொற்கள் கட்டமைப்பிற்கு அர்த்தம் தருகின்றன. சொற்பொருள் என்பது HTML5 இன் அடிப்படை அம்சமாகும்.
நாங்கள் இங்குள்ள எல்லா குறிச்சொற்களையும் கடந்து செல்ல மாட்டோம், ஆனால் பொதுவாகப் பயன்படுத்தப்படும் சிலவற்றை உள்ளடக்கும்.
தயாராகி வருகிறது
முதலில், ஒரு புதிய HTML கோப்பை உருவாக்கி அதற்கு பெயரிடுவோம் ch04r01.html. இசையைப் பற்றிய ஒரு கற்பனையான தளத்தை உருவாக்குவோம்.
அதை எப்படி செய்வது ...
எங்கள் HTML ஆவணத்தில், பின்வரும் குறியீட்டைத் தட்டச்சு செய்க:
! டாக்டைப் html> html> தலை> தலைப்பு> first.fm/title> மெட்டா எழுத்துக்குறி = "utf-8"> மெட்டா பெயர் = "வியூபோர்ட்" உள்ளடக்கம் = "அகலம் = சாதன அகலம், ஆரம்ப அளவு = 1.0"> நடை> / style> / head> body> header> h1> first.fm/h1> / header> div id = "main"> h2> பக்கங்கள் / h2> nav> ul> li> a href = "music.html"> இசை / a> / li> li> a href = "radio.html"> வானொலி </ a> </ li> a href = "events.html"> நிகழ்வுகள் </ a> "> விளக்கப்படங்கள் </ li> li> a href =" community.html "> சமூகம் </ a> / li> li> a href =" help.html "> உதவி </ a> "about.html"> பற்றி / அ>
எப்படி இது செயல்படுகிறது...
தி தலைப்பு உறுப்பு பெரும்பாலும் பயன்படுத்தப்படுகிறது h1 க்கு h6 கூறுகள்; இது முழு பக்கத்தின் தலைவராக அல்லது எந்த தொகுதி-நிலை உறுப்புகளின் தலைவராக தோன்றக்கூடும். இது பெரும்பாலும் தலைப்பு, வசன வரிகள் அல்லது கோஷம் ஆகியவற்றைக் கொண்டுள்ளது.
தலைப்பு> உறுப்பு:
தலைப்பு> / தலைப்பு>
தி nav உறுப்பு ஒரு ஆவணத்திற்கான வழிசெலுத்தலைக் குறிக்கிறது. தி nav உறுப்பு என்பது பிற ஆவணங்களுக்கான இணைப்புகள் அல்லது தற்போதைய ஆவணத்தில் உள்ள பகுதிகளைக் கொண்ட ஒரு பிரிவு.
ஒரு பக்கத்தில் உள்ள இணைப்புகளின் அனைத்து குழுக்களும் ஒரு nav உறுப்பில் இருக்க வேண்டியதில்லை. இது முதன்மை அல்லது இரண்டாம் நிலை வழிசெலுத்தல் இணைப்புகளின் குழுக்கள் மட்டுமே.குறிப்பாக, ஒரு தளத்தின் பல்வேறு முக்கிய பகுதிகளுக்கான இணைப்புகளின் பட்டியலை அடிக்குறிப்புகளில் வைத்திருப்பது பொதுவானது, ஆனால் இதுபோன்ற சந்தர்ப்பங்களில் அடிக்குறிப்பு உறுப்பு மிகவும் பொருத்தமானது.
nav> உறுப்பு:
nav> ul> li> a href = "music.html"> இசை </ a> / li> / ul> / nav>
தி அடிக்குறிப்பு உறுப்பு ஒரு ஆவணத்தின் அல்லது அடிக்குறிப்பின் ‘அடிக்குறிப்பை’ குறிக்கிறது. அடிக்குறிப்பு உறுப்பு பொதுவாக அதன் இணைத்தல் பகுதியைப் பற்றிய மெட்டாடேட்டாவைக் கொண்டுள்ளது, அதாவது யார் எழுதியது, தொடர்புடைய ஆவணங்களுக்கான இணைப்புகள், பதிப்புரிமை தரவு மற்றும் பல. ஒரு அடிக்குறிப்பில் கொடுக்கப்பட்டுள்ள பிரிவுக்கான தொடர்புத் தகவல் முகவரி உறுப்பைப் பயன்படுத்தி குறிக்கப்பட வேண்டும்.
அடிக்குறிப்பு> உறுப்பு:
அடிக்குறிப்பு> சிறியது> © 2011 first.fm/small> / அடிக்குறிப்பு>
தி சிறிய உறுப்பு சிறிய அச்சுக்கு பயன்படுத்தப்படலாம். இது பக்கத்தின் முக்கிய மையத்தை முன்வைக்க விரும்பவில்லை. சிறிய உறுப்பு நீண்ட பத்திகள் அல்லது உரையின் பிரிவுகளுக்கு பயன்படுத்தப்படக்கூடாது. இது பதிப்புரிமை தகவல் போன்ற குறுகிய உரைக்கு மட்டுமே நோக்கம்.
சிறிய> உறுப்பு:
இன்னும் இருக்கிறது...
சொற்பொருள் என்பது ஒரு பணக்கார குறிச்சொற்களை விட அதிகம். நமக்கு தேவையானது இன்னும் அர்த்தமுள்ள குறிச்சொற்களை விட அதிகம். குறிச்சொற்களுக்கு அப்பால் நீட்டிக்க, இயந்திரத்தால் படிக்கக்கூடிய கூடுதல் சொற்பொருள்களையும் சேர்க்கலாம்; உலாவிகள், ஸ்கிரிப்ட்கள் அல்லது ரோபோக்கள் புரிந்துகொள்ளக்கூடிய தரவு, நிரல்களுக்கும் உங்கள் பயனர்களுக்கும் மிகவும் பயனுள்ள, தரவு உந்துதல் வலையை இயக்கும். இந்த சொற்பொருள்கள்: ஆர்.டி.எஃப்.ஏ (வள விவரம் கட்டமைப்பு - இன் - பண்புக்கூறுகள்), மைக்ரோடேட்டா, மற்றும் மைக்ரோஃபார்மேட்டுகள்.
ஆர்.டி.எஃப்.ஏ.
RDFa இயந்திரம் படிக்கக்கூடிய HTML பண்புக்கூறுகளின் தொகுப்பை வழங்குகிறது. RDFa ஐப் பயன்படுத்துவதன் மூலம், ஆசிரியர்கள் உள்ளடக்கத்தை மீண்டும் செய்யாமல் இருக்கும் மனிதர்களால் படிக்கக்கூடிய தகவல்களை இயந்திரத்தால் படிக்கக்கூடிய தரவுகளாக மாற்ற முடியும். சமீபத்திய விவரக்குறிப்பை இங்கே காணலாம்: w3.org/TR/rdfa-in-html.
மைக்ரோடேட்டா
தரவின் பெயர்-மதிப்பு ஜோடிகளின் குழுக்களை வரையறுக்க மைக்ரோடேட்டா பண்புகளைப் பயன்படுத்துகிறது. இதைப் பற்றி மேலும் அறிய: html5doctor.com/microdata.
W3C பணி வரைவைப் படிப்பதன் மூலம் மைக்ரோடேட்டாவில் ஆழமாக தோண்டலாம்: w3.org/TR/microdata.
W3C எடிட்டரின் வரைவை இங்கே படிக்கலாம்: dev.w3.org/html5/md. மைக்ரோஃபார்மேட்டுகள்
மைக்ரோஃபார்மேட்டுகள் மனிதனின் முதல் மற்றும் இயந்திரத்தின் இரண்டாவது வடிவமைக்கப்பட்டுள்ளன. தற்போது 34 மைக்ரோஃபார்மேட் விவரக்குறிப்புகள் உள்ளன, சில வெளியிடப்பட்டுள்ளன, சில வரைவுகள். நீங்கள் அவர்களைப் பற்றி மேலும் அறியலாம்: html5doctor.com/microformats.
முற்போக்கான மேம்பாட்டிற்கு CSS3 அம்சங்களைப் பயன்படுத்துதல்
இலக்கு சாதனம்: குறுக்கு உலாவி
CSS3 வலை பயன்பாடுகள் மற்றும் வலைத்தளங்களை பரந்த அளவிலான பாணிகள் மற்றும் விளைவுகளைப் பயன்படுத்தி மேம்படுத்துகிறது. CSS3 உடன், ஒருவர் பணக்கார UI இன் தொகுப்பை உருவாக்க முடியும், அது உருவமற்றது. மொபைலில், குறைவான படங்கள் வேகமாக ஏற்றப்படுவதைக் குறிக்கிறது, இது செயல்திறனை அதிகரிப்பதற்கான ஒரு வழியாகும். பெரும்பாலான நவீன ஸ்மார்ட்போன் உலாவிகளில் சிஎஸ்எஸ் 3 இன் பரவலான ஆதரவோடு, ஃபால்பேக்கிற்கான பாலிஃபில்ஸோடும் (HTML5 அம்சங்களை சொந்தமாக ஆதரிக்காத உலாவிகளில் HTML5 அம்சங்கள் செயல்பட பாலிஃபில்ஸ் ஃபால்பேக்காகப் பயன்படுத்தப்படுகின்றன), இது பாதுகாப்பானது மட்டுமல்ல, CSS3 ஐப் பயன்படுத்தத் தொடங்குவதும் அவசியம்!
தயாராகி வருகிறது
முந்தைய எடுத்துக்காட்டில் உருவாக்கப்பட்ட பக்கத்தை ஸ்டைல் செய்வோம். முதல் நகல் ch04r01.html அதை மறுபெயரிடுங்கள் ch04r02.html.
அதை எப்படி செய்வது ...
பின்வரும் பாணி விதிகளில் சேர்க்கவும்:
நடை> உடல் {விளிம்பு: 0; திணிப்பு: 0; எழுத்துரு-குடும்பம்: ஏரியல்; பின்னணி: #ccc; } தலைப்பு {உரை-நிழல்: 0 1px # 000; பின்னணி: # ff3019; / * பழைய உலாவிகள் * / பின்னணி: -moz- நேரியல்-சாய்வு (மேல், # ff3019 0%, # cf0404 20%, # ff3019 100%); / * FF3.6 + * / பின்னணி: -வெப்கிட்-சாய்வு (நேரியல், இடது மேல், இடதுபக்கம், வண்ண-நிறுத்தம் (0%, # ff3019), வண்ண-நிறுத்த (20%, # cf0404), வண்ண-நிறுத்த ( 100%, # ff3019)); / * குரோம், சஃபாரி 4 + * / பின்னணி: -வெப்கிட்-நேரியல்-சாய்வு (மேல், # ff3019 0%, # cf0404 20%, # ff3019 100%); / * Chrome10 +, சஃபாரி 5.1 + * / பின்னணி: -ஓ-நேரியல்-சாய்வு (மேல், # ff3019 0%, # cf0404 20%, # ff3019 100%); / * Opera11.10 + * / பின்னணி: -ms- நேரியல்-சாய்வு (மேல், # ff3019 0%, # cf0404 20%, # ff3019 100%); / * IE10 + * / வடிகட்டி: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# ff3019’, endColorstr = ’# ff3019’, GradientType = 0); / * IE6-9 * / பின்னணி: நேரியல்-சாய்வு (மேல், # ff3019 0%, # cf0404 20%, # ff3019 100%); / * W3C * /} h1 {திணிப்பு: 0.5em 0.2em; விளிம்பு: 0; எழுத்துரு அளவு: 18px; நிறம்: வெள்ளை; } h2 {உரை-நிழல்: 0 1px #FFFFFF; பின்னணி: #eeeeee; / * பழைய உலாவிகள் * / பின்னணி: -moz- நேரியல்-சாய்வு (மேல், #eeeeee 0%, #cccccc 100%); / * FF3.6 + * / பின்னணி: -வெப்கிட்-சாய்வு (நேரியல், இடது மேல், இடது கீழ், வண்ண-நிறுத்தம் (0%, # eeeeee), வண்ண-நிறுத்தம் (100%, # cccccc)); / * குரோம், சஃபாரி 4 + * / பின்னணி: -வெப்கிட்-நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * Chrome10 +, சஃபாரி 5.1 + * / பின்னணி: -ஓ-நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * Opera11.10 + * / பின்னணி: -ms- நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * IE10 + * / வடிகட்டி: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# eeeeee’, endColorstr = ’# cccccc’, GradientType = 0); / * IE6-9 * / பின்னணி: நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * W3C * / திணிப்பு: 0.5em 0.2em; விளிம்பு: 0; எழுத்துரு அளவு: 16px; நிறம்: # 000; } nav ul {border-top: 1px திட #fff; பட்டியல்-பாணி வகை: எதுவுமில்லை; திணிப்பு: 0; விளிம்பு: 0; } nav li {திணிப்பு: 0.5em 0.2em; விளிம்பு: 0; பின்னணி: #AFAFAF; எல்லை-கீழ்: 1px திட #fff; } nav li a {height: 20px; காட்சி: தொகுதி; உரை-அலங்காரம்: எதுவுமில்லை; நிறம்: வெள்ளை; style / style>
உலாவியில் இந்த குறியீட்டை இயக்குவதன் மூலம், இங்கே நாம் காணலாம்:
எப்படி இது செயல்படுகிறது...
இந்த எடுத்துக்காட்டில், தலைப்பு உறுப்பு பாணிக்கு CSS3 சாய்வுகளைப் பயன்படுத்தினோம். பாரம்பரியமாக, முந்தைய உதாரணத்தைப் போல ஒரு சாய்வு உருவாக்க, ஒருவர் ஃபோட்டோஷாப் அல்லது இல்லஸ்ட்ரேட்டரைப் பயன்படுத்த வேண்டும், ஆனால் இப்போது நீங்கள் அதை முற்றிலும் CSS ஐப் பயன்படுத்தி உருவாக்கலாம்!
பின்னணி: #eeeeee; / * பழைய உலாவிகள் * / பின்னணி: -moz- நேரியல்-சாய்வு (மேல், #eeeeee 0%, #cccccc 100%); / * FF3.6 + * / பின்னணி: -வெப்கிட்-சாய்வு (நேரியல், இடது மேல், இடது கீழ், வண்ண-நிறுத்த (0%, # eeeeee), வண்ண-நிறுத்த (100%, # cccccc)); / * குரோம், சஃபாரி 4 + * / பின்னணி: -வெப்கிட்-நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * Chrome10 +, சஃபாரி 5.1 + * / பின்னணி: -ஓ-நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * Opera11.10 + * / பின்னணி: -ms- நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * IE10 + * / வடிகட்டி: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# eeeeee’, endColorstr = ’# cccccc’, GradientType = 0); / * IE6-9 * / பின்னணி: நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * W3C * /
மேற்கூறிய ஒவ்வொரு விதியையும் பார்ப்பதன் மூலம், வெவ்வேறு உலாவிகள் சாய்வுகளுக்கு வெவ்வேறு CSS விதிகளைப் பயன்படுத்துகின்றன என்பதைக் காணலாம். குறுக்கு உலாவி இணக்கமானது என்பதை உறுதிப்படுத்த ஆறு வெவ்வேறு வேறுபாடுகள் உள்ளன. நீங்கள் நினைத்துக் கொண்டிருக்க வேண்டும்: ’ஓ, மனிதனே, ஒவ்வொரு உலாவியையும் கவனித்துக்கொள்வதற்கு இது அதிக நேரம் எடுக்கும்’. கவலைப்பட வேண்டாம், இந்த விதி கைமுறையாக தட்டச்சு செய்யப்படவில்லை. தி அல்டிமேட் CSS சாய்வு ஜெனரேட்டர் மீட்புக்கு வருகிறது! கலர்ஜில்லாவிலிருந்து ஒரு சக்திவாய்ந்த ஃபோட்டோஷாப் போன்ற CSS சாய்வு திருத்தி CSS3 சாய்வுகளை உருவாக்குவது வலியற்றதாக மாற்ற உதவும்:
colorzilla.com/gradient-editor
இன்னும் இருக்கிறது...
நீங்கள் IE9 மற்றும் அதற்குக் கீழே எடுத்துக்கொண்டால், CSS3 PIE ஐ ஆதரவுக்குப் பயன்படுத்தலாம்.
பதிவிறக்கிய பிறகு PIE.htc, இதைப் பயன்படுத்தி உங்கள் CSS இல் சேர்க்கவும்:
-pie-background: நேரியல்-சாய்வு (மேல், #eeeeee 0%, # cccccc 100%); / * PIE * / நடத்தை: url (PIE.htc);
ஆதரிக்கப்படும் அம்சங்கள் பின்வருமாறு:
- எல்லை-ஆரம்
- பெட்டி-நிழல்
- எல்லை-படம்
- CSS3 பின்னணிகள் (-பி-பின்னணி)
- சாய்வு
- RGBA வண்ண மதிப்பு
- PIE தனிப்பயன் பண்புகள்
CSS3 சாய்வுகளைப் புரிந்துகொள்வது
நெட்டட்ஸின் ஆசிரியரான ஜெஃப்ரி வே, CSS3 சாய்வுகளைப் பற்றி ஒரு சிறந்த கட்டுரையைக் கொண்டுள்ளார். நீங்கள் இதை இங்கே காணலாம்: net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients.
CSS3, தயவுசெய்து!
பால் ஐரிஷ் எழுதிய CSS3 தயவுசெய்து!, சாய்வு மற்றும் பல CSS3 அம்சங்களில் சமீபத்திய தொடரியல் உள்ளது: css3please.com.
பதிலளிக்கக்கூடிய வடிவமைப்பைப் பயன்படுத்துதல்
இலக்கு சாதனம்: குறுக்கு உலாவி
சமீபத்திய மொபைல் வளர்ச்சியில் பொறுப்பு வடிவமைப்பு மிக முக்கியமான கருத்துகளில் ஒன்றாகும். உலாவி திரை / உலாவி மறுஅளவிற்கு வித்தியாசமாக வழங்க பதிலளிக்க வேண்டும் என்ற கருத்தை இது வலியுறுத்துகிறது. மொபைல் முதல் பதிலளிக்கக்கூடிய வடிவமைப்பு டெஸ்க்டாப் உலாவிகளில் பக்கங்களை அழகாக சிதைக்கும்.
எனவே எங்களுக்கு பதிலளிக்கக்கூடிய வலை வடிவமைப்பு ஏன் தேவை?
டெஸ்க்டாப் வலைப்பக்கத்தில் நிலையான தளவமைப்பை நாங்கள் பயன்படுத்தும்போது, உலாவி திரை அளவைப் பொறுத்து திரையின் இடது அல்லது வலதுபுறத்தில் பெரும்பாலும் இடைவெளிகள் உள்ளன. மொபைல் உலாவிகளும் வெவ்வேறு அளவுகளுடன் வருகின்றன, மேலும் குறைந்த அளவிலான காட்சி இடத்துடன், ஒவ்வொரு பிக்சலும் மிக முக்கியமானது, எனவே திரையில் கிடைக்கும் ஒவ்வொரு பிக்சலையும் பயன்படுத்துவது முக்கியம். பக்கத்தின் இடது அல்லது வலதுபுறத்தில் தேவையற்ற இடைவெளிகளை அகற்ற, பதிலளிக்கக்கூடிய வடிவமைப்பு பயன்படுத்தப்படுகிறது.
பதிலளிக்கக்கூடிய வடிவமைப்பிற்கு ஊடக வினவல்கள் எவ்வாறு உதவக்கூடும்?
திரை அளவு புதுப்பிப்பின் அடிப்படையில் உள்ளடக்கத்தை பாணி செய்ய ஊடக வினவல்கள் பயன்படுத்தப்படுகின்றன, எனவே ஒரே HTML உறுப்புக்கு, இரண்டு தனித்தனி விதிகள் பயன்படுத்தப்படலாம். எது காண்பிக்கப்படுகிறது என்பது உலாவி காட்சியமைப்பின் அளவைப் பொறுத்தது.
தயாராகி வருகிறது
இந்த எடுத்துக்காட்டில், பெயரிடப்பட்ட ஒரு HTML5 பாலிஃபில் பயன்படுத்துவோம் response.js. இதை ஸ்காட் ஜெல் உருவாக்கியுள்ளார் (jQuery மொபைல் குழுவிலிருந்து). இது அமைந்துள்ளது ch04_code / js மூல குறியீட்டில்.
அதை எப்படி செய்வது ...
முதலில், பெயரிடப்பட்ட ஒரு HTML ஆவணத்தை உருவாக்குவோம் ch04r03.html. HTML இல் பின்வரும் குறியீட்டை உள்ளிடவும்:
! டாக்டைப் html> html> தலை> தலைப்பு> first.fm/title> மெட்டா எழுத்துக்குறி = "utf-8"> மெட்டா பெயர் = "வியூபோர்ட்" உள்ளடக்கம் = "அகலம் = சாதன அகலம், ஆரம்ப அளவு = 1.0"> இணைப்பு rel = "நடைதாள்" href = "css / style.css? v = 1"> ஸ்கிரிப்ட்> Modernizr.mq ('(நிமிடம்-அகலம்: 0)') || document.write ("scriptsrc = 'js / response.min.js'> x3C / script>") / script> / head> body> header> h1> first.fm/h1> / header> div id = "main "> h2> பக்கங்கள் </ h2> nav> ul> li> a href =" music.html "> இசை </ a> </ li> a href =" radio.html "> வானொலி </ a> a href = "events.html"> நிகழ்வுகள் </ a> </ li> a href = "charts.html"> விளக்கப்படங்கள் </ a> </ li> li> a href = "community.html"> சமூகம் / a> / li> li> a href = "help.html"> உதவி </ a> / li> li> a href = "about.html"> பற்றி </ a> / li> / ul> / nav> / div> footer> small > © 2011 first.fm/small> / footer> / body> / html>
நீங்கள் ஒரு மொபைல் சாதனத்தில் பக்கத்தை வழங்கினால், இந்த பக்கம் முந்தைய செய்முறையைப் போலவே இருக்கும். ஆனால் நீங்கள் அதை டெஸ்க்டாப் உலாவியில் வழங்கினால், அது பின்வருவனவற்றைப் போலவே இருக்கும்:
எப்படி இது செயல்படுகிறது...
கோப்பின் மேலே, நாங்கள் பயன்படுத்தினோம் மாடர்னிசர் தற்போதைய உலாவியால் மீடியா வினவல்கள் ஆதரிக்கப்படுகிறதா என்பதை முதலில் கண்டறிய. இல்லையென்றால், நாங்கள் ஏற்றுவோம் response.min.js:
script> Modernizr.mq (’(நிமிடம்-அகலம்: 0)’) || document.write ("script src =’ js / response.min.js ’> x3C / script>") / script>
எழுதும் நேரத்தில், நீங்கள் வேண்டும் / * / மீடியாவரி * / அது இயங்குவதற்கான விதியின் முடிவில் கருத்து தெரிவிக்கவும். எதிர்கால பதிப்புகளில் இது மேம்படுத்தப்படலாம் response.js:
@ மீடியா மட்டும் திரை மற்றும் (குறைந்தபட்ச அகலம்: 800px) {} / * / மீடியாவரி * /
இன்னும் இருக்கிறது...
மொபைல் பாய்லர் பிளேட் தளத்தில், மீடியா வினவல்களைப் பற்றி மேலும் விளக்கினேன், மேலும் ஸ்லைடுகளை இங்கே காணலாம்: html5boilerplate.com/mobile.
ஆண்டி கிளார்க் 320 மற்றும் அப் ஆகியவற்றை உருவாக்கினார், இது பதிலளிக்கக்கூடிய வடிவமைப்பின் யோசனையையும் அடிப்படையாகக் கொண்டது. நீங்கள் இதை இங்கே பதிவிறக்கம் செய்யலாம்: stuffandnonsense.co.uk/projects/320andup.
பாலிஃபில்ஸ் ஸ்கிரிப்ட் ஏற்றுதலை மேம்படுத்துகிறது
இலக்கு சாதனம்: குறுக்கு உலாவி
எந்த உலாவிக்கும் ஸ்கிரிப்ட் ஏற்றுதல் முக்கியமானது, ஆனால் அலைவரிசை குறைவாக இருப்பதால் மொபைல் சாதனங்களுக்கு அதிகம். மாடர்னிசர் ஒரு மாறும் ஏற்றுதல் தீர்வோடு வருகிறது.
தயாராகி வருகிறது
முதலில், ஒரு HTML ஆவணத்தை உருவாக்கி அதற்கு பெயரிடுவோம் ch03r04.html.
அதை எப்படி செய்வது ...
உங்கள் குறியீடு எடிட்டரில் பின்வரும் குறியீட்டை உள்ளிட்டு அதை இயக்கவும்.
! டாக்டைப் html> html> தலை> தலைப்பு> first.fm/title> மெட்டா எழுத்துக்குறி = "utf-8"> மெட்டா பெயர் = "வியூபோர்ட்" உள்ளடக்கம் = "அகலம் = சாதன அகலம், ஆரம்ப அளவு = 1.0"> ஸ்கிரிப்ட் src = "js / modernizr.custom.54685.js"> / script> style> / style> / head> body> header> h1> உங்கள் இருப்பிடம் / h1> / header> div id = "main"> உங்கள் ஜியோ இருப்பிடம்: span id = "ge"> / span> / div> script src = "// ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery. js"> / script> script> yepnope ({test: Modernizr .geolocation, nope: ['js / gelocation.js'], முழுமையானது: செயல்பாடு () {navigator.geolocation.getCurrentPosition (செயல்பாடு (நிலை) {document.getElementById ('ஜியோ'). உள் HTML = position.coords.latitude + ", "+ position.coords.longitude;});}}); / script> / body> / html>
எப்படி இது செயல்படுகிறது...
எழுதும் நேரத்தில், மாடர்னிசர் 2.0 முன்னோட்டம் பீட்டா 1 இல் இருந்தது. இந்த பீட்டா வெளியீட்டில், இரண்டு புதிய புதிய அம்சங்கள் உள்ளன. ஒன்று, நீங்கள் கண்டறிய விரும்பும் அம்சங்களைத் தனிப்பயனாக்க தேர்வு செய்யலாம். மற்ற சிறந்த அம்சம் என்னவென்றால் yepnope.js (எனவும் அறியப்படுகிறது Modernizr.load வழங்கியவர் அலெக்ஸ் செக்ஸ்டன் மற்றும் ரால்ப் ஹோல்ஸ்மேன்). Yepnope.js டைனமிக் ஜாவாஸ்கிரிப்ட் ஏற்றி வழங்குகிறது, மேலும் இதைப் பற்றி மேலும் அறியலாம் இன்னும் இருக்கிறது இந்த அத்தியாயத்தின் பிரிவு.
நவீனமயமாக்கலுடன், தற்போதைய பயனர் முகவரியில் ஒரு அம்சம் ஏற்கனவே இருக்கிறதா இல்லையா என்பதை முதலில் கண்டறிய முடியும்:
சோதனை: Modernizr.geolocation
அது இல்லை என்றால், நாங்கள் ஏற்றுவோம் shim gelocation.js பயன்படுத்தி yepnope. மற்றும்
நிறைவு, நாம் அட்சரேகை மற்றும் தீர்க்கரேகை சேர்க்க முடியும்:
yepnope ({test: Modernizr.geolocation, nope: [’js / gelocation.js’], முழுமையானது: செயல்பாடு () {...});
இன்னும் இருக்கிறது...
டெவலப்பர்களுக்கு உதவக்கூடிய சில விருப்ப ஆதாரங்கள் உள்ளன. நவீனமயமாக்கல் சோதனை தொகுப்பு அவற்றில் ஒன்று. ஒரு குறிப்பிட்ட சாதனத்தில் என்ன அம்சங்கள் ஆதரிக்கப்படுகின்றன என்பதை ஒரே பார்வையில் டெவலப்பர்கள் அறிய உதவுவதில் இது பயனுள்ளதாக இருக்கும். நீங்கள் இங்கு மேலும் அறியலாம்:
modernizr.github.com/Modernizr/test/index.html
yepnope
yepnope என்பது ஒத்திசைவற்ற நிபந்தனை வள ஏற்றி, இது அதிவேகமானது மற்றும் உங்கள் பயனர்களுக்குத் தேவையான ஸ்கிரிப்ட்களை மட்டுமே ஏற்ற உதவுகிறது. இதைப் பற்றி மேலும் அறிய, இதற்குச் செல்லவும்:
yepnopejs.com.
பயனர் முகவர் கண்டறிதலைப் பயன்படுத்துகிறது
இலக்கு சாதனம்: குறுக்கு உலாவி
மொபைல் தளத்தை உருவாக்கும்போது, பயனர் முகவர் கண்டறிதல் இருப்பது நல்லது. இது திசைதிருப்பல் ஸ்கிரிப்ட்டுக்கு உங்களுக்கு உதவலாம் அல்லது பயனர் முகவரின் அடிப்படையில் எதையாவது ஏற்ற வேண்டுமா / ஏற்ற வேண்டாமா என்பதை தீர்மானிக்க உதவும்.
தயாராகி வருகிறது
முதலில், பயனர் முகவர் கண்டறிதலின் அடிப்படையில் ஒரு பயனர் ஒரு தளத்திலிருந்து மற்றொரு தளத்திற்கு திருப்பிவிட முடியுமா என்பதை நீங்கள் எவ்வாறு சொல்லலாம் என்று பார்ப்போம். இதைச் செய்ய இரண்டு வழிகள் உள்ளன: இதை நீங்கள் சேவையக உள்ளமைவில், உங்கள் சேவையக பக்க நிரலாக்க மொழியில் செய்யலாம் அல்லது முன்பக்க ஜாவாஸ்கிரிப்டிலிருந்து பயன்படுத்தலாம்.
அதை எப்படி செய்வது ...
திசைதிருப்பல் ஸ்கிரிப்டை நீங்கள் பதிவிறக்கம் செய்யலாம்: dettemobilebrowser.com. இது பல்வேறு பதிப்புகளுடன் வருகிறது. இந்த எடுத்துக்காட்டில், அப்பாச்சி உள்ளமைவைப் பயன்படுத்தலாம் .htaccess.
எப்படி இது செயல்படுகிறது...
கோப்பை பதிவிறக்கம் செய்து திறந்ததும், ஸ்கிரிப்டை பின்வருமாறு காண்பீர்கள்:
RewriteEngine On RewriteBase / RewriteCond% {HTTP_USER_AGENT} android | avantgo | blackberry | blazer | comp al | .... | up . (உலாவி | இணைப்பு) | வோடபோன் | வாப் | விண்டோஸ் (ce | தொலைபேசி) | xda | xiino [ NC, OR] RewriteCond% {HTTP_USER_AGENT} ^ (1207 | 6310 | 6590 | .... | உங்கள் | zeto | zte -) [NC] RewriteRule ^ $ http://example.com/mobile [R, L]
ஒரு டெஸ்க்டாப் தளத்தை மொபைல் தளத்திற்கு திருப்பிவிட, ஒருவர் அதை மாற்றலாம் http://example.com/mobile உங்கள் தள முகவரிக்கு.
இன்னும் இருக்கிறது...
பயனர் முகவர் கண்டறிதல் தளங்களை திருப்பிவிடுவதற்கு மட்டும் பயனுள்ளதாக இருக்காது, பயனர் முகவரின் அடிப்படையில் ஏதாவது ஒன்றை முதலில் ஏற்ற வேண்டுமா என்பதை நீங்கள் தீர்மானிக்க முயற்சிக்கும்போது இது பயனுள்ளதாக இருக்கும்.
மொபைல் பாய்லர் பிளேட் தளத்தை உருவாக்கும்போது, பயனர் முகவரின் (மொபைல் அல்லது டெஸ்க்டாப்) அடிப்படையில் உட்பொதிக்கப்பட்ட உள்ளடக்கத்தை தளம் வழங்க வேண்டுமா என்பதை தீர்மானிக்க கண்டறிதல் ஸ்கிரிப்ட்டின் ஜாவாஸ்கிரிப்ட் பதிப்பைப் பயன்படுத்தினேன்:
if (! jQuery.browser.mobile) {...}
டெஸ்க்டாப் உலாவிகளுக்கான இந்த ஸ்கிரிப்ட் மூலம், ஸ்லைடுகள் ஏற்றப்பட்டு பின்வருமாறு காட்டப்படும்:
மொபைல் பதிப்பில், இது காட்டப்படாது:
மொபைல் உலாவி கண்டறிதல் முறைகள்
மொபைல் டட்ஸைப் பற்றிய ஒரு கட்டுரை மொபைல் உலாவி கண்டறிதலின் வெவ்வேறு முறைகளை விளக்குகிறது:
mobile.tutsplus.com/tutorials/mobile-web-apps/mobile-browser-detection.
மொபைல் புக்மார்க்கு குமிழியை முகப்பு பக்கத்தில் சேர்ப்பது
இலக்கு சாதனம்: iOS
முந்தைய அத்தியாயங்களில், சில மொபைல் சாதனங்களில் உங்கள் தளத்தை புக்மார்க்கு செய்யும் திறனைப் பற்றி நாங்கள் பேசியுள்ளோம். வலை பயன்பாடுகளை சொந்த பயன்பாடுகளுக்கு ஒரு படி நெருக்கமாக கொண்டுவருவதற்கு இது மிகவும் அருமையான அம்சம் என்றாலும், அதில் ஒரு சிக்கல் உள்ளது: புக்மார்க்கு செயலை அழைக்க நீங்கள் பயன்படுத்தக்கூடிய ஏபிஐ இல்லை, எனவே பல பயனர்கள் இதுபோன்றவற்றை அறிந்திருக்க மாட்டார்கள் அவர்களின் தொலைபேசியில் அம்சம். இந்த சிக்கலைச் சமாளிக்க, இரண்டு கட்டமைப்புகள் CSS மற்றும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு புக்மார்க்கு குமிழியை வழங்குகின்றன. ஸ்கிரிப்ட் உங்கள் வலைப்பக்கப் பக்கத்தின் அடிப்பகுதியில் ஒரு விளம்பர குமிழியைச் சேர்க்கிறது, பயனர்கள் வலை பயன்பாட்டை தங்கள் சாதனத்தின் முகப்புத் திரையில் புக்மார்க்கு கேட்கிறது.
தயாராகி வருகிறது
குறிப்பிட்டுள்ளபடி, பல கட்டமைப்புகள் இந்த அம்சத்தை வழங்குகின்றன, ஆனால் எளிமைக்காக, முழுமையான ஒன்றைப் பயன்படுத்தலாம். இந்த பணிக்காக கூகிள் தி மொபைல் புக்மார்க் பப்பில் என்ற திறந்த மூல நூலகத்தை வெளியிட்டது. முதலில், இதை இங்கே பதிவிறக்குவோம்: code.google.com/p/mobile-bookmark-bubble.
அதை எப்படி செய்வது ...
நூலகம் ஒரு வருகிறது sample.js. இரண்டையும் சேர்த்துக் கொள்ளுங்கள் bookmark_bubble.js மற்றும் இந்த sample.js உருவாக்கப்பட்ட எந்த வலைப்பக்கத்திலும்; நீங்கள் பின்வருமாறு ஒன்றைக் காண்பீர்கள்:
எப்படி இது செயல்படுகிறது...
பயனர்களைத் தொடர்ந்து ஏமாற்றுவதைத் தவிர்ப்பதற்காக, விளம்பரமானது ஏற்கனவே காட்டப்பட்டுள்ளதா என்பதைக் கண்டறிய நூலகம் HTML5 உள்ளூர் சேமிப்பிடத்தைப் பயன்படுத்துகிறது.இந்த நூலகத்தின் தற்போதைய செயல்படுத்தல் குறிப்பாக ஐபோன் மற்றும் ஐபாட் சாதனங்களில் பயன்படுத்தப்படும் வலை உலாவியான மொபைல் சஃபாரியை குறிவைக்கிறது.
டெக்ஸ்டேரியா மற்றும் ஆட்டோகிரோ படிவங்களுடன் தொடர்பு பக்கத்தை உருவாக்குதல்
இலக்கு சாதனம்: குறுக்கு உலாவி
எஸ்எம்எஸ் போன்ற சொந்த பயன்பாடுகளில், உரை பகுதி தானாக வளரும். மொபைல் வலையில், நீங்கள் உருவாக்கினால் textarea, இது ஒரு நிலையான அளவு என்பதை நீங்கள் உணருவீர்கள். நீங்கள் தட்டச்சு செய்யும் உரையின் கோடுகள் textarea உயரம், உரையைப் பார்ப்பது மிகவும் கடினமாகிறது. இந்த எடுத்துக்காட்டில், நாம் எவ்வாறு உருவாக்க முடியும் என்பதைப் பார்ப்போம் textarea நீங்கள் அதிக வரிகளில் தட்டச்சு செய்யும் போது அது தானாகவே இயங்கும்.
தயாராகி வருகிறது
முதலில், ஒரு HTML ஆவணத்தை உருவாக்கி அதற்கு பெயரிடுவோம் ch04r05.html. இந்த எடுத்துக்காட்டில், நாங்கள் பயன்படுத்துவோம் helper.js மொபைல் பாய்லர்ப்ளேட்டில்: https://github.com/h5bp/mobile-boilerplate
அதை எப்படி செய்வது ...
கோப்பில் இந்த குறியீட்டை உள்ளிடவும்:
! டாக்டைப் html> html> தலை> தலைப்பு> first.fm/title> மெட்டா எழுத்துக்குறி = "utf-8"> மெட்டா பெயர் = "வியூபோர்ட்" உள்ளடக்கம் = "அகலம் = சாதன அகலம், ஆரம்ப அளவு = 1.0"> நடை> # தொடர்பு {அகலம்: 220px; height: 40px;} / style> / head> body> header> h1> தொடர்பு படிவம் </ h1> / header> div id = "main"> p> செய்தியைக் காண தட்டச்சு செய்க தானியங்கு / p> textarea id = "contact" > / textarea> / div> script src = "// ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery. js"> / script> script src = "// github.com/shichuan/mobile -html5-boilerplate / raw / master / js / mylibs / helper.js "> / script> script> var contact = document.getElementById (" contact "); MBP.autogrow (தொடர்பு); / script> / body> / html>
பாம் வெப்ஓஎஸ்ஸில் இது எவ்வாறு வழங்கப்படுகிறது என்பதற்கான ஸ்கிரீன் ஷாட் பின்வருகிறது:
எப்படி இது செயல்படுகிறது...
ஸ்கிரிப்டில், கீ-அப் நிகழ்வு கேட்பவர் எங்களிடம் இருக்கிறார். இது இருந்தால் கண்டறியும் textarea உயரம் மாறிவிட்டது. உள்ளடக்கத்தின் உயரத்தை நாங்கள் அளவிடுகிறோம், அது மாற்றப்பட்டால், CSS பாணியை மாற்றுவோம் textarea உயரத்தை அதிகரிக்க.
இன்னும் இருக்கிறது...
அசல் கருத்து Google இன் குறியீடு வலைப்பதிவிலிருந்து வந்தது. இதைப் பற்றி மேலும் படிக்க இங்கே:
googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series.html.
உடனடி பதிலுடன் பொத்தான்களை உருவாக்குதல்
இலக்கு சாதனம்: iOS, Android
மொபைல் சாதன உலாவியில், சொந்த பயன்பாட்டை விட பொத்தானின் பதில் சற்று மெதுவாக இருக்கும். மொபைல் உலாவிகளில், ஒரு உள்ளது டச்ஸ்டார்ட் நிகழ்வு. கிளிக் நிகழ்வுக்கு பதிலாக இந்த நிகழ்வைக் கண்டறிவதன் மூலம், இது கிளிக் செய்வதை வேகமாக செய்யும்.
தயாராகி வருகிறது
இந்த எடுத்துக்காட்டில், மொபைல் பாய்லர்ப்ளேட்டில் ஒரு செயல்பாட்டைப் பயன்படுத்துவோம். என்ற கோப்பை உருவாக்கவும் ch04r06.html.
அதை எப்படி செய்வது ...
பின்வரும் குறியீடு சமர்ப்பி பொத்தானைக் கொண்டு ஒரு படிவத்தை உருவாக்கும்:
! டாக்டைப் html> html> தலை> தலைப்பு> first.fm/title> மெட்டா எழுத்துக்குறி = "utf-8"> மெட்டா பெயர் = "வியூபோர்ட்" உள்ளடக்கம் = "அகலம் = சாதன அகலம், ஆரம்ப அளவு = 1.0"> நடை> # தொடர்பு {அகலம்: 220px; உயரம்: 40px; style / style> / head> body> header> h1> தொடர்பு படிவம் </ h1> / header> div id = "main"> textarea id = "contact"> / textarea> br /> button id = "btn"> உடனடி பொத்தான் !!! / button> br /> span id = "result"> / span> / div> footer> small> © 2011 first.fm/small> / footer> script src = "// ajax.googleapis.com/ajax /libs/jquery/1.5.1/jquery. js "> / script> script src =" // github.com/shichuan/mobile-html5-boilerplate/raw/ master / js / mylibs / helper.js "> / ஸ்கிரிப்ட் > ஸ்கிரிப்ட்> var btn = document.getElementById ("btn"); MBP.fastButton (btn, showForm); செயல்பாடு showForm () {$ ("# முடிவு"). html ("சமர்ப்பித்ததற்கு நன்றி, நாங்கள் விரைவில் உங்களைத் தொடர்புகொள்வோம்!"); script / script> / body> / html>
எப்படி இது செயல்படுகிறது...
பின்வருவது வேகமான பொத்தானின் செயல்பாட்டின் பகுதி, மற்றும் செயல்பாடு எவ்வாறு செயல்படுகிறது என்பதை இங்கே பார்ப்போம்.
மேலே, முக்கிய செயல்பாடு வரையறுக்கப்பட்டுள்ளது. இது இருந்தால் மட்டுமே பயன்படுத்தப்படுகிறது addEventListener ஆதரிக்கப்படுகிறது, அது கேட்கும் இடத்தில் டச்ஸ்டார்ட் மற்றும் கிளிக் செய்க நிகழ்வுகள்:
MBP.fastButton = செயல்பாடு (உறுப்பு, கையாளுபவர்) {this.element = உறுப்பு; this.handler = கையாளுபவர்; if (element.addEventListener) {element.addEventListener (’டச்ஸ்டார்ட்’, இது, தவறானது); element.addEventListener (’கிளிக்’, இது, தவறானது); }}; MBP.fastButton.prototype.handleEvent = செயல்பாடு (நிகழ்வு) {சுவிட்ச் (event.type) {case ’touchstart’: this.onTouchStart (நிகழ்வு); உடைத்தல்; case ’touchmove’: this.onTouchMove (நிகழ்வு); உடைத்தல்; case ’touchchend’: this.onClick (நிகழ்வு); உடைத்தல்; வழக்கு ’கிளிக்’: this.onClick (நிகழ்வு); உடைத்தல்; }};
தி onTouchStart கேட்க முறை பயன்படுத்தப்படுகிறது டச்மோவ் மற்றும் தொடுதல் நிகழ்வுகள். stopPropagation கேட்பவர்களில் நிகழ்வின் பிரச்சாரத்தை நிறுத்த பயன்படுகிறது, இதனால் அது குமிழ்வதை நிறுத்துகிறது:
MBP.fastButton.prototype.onTouchStart = செயல்பாடு (நிகழ்வு) {event.stopPropagation (); this.element.addEventListener (’touchchend’, இது, தவறானது); document.body.addEventListener (’touchmove’, இது, தவறானது); this.startX = event.touches [0] .clientX; this.startY = event.touches [0] .clientY; this.element.style.backgroundColor = "rgba (0,0,0, .7)";};
டச்மோவ் பயனர் இழுக்கிறாரா என்பதை சோதிக்க பயன்படுகிறது. பயனர்கள் 10 px ஐ கடந்தால், நாங்கள் அதை மீட்டமைப்போம்:
MBP.fastButton.prototype.onTouchMove = செயல்பாடு (நிகழ்வு) {if (Math.abs (event.touches [0] .clientX - this.startX)> 10 || Math.abs (event.touches [0] .clientY - இது .startY)> 10) {this.reset (); }};
பின்வரும் குறியீடு பேய் கிளிக்குகளைத் தடுக்கிறது மற்றும் உண்மையான கிளிக் கையாளுபவரை செயல்படுத்துகிறது:
MBP.fastButton.prototype.onClick = செயல்பாடு (நிகழ்வு) {event.stopPropagation (); this.reset (); this.handler (நிகழ்வு); if (event.type == ’touchchend’) {MBP.preventGhostClick (this.startX, this.startY); } this.element.style.backgroundColor = "";}; MBP.fastButton.prototype.reset = function () {this.element.removeEventListener (’touchchend’, this, false); document.body.removeEventListener (’touchmove’, இது, தவறானது); this.element.style.backgroundColor = "";};
இன்னும் இருக்கிறது...
Google இன் வலைப்பதிவில் வேகமான பொத்தானைப் பற்றி மேலும் படிக்கலாம். இது யோசனைக்கு பின்னால் உள்ள பின்னணி மற்றும் கோட்பாட்டை விரிவாக விளக்குகிறது: code.google.com/mobile/articles/fast_buttons.html.
வெப்கிட் குரோம் மறைக்கிறது
இலக்கு சாதனம்: iOS, Android
IOS மற்றும் Android இல் மொபைல் சஃபாரிக்கு மேலே உள்ள URL பட்டி ஒரு பெரிய இடத்தைப் பயன்படுத்துகிறது. மொபைல் ரியல் எஸ்டேட் குறைவாக இருப்பதால் பல டெவலப்பர்கள் அதை பக்க சுமையில் மறைப்பார்கள். ஒவ்வொரு பிக்சலும் முக்கியமானது மற்றும், URL பட்டியை மறைப்பதன் மூலம், காட்சி பகுதியை அதிகரிக்க திரையில் ஒவ்வொரு பிக்சலையும் பயன்படுத்த இது உதவுகிறது.
தயாராகி வருகிறது
முதலில், ஒரு HTML ஆவணத்தை உருவாக்கி அதற்கு பெயரிடுவோம் ch04r07.html.
அதை எப்படி செய்வது ...
இந்த குறியீட்டை உள்ளிடவும்:
! டாக்டைப் html> html> தலை> தலைப்பு> மொபைல் குக்புக் / தலைப்பு> மெட்டா எழுத்துக்குறி = "utf-8"> மெட்டா பெயர் = "வியூபோர்ட்" உள்ளடக்கம் = "அகலம் = சாதன அகலம், ஆரம்ப அளவு = 1.0"> நடை> HTML, உடல், தலைப்பு, அடிக்குறிப்பு {திணிப்பு: 0; விளிம்பு: 0; } தலைப்பு {உயரம்: 40px; பின்னணி: # BFB840; காட்சி: தொகுதி; } # முக்கிய {உயரம்: 350px; பின்னணி: # F2CB67; } அடிக்குறிப்பு {உயரம்: 40px; பின்னணி: # DB5E31; காட்சி: தொகுதி; style / style> / head> body> header> header / header> div id = "main"> main / div> footer> footer / footer> script src = "// ajax.googleapis.com/ajax/libs/jquery/ 1.5.1 / jquery. Js "> / script> script src =" // github.com/shichuan/mobile-html5-boilerplate/raw/ master / js / mylibs / helper.js "> / script> script> // MBP.hideUrlBar (); / script> / body> / html>
இப்போது நீங்கள் அதை உலாவியில் வழங்கினால், இது இப்படி இருக்கும்:
இப்போது பின்வரும் வரியைக் கட்டுப்படுத்தவும்:
MBP.hideUrlBar ();
உள்ளடக்கத்தை மீண்டும் வழங்கவும், இப்போது குரோம் மறைக்கப்பட்டிருப்பதைக் காணலாம், இது அடிக்குறிப்பைக் காண்பிக்க அனுமதிக்கிறது:
எப்படி இது செயல்படுகிறது...
கொதிகலன் உள்ள ஸ்கிரிப்ட் பின்வருமாறு:
MBP.hideUrlBar = function () {var win = window, doc = win.document; // ஒரு ஹாஷ் இருந்தால், அல்லது addEventListener வரையறுக்கப்படவில்லை என்றால், இங்கே நிறுத்து (! Location.hash ||! Win.addEventListener) {// க்கு உருட்டவும் 1 window.scrollTo (0, 1); var scrollTop = 1, // தேவைப்பட்டால் 0 க்கு மீட்டமைக்கவும், தேவைப்பட்டால் bodycheck = setInterval (function () {if (doc.body) {clearInterval (bodycheck); scrollTop = doc.body இல் "scrollTop"? doc.body.scrollTop : 1; win.scrollTo (0, scrollTop === 1? 0: 1);}}, 15); win.addEventListener ("சுமை", செயல்பாடு () {setTimeout (செயல்பாடு () {// onload win.scrollTo (0, scrollTop === 1? 0: 1);}, 0); , பொய்); }};
URL இல் ஏதேனும் ஹாஷ் இருந்தால் அது கண்டறியும். இருந்தால், ஸ்கிரிப்டை இயக்குவதை நிறுத்துவோம், ஏனெனில் இன்லைன் நங்கூரம் உள்ளது. எந்த ஹாஷும் இல்லையென்றால், நாங்கள் ஒரு நொடி காத்திருப்போம், ஸ்க்ரோலிங் இல்லையென்றால், Android 1 px y pos ஐ மறைக்க பயன்படுத்துகிறது, அதே நேரத்தில் அது iOS இல் 0 ஆகும். ஸ்கிரிப்ட் இரண்டையும் இயல்பாக்குகிறது. இதை ஸ்காட் ஜெல் உருவாக்கியுள்ளார்: gist.github.com/1183357.
மொபைல் தள வரைபடத்தை உருவாக்குதல்
இலக்கு சாதனம்: குறுக்கு உலாவி
பல டெவலப்பர்கள் கூகிள் தள வரைபடத்துடன் தெரிந்திருக்கிறார்கள். மிகப்பெரிய தேடுபொறியாக, இது எங்கள் உள்ளடக்கத்தைப் பெறுகிறது என்பதை உறுதிப்படுத்துவது மிகவும் முக்கியமானது. மொபைல் எஸ்சிஓ நோக்கங்களுக்காக, கூகிள் கொண்டு வந்தது மொபைல் தள வரைபடம். மக்கள் தங்கள் மொபைல் தள வரைபடங்களை அடுத்ததாக விவரிக்கப்பட்ட வடிவத்திற்கு புதுப்பிக்க Google பரிந்துரைக்கிறது.
தயாராகி வருகிறது
முதலில், ஒரு எக்ஸ்எம்எல் ஆவணத்தை உருவாக்கி அதற்கு பெயரிடுவோம் sitemap.xml.
அதை எப்படி செய்வது ...
எக்ஸ்எம்எல் ஆவணத்தில் பின்வரும் குறியீட்டை நாம் சேர்க்கலாம். உங்களிடம் உள்ள குறிப்பிட்ட தளத்திற்கு, URL உங்கள் பக்கங்களின் URL ஆக இருக்க வேண்டும்:
? xml version = "1.0" குறியாக்கம் = "UTF-8"?> var13 -> urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9" xmlns: mobile = "http: // www .google.com / schemas / sitemap-mobile / 1.0 "> url> loc> http://mobile.example.com/article100.html/loc> மொபைல்: மொபைல் /> / url> / urlset>
எல்லா URL களும் உள்ளே இணைக்கப்பட்டுள்ளன loc> / loc>.
நீங்கள் சேர்த்துள்ளீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் மொபைல்: மொபைல் />. இல்லையெனில், தளங்கள் சரியாக வலம் வராது.
எப்படி இது செயல்படுகிறது...
தள வரைபடங்கள் ஒரு குறிப்பிட்ட திட்டத்தைப் பின்பற்றுகின்றன; கூகிள் தேடுபொறிக்கு மொபைல் வலைப்பக்கத்தின் இருப்பிடத்தைச் சொல்ல மேற்கூறிய எக்ஸ்எம்எல் திட்டம் பயன்படுத்தப்படுகிறது. பொதுவாக, ஒரு தளம் ஒரு CMS அமைப்பைப் பயன்படுத்தி கட்டப்பட்டால், URL களை தானாக உருவாக்க ஒரு வழி இருக்க வேண்டும், அவை அனைத்தும் அதற்குள் பட்டியலிடப்பட வேண்டும் loc> / loc>.
இன்னும் இருக்கிறது...
மொபைல் தள வரைபடத்தில் டெஸ்க்டாப் மட்டும் URL கள் இருக்கக்கூடாது. இருப்பினும், இது டெஸ்க்டாப் மற்றும் மொபைல் இரண்டிற்கும் உள்ளடக்கத்தைக் கொண்டிருக்கலாம்.
பிரத்யேக மொபைல் உள்ளடக்கம் மற்றும் பிரத்யேக URL உள்ள வலைத்தளங்களுக்கு, நீங்கள் பயனர்களை வழிநடத்தலாம் example.com க்கு m.example.com. இந்த வழக்கில், பயனர்களுக்கும் Googlebot-Mobile க்கும் 301 வழிமாற்றுகளைப் பயன்படுத்தவும்.
நீங்கள் எல்லா வகையான உள்ளடக்கங்களுக்கும் சேவை செய்தால் example.com, இது கூகிள் மூடுவதாக கருதப்படவில்லை.
கூகிள் மற்றும் மொபைல் நட்பு தள கட்டிடம்
கூகிள் வெப்மாஸ்டர் தளத்தில், வலைத்தளங்களை மொபைல் நட்பாக மாற்றுவது பற்றி ஒரு வலைப்பதிவு இடுகை உள்ளது: googlewebmastercentral.blogspot.com/2011/02/making-websites-mobile-friendly.html.
கூகிள் மற்றும் மொபைல் தள அட்டவணைப்படுத்தல்
கூகிள் வெப்மாஸ்டர் தளத்தில் மற்றொரு வலைப்பதிவு உள்ளது, இது உங்கள் மொபைல் தளத்தை கூகிள் குறியீட்டுக்கு எவ்வாறு உதவுவது என்பது பற்றி பேசுகிறது: googlewebmastercentral.blogspot.com/2009/11/help-google-index-your-mobile-site.html.
