విషయ సూచిక
§5 – CSS3 పరివర్తనాలు మరియు యానిమేషన్లు
1. పరిచయం
మీరు దీని గురించి విన్నారు: HTML5. అందరూ దీనిని ఉపయోగిస్తున్నారు. ఇది ఇంటర్నెట్ రక్షకుడిగా ప్రకటించబడింది, ఫ్లాష్ మరియు షాక్ వేవ్ని ఉపయోగించకుండా ప్రజలు గొప్ప, ఆకర్షణీయమైన వెబ్ పేజీలను సృష్టించడానికి వీలు కల్పిస్తుంది.
కానీ నిజానికి అది ఏమిటి?
సరే, సమాధానం చెప్పడం అంత సులభమైన ప్రశ్న కాదు. ఈ HTML5 ట్యుటోరియల్లో, మేము కొన్ని సమాధానాలను అందించడానికి ప్రయత్నిస్తాము. HTML5 అనేది నిజంగా విభిన్నమైన విషయాల సమూహాన్ని వివరించడానికి ఉపయోగించబడుతుంది. ఇది వెబ్ పేజీలను వ్రాసే ప్రమాణం. ఇది API ల సమాహారం. ఇది వెబ్ పేజీలకు ఇంటరాక్టివిటీని జోడించడానికి కొత్త మార్గం.
HTML5 అంతే మరియు మరిన్ని. కాబట్టి ఈ పుస్తకం దేని గురించి?
ఈ HTML5 ట్యుటోరియల్లో, మీరు ఏదో ఒక సమయంలో HTML మరియు CSS లను తాకినట్లు నేను ఊహించబోతున్నాను. బహుశా మీరు మీ స్వంత WordPress థీమ్ని సృష్టించవచ్చు లేదా రోజులో మైస్పేస్ లేఅవుట్ను ఎడిట్ చేసి ఉండవచ్చు. బహుశా మీరు MakeUseOf యొక్క స్వంత XHTML గైడ్ని చదివి ఉండవచ్చు. విషయం ఏమిటంటే, వెబ్ పేజీ చుట్టూ మీ మార్గం మీకు తెలుసని మరియు ఈ గైడ్లో మేము చర్చించేది మీకు చాలా పరాయిది కాదని నేను ఊహిస్తున్నాను.
ఈ గైడ్ యొక్క లక్ష్యం మీకు HTML5 మొత్తాన్ని బోధించడం కాదు. అది ఈ పుస్తకం పరిధికి పూర్తిగా దూరంగా ఉంటుంది. ఈ అద్భుతమైన కొత్త వెబ్ టెక్నాలజీలకు సున్నితమైన పరిచయాన్ని అందించడం మరియు వాటిని మీ వెబ్సైట్లలో చేర్చడానికి కొన్ని చక్కని మార్గాలను మీకు చూపించడమే లక్ష్యం.
మీరు HTML5 ఎందుకు నేర్చుకోవాలనుకుంటున్నారు?
ఇది న్యాయమైన ప్రశ్న. స్మార్ట్ఫోన్లు మరియు యాప్ల ప్రపంచంలో, వెబ్ పేజీలను ఎలా ప్రోగ్రామ్ చేయాలో నేర్చుకోవడం నిజంగా ముఖ్యమా?
సరే, నమ్మండి లేదా నమ్మండి, HTML5 టెక్నాలజీలను ఉపయోగించి స్మార్ట్ఫోన్ అప్లికేషన్లను రాయడం సర్వసాధారణం. ఇటీవల వరకు, Android కోసం Facebook యాప్ HTML5, CSS మరియు Javascript ఉపయోగించి వ్రాయబడింది.
బ్లాక్బెర్రీ అనేది HTML5 పై విపరీతమైన ఆసక్తి ఉన్న మరో ప్రధాన కంపెనీ. వారి మొబైల్ ఆపరేటింగ్ సిస్టమ్, బ్లాక్బెర్రీ OS 10 యొక్క తాజా పునరుక్తిలో ఇది స్పష్టంగా ఉంది, ఇక్కడ వారు డెవలపర్లను వెబ్ టెక్నాలజీలను ఉపయోగించి వారి ఫోన్ల కోసం అప్లికేషన్లను అభివృద్ధి చేయడాన్ని చురుకుగా ప్రోత్సహిస్తున్నారు.
కొత్త ఫైర్ఫాక్స్ OS స్మార్ట్ఫోన్లు పూర్తిగా HTML5 యాప్లపై కూడా నడుస్తాయి. నేటి స్మార్ట్ఫోన్ వాతావరణంలో HTML5 పై పని పరిజ్ఞానం అవసరం.
అదనంగా, HTML5 నేర్చుకోవడం మీ కెరీర్కు మంచిది. నన్ను నమ్మలేదా? Indeed.com ప్రకారం , ఒక HTML5 డెవలపర్కి సగటు వార్షిక జీతం $ 89,000. HTML5 టెక్నాలజీలను ఉపయోగించడానికి మరిన్ని కంపెనీలు తమ వెబ్సైట్లను మార్చుకోవడంతో, HTML5 స్టాక్ గురించి తెలిసిన డెవలపర్లు కోరబడ్డారు - ఇప్పుడు గతంలో కంటే ఎక్కువ.
1.1 అవసరాలు
ఈ HTML5 ట్యుటోరియల్ కొన్ని విషయాలను ఊహిస్తుంది. ముందుగా, వెబ్ ఎలా పనిచేస్తుందో మీకు తెలుసని మరియు ప్రాథమిక వెబ్ పేజీని ఎలా సృష్టించాలో మీకు తెలుసని ఇది ఊహించింది. మీరు కొన్ని HTML అంశాలను కలపగలగాలి మరియు కొంత సమాచారాన్ని వెబ్ బ్రౌజర్లో ప్రదర్శించగలగాలి. చూడటం మరియు
ట్యాగ్లు చాలా భయంకరంగా లేవు మరియు కొన్ని సోర్స్ కోడ్లో మీ చేతులు మురికిగా మారడానికి మీరు భయపడరు.
రెండవది, ఈ గైడ్ CSS అంటే ఏమిటి మరియు అది ఎలా పనిచేస్తుందో మీకు తెలుస్తుంది. మీరు డిజైన్ మేధావులు అని మేము ఆశించము, లేదా మీ చేతి వెనుక భాగంలో ఉన్న మొత్తం CSS స్పెసిఫికేషన్ గురించి మీరు తెలుసుకోవాలని అనుకోరు. అయితే, మీరు వెబ్ పేజీలోని ఒక మూలకానికి స్టైలింగ్ను వర్తింపజేయగలగాలి, ఒక CSS ఫైల్కు లింక్ చేయగలగాలి మరియు ఒక ID మరియు తరగతి మధ్య వ్యత్యాసాన్ని తెలుసుకోవాలి మరియు వాటిలో ప్రతిదానికి స్టైలింగ్ను ఎలా వర్తింపజేయాలి.
పైన పేర్కొన్నదానిపై మీరు మీ తల గీసుకుంటుంటే, చింతించకండి. HTML మరియు CSS గురించి ఉత్తమమైన విషయం ఏమిటంటే ఇది నిజంగా చాలా సులభం. నిజానికి, MakeUseOf లో అద్భుతమైన XHTML గైడ్ ఉంది, అది మిమ్మల్ని చాలా వేగంగా వేగవంతం చేస్తుంది.
ఆ గైడ్ చదివిన తర్వాత, మీరు ఈ క్రింది కథనాలను కూడా చూడాలనుకోవచ్చు:
- నాణ్యమైన కోడింగ్ ఉదాహరణలతో 8 వెబ్సైట్లు
- 6 గొప్ప బ్లాగ్ డిజైనర్లను అనుసరించడానికి బ్లాగులు
మీకు ఆధునిక టెక్స్ట్ ఎడిటర్ మరియు బ్రౌజర్ కూడా అవసరం. IE 9 కంటే పాత ఇంటర్నెట్ ఎక్స్ప్లోరర్ యొక్క ఏదైనా వెర్షన్ మరియు సఫారి, క్రోమ్ మరియు ఫైర్ఫాక్స్ యొక్క కొన్ని పాత వెర్షన్లు HTML5 లో భాగమైన అనేక ఫీచర్లతో పోరాడతాయి మరియు ఈ గైడ్ను అనుసరించకుండా మిమ్మల్ని నిరోధించవచ్చు.
ఫలితంగా, మీరు ఆధునిక బ్రౌజర్ను డౌన్లోడ్ చేయడానికి ప్రోత్సహించబడ్డారు. నేను Google Chrome ని సిఫార్సు చేస్తున్నాను మరియు ప్రతి ఉదాహరణలో నేను దానిని ఉపయోగిస్తాను.
అంతకు మించి, మీకు కావలసిందల్లా నేర్చుకోవాలనే సంకల్పం. ఓహ్, మరియు టెక్స్ట్ ఎడిటర్.
1.2 వెబ్ డెవలప్మెంట్ కోసం టెక్స్ట్ ఎడిటర్లు
మీ టెక్స్ట్ ఎడిటర్ మీ కోడ్ రాయడానికి మీరు ఉపయోగించబోతున్నారు. టెక్స్ట్ ఎడిటర్ అంటే ఏమిటి అని మీరు ఆశ్చర్యపోవచ్చు.
సరే, ముందుగా ఇది వర్డ్ ప్రాసెసర్ కాదు. మైక్రోసాఫ్ట్ వర్డ్ మరియు ఆపిల్ పేజీలు వంటి ప్రోగ్రామ్లు వెబ్ అభివృద్ధికి పూర్తిగా సరిపోవు. ఎందుకంటే అవి మీ HTML, CSS మరియు Javascript ఫైల్లకు అదనపు సమాచారాన్ని జోడించడం వలన మీ వెబ్ బ్రౌజర్ చదవడం కష్టమవుతుంది.
టెక్స్ట్ ఎడిటర్ అక్షరాలను టెక్స్ట్ ఫైల్లోకి షూట్ చేస్తుంది, ఇంకా చాలా ఎక్కువ కాదు. అదనపు ఫార్మాటింగ్ లేని ఫైల్లను సృష్టించడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది మరియు మీరు ఎంచుకున్న ఏదైనా పొడిగింపుతో సేవ్ చేయవచ్చు.
మీ కంప్యూటర్ ఇప్పటికే ఒకదానితో వస్తుంది. మీరు విండోస్ పిసిని ఉపయోగిస్తుంటే, నోట్ప్యాడ్ అనేది మీరు ఇన్స్టాల్ చేసిన టెక్స్ట్ ఎడిటర్.
Mac లో, పరిస్థితి కొద్దిగా భిన్నంగా ఉంటుంది. OS X నాలుగు విభిన్న టెక్స్ట్ ఎడిటర్లతో వస్తుంది. వీటిని విమ్, ఎమాక్స్, పికో మరియు నానో అంటారు. అయితే, నోట్ప్యాడ్ వలె కాకుండా, అవన్నీ టెర్మినల్లో పని చేస్తాయి.
వెబ్ డెవలప్మెంట్కి కొత్తగా వచ్చిన వ్యక్తులకు ఇది కొంచెం భయపెట్టేది మరియు సాఫ్ట్వేర్ డెవలప్మెంట్లో కొత్త వ్యక్తులు ఉపయోగించరాదు. మేము ఈ గైడ్లో వాటిని ఉపయోగించము. అయితే, మీరు సాఫ్ట్వేర్ మరియు వెబ్ డెవలప్మెంట్తో కొంచెం నమ్మకంగా ఉన్నప్పుడు, Vim మరియు Emacs ని చూడటం విలువ. వారిద్దరూ శక్తివంతమైన టెక్స్ట్ ఎడిటర్లు, మరియు ప్రావీణ్యం పొందినప్పుడు మీకు చాలా సమయం ఆదా అవుతుంది.
Linux లో, డిఫాల్ట్ టెక్స్ట్ ఎడిటర్ పంపిణీల మధ్య మారుతూ ఉంటుంది. ఉబుంటులో, ఇది గెడిట్ కావచ్చు, ఇది నోట్ప్యాడ్ నుండి చాలా భిన్నంగా లేని చాలా ఆహ్లాదకరమైన టెక్స్ట్ ఎడిటర్.
అయితే, ఈ కోర్సులో మేము మూడు వేర్వేరు సాధనాలను ఉపయోగించి మా కోడ్ని వ్రాస్తాము.
మొదటిది ఉత్కృష్టమైన టెక్స్ట్ 2. నిజాయితీగా నేను దీన్ని తగినంతగా సిఫార్సు చేయలేను. ప్రారంభ డెవలపర్కు జీవితాన్ని సులభతరం చేసే అన్ని విషయాలతో ఇది వస్తుంది. ముందుగా, ఇది కొన్ని భాగాలకు రంగు వేయడం ద్వారా మీ కోడ్ని చదవడానికి సులభతరం చేస్తుంది. రెండవది, ఫైళ్ల మధ్య సులభంగా మారడానికి మరియు ఫైల్స్ యొక్క మొత్తం ప్రాజెక్ట్లను నిర్వహించడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది. ఫైళ్ల మధ్య మారడానికి మరియు ఫ్లైలో బహుళ బిట్ల కోడ్ను సవరించడానికి ఇది అనువైనది.
మూడవది జావాస్క్రిప్ట్ కన్సోల్, ఇది Google Chrome లో నిర్మించబడింది. ఇది మాకు జావాస్క్రిప్ట్ వ్రాయడానికి మరియు వెంటనే అమలు చేయడాన్ని చూడటానికి మరియు ప్రాథమిక ప్రోగ్రామింగ్ భావనలను వివరించడానికి ఉపయోగించబడుతుంది.
రెండవది Codepen.io అనే వెబ్సైట్. ఈ అద్భుతమైన వెబ్సైట్ బ్రౌజర్లో HTML, CSS మరియు జావాస్క్రిప్ట్లను కోడ్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది మరియు ఉపయోగించడానికి ఉచితం. ఇది మీ మార్పులను తక్షణమే చూడటానికి కూడా మిమ్మల్ని అనుమతిస్తుంది.
2. సెమాంటిక్ మార్కప్
ఈ అధ్యాయంలో, మీరు సెమాంటిక్ మార్కప్ గురించి మరియు దాని కోడ్ ఆధారంగా మీ కోడ్ను ఎలా ఆర్గనైజ్ చేయాలో నేర్చుకుంటారు.
ఇటీవల వరకు, HTML కోడ్ సాధారణంగా ట్యాగ్లతో నిర్వహించబడుతుంది. మూలకాల సమూహాన్ని సృష్టించడానికి మరియు ఆ మూలకాలకు స్టైలింగ్ను వర్తింపజేయడానికి ఇవి మిమ్మల్ని అనుమతించాయి.
ఇది పని చేసింది, కానీ మెరుగుదలకు అవకాశం ఉంది. ట్యాగ్లతో సమస్య ఏమిటంటే అది సెమాంటిక్ కాదు. దివ్ అంటే నిజంగా ఏమీ కాదు.
సెమాంటిక్ మార్కప్ అనేది HTML5 లో కొత్త ఫీచర్. ఇది కొత్త ట్యాగ్లను తెస్తుంది, ఇవి 'div' ట్యాగ్ వలె పనిచేస్తాయి, కానీ పేజీ యొక్క సాధారణ భాగాలను ట్యాగ్ చేయడానికి.
కాబట్టి, అవి ఎలా పని చేస్తాయి? కింది కోడ్ని పరిగణించండి.
ఈ కోడ్లో, మాకు నావిగేషన్ బార్, టైటిల్ మరియు లిస్ట్ ఉన్నాయి. మీరు దాని గురించి ఆలోచించినప్పుడు మీరు ఎప్పుడైనా వెళ్ళే చాలా వెబ్సైట్లకు ఇది చాలా భిన్నంగా లేదు.
క్రోమ్బుక్లో ఆడియోను ఎలా రికార్డ్ చేయాలి
MakeUseOf పై ఒక కథనాన్ని చూద్దాం. ఇతర కథనాలకు నావిగేట్ చేయడానికి పూర్తిగా రిజర్వ్ చేయబడిన పేజీలో కొంత భాగం ఉందని మీరు గమనించవచ్చు. వ్యాసంలోని పదాలను కలిగి ఉన్న పేజీలో మరొక భాగం ఉందని మీరు గమనించవచ్చు. పేజీ ఎగువన, మీరు MakeUseOf లోగో మరియు కొన్ని ఇతర లింక్లను కలిగి ఉన్న శీర్షికను చూస్తారు.
మీరు దాని గురించి ఆలోచించినప్పుడు, చాలా వెబ్సైట్లు ఈ సంప్రదాయాలను అనుసరిస్తాయి. చాలా వెబ్సైట్లలో నావిగేషన్ కోసం ప్రత్యేకించబడిన భాగం ఉంది. వారు సాధారణంగా కంటెంట్ యొక్క భాగాన్ని కలిగి ఉంటారు. వారు ఎక్కువగా హెడర్ కలిగి ఉంటారు.
సెమాంటిక్ ట్యాగ్లు అనేది చాలా వెబ్సైట్లలో సాధారణంగా కనిపించే వెబ్సైట్ యొక్క భాగాలను నిర్వచించడానికి మిమ్మల్ని అనుమతించే ట్యాగ్లు. వారు పేజీకి ఏమీ జోడించరు, కానీ వాటి కంటెంట్ ఆధారంగా ట్యాగ్లను సమూహపరచడానికి మరియు ఆ సమూహాలకు స్టైలింగ్లను వర్తింపజేయడానికి మిమ్మల్ని అనుమతిస్తారు.
కాబట్టి, మన ముందు ఉన్న కోడ్ గుర్తుందా? కొన్ని సెమాంటిక్ మార్కప్ జోడించబడి దాన్ని చూద్దాం.
మీరు గమనిస్తే, కోడ్ చదవడం చాలా సులభం. ఏ భాగాలు ఏవి మరియు అస్పష్టత లేదని మీకు తెలుసు. ఇది ముఖ్యం, ఎందుకంటే ఇది మంచి, శుభ్రమైన కోడ్ రాయడం సులభం చేస్తుంది. మీరు ఎప్పుడైనా ప్రొఫెషనల్ వెబ్ డిజైనర్గా మారాలని నిర్ణయించుకుంటే, ఇది చాలా ముఖ్యమైనది - మీరు ఉత్పత్తి చేసే పనిని ఎవరు చదువుతారో మీకు తెలియదు.
కాబట్టి, మరికొన్ని సెమాంటిక్ మార్కప్ ట్యాగ్లను చూద్దాం.
2.1 విభాగం
విభాగం నిజంగా ఉపయోగకరమైన ట్యాగ్. హెడ్డింగ్ లేదా టైటిల్తో గుర్తించబడిన సమాచారం మరియు కంటెంట్ని భారీగా స్వాధీనం చేసుకోవడానికి ఇది ఉపయోగించబడుతుంది. ఇది ఒక పుస్తకంలోని అధ్యాయంలా ఆలోచించండి. ఒక అధ్యాయానికి శీర్షిక ఉంది మరియు చిత్రాలు, రేఖాచిత్రాలు, గ్రాఫ్లు మరియు పదాలు కూడా ఉండవచ్చు. సెక్షన్ ట్యాగ్ వాటన్నింటినీ కలిగి ఉంటుంది.
2.2 వ్యాసం
ఆర్టికల్ ట్యాగ్ ఎలా అనిపిస్తుందో దాని కోసం ఉపయోగించబడుతుంది; బ్లాగ్ పోస్ట్ లేదా వార్తా కథనం వంటి కంటెంట్ కలిగి ఉంటుంది. ఈ కంటెంట్ మిగిలిన బ్లాగ్ నుండి వేరు చేయబడాలి మరియు ఇప్పటికీ పొందికైన అర్ధాన్ని కలిగి ఉండాలి.
2.3 పక్కన
ఈ ట్యాగ్ సంబంధిత, కానీ వెబ్ పేజీలో అంతర్భాగమైన కంటెంట్ కోసం రిజర్వ్ చేయబడింది. ఇది ఒక వార్తాకథనానికి సంబంధించిన వాస్తవాల సమూహం కావచ్చు లేదా బ్లాగ్లోని వినియోగదారు జీవిత చరిత్ర కావచ్చు.
2.4 శీర్షిక
చాలా వెబ్ పేజీలలో పేజీ పైభాగంలో ఒక లోగో, సైట్కు సంబంధించిన కొంత సమాచారం మరియు బహుశా కొన్ని లింక్లు ఉంటాయి. సెమాంటిక్ మార్కప్లో, ఇవన్నీ కలిగి ఉండటానికి మీరు హెడర్ ట్యాగ్ని ఉపయోగిస్తారు.
2.5 నవ్
ఈ మూలకం మీ వెబ్సైట్ యొక్క నావిగేషన్ భాగం కోసం రిజర్వ్ చేయబడింది. ఇది ఇతర వెబ్సైట్లకు లేదా వెబ్సైట్లోని ఇతర పేజీలకు లింక్లను కలిగి ఉంటుంది. MakeUseOf సందర్భంలో, ఇది శీర్షిక క్రింద ఉన్న పేజీలో భాగం కావచ్చు.
2.6 ఫుటర్
ఈ ట్యాగ్ పేజీ దిగువ భాగానికి రిజర్వ్ చేయబడింది. ఇక్కడ, మీరు మీ 'నా గురించి' పేజీకి కొన్ని సంప్రదింపు వివరాలు, కాపీరైట్ సమాచారం, మ్యాప్ లేదా కొన్ని లింక్లను ఉంచవచ్చు.
2.7 మిమ్మల్ని మీరు పరీక్షించుకోండి
- సెమాంటిక్ మార్కప్ అంటే ఏమిటి మరియు అది దేనికి ఉపయోగించబడుతుంది?
- నేను ఒక వెబ్ పేజీని తయారు చేస్తున్నాను మరియు నా గురించి ఒక జీవితచరిత్రను కలిగి ఉండటానికి నేను ఒక సెమాంటిక్ ట్యాగ్ని ఉపయోగించాలనుకుంటున్నాను. నేను ఏది ఉపయోగిస్తాను?
3. ఫారమ్లు
మీరు ఎప్పుడైనా కొంచెం వెబ్ డిజైన్ చేసి ఉంటే, HTML లో ఒక సాధారణ ఫారమ్ను ఎలా సృష్టించాలో మీకు బహుశా తెలుసు. మీరు నిజంగా తెలివైనవారైతే, మీ ఫారమ్ నుండి మీరు పొందిన సమాచారాన్ని ఎలా తీసుకోవాలో మరియు దానితో ఎలా చేయాలో మీకు బహుశా తెలుసు, అలాంటి వాటిని డేటాబేస్లో ఉంచండి.
ఫారమ్లు చాలా ముఖ్యమైనవి. ఇంటర్నెట్లో మనం చేసే చాలా పనులకు అవి ఆధారం. మీకు ఇష్టమైన సోషల్ నెట్వర్క్లో మీరు స్టేటస్ అప్డేట్ సృష్టించిన ప్రతిసారీ, Amazon నుండి ఏదైనా కొనుగోలు చేయండి లేదా ఇమెయిల్ పంపండి, మీరు బహుశా ఒక HTML ఫారమ్ని ఉపయోగించారు.
మీకు బహుశా తెలియని విషయం ఏమిటంటే, మేము ఫారమ్లను సృష్టించే విధానం HTML5 లో సమూలంగా మారిపోయింది. ఇది కూడా గణనీయంగా మెరుగ్గా ఉంది. ఈ అధ్యాయంలో, సాదా పాత మార్కప్తో మీరు ఇప్పుడు చేయగలిగే కొన్ని మంచి పనులను మేము చూడబోతున్నాము.
కాబట్టి, మేము HTML5 లో ఫారమ్లను వ్రాయగల కొత్త మార్గం గురించి చాలా బాగుంది? ముందుగా, ఫారమ్ యొక్క మార్కప్ను మార్చడం ద్వారా సమర్పించడానికి కొన్ని ఫీల్డ్లు తప్పనిసరిగా పూరించబడతాయని మీరు నిర్ధారించుకోవచ్చు. అదనంగా, దీన్ని చేయడానికి మీరు ఇకపై JavaScript లేదా PHP పర్వతాలను వ్రాయవలసిన అవసరం లేదు. ఇది సామాన్యంగా సులభం.
రెండవది, మీ వినియోగదారులు మీ ఫారమ్కు నిర్దిష్ట రకాల సమాచారాన్ని మాత్రమే సమర్పించగలరని మీరు నిర్ధారించవచ్చు. కాబట్టి, మీ మెయిలింగ్ జాబితా కోసం మీకు వెబ్సైట్ ఉందని అనుకుందాం మరియు వ్యక్తులు వాస్తవ ఇమెయిల్ చిరునామాలను మాత్రమే సమర్పించాలని మీరు కోరుకుంటున్నారా? HTML5 ఉపయోగించి మీరు దీన్ని చేయవచ్చు. ఇది నిజంగా చాలా శక్తివంతమైనది.
మూడవదిగా, మీరు కొన్ని ఫీల్డ్లకు ప్లేస్హోల్డర్ ఇవ్వడం ద్వారా మీ ఫారమ్లను మెరుగ్గా కనిపించేలా చేయవచ్చు. ఇది మీ వినియోగదారులకు మీరు ఒక ఫారమ్ కోసం ఎదురుచూస్తున్న దానికి ఒక ఉదాహరణను చూపగలగడం వలన ఇది వారిని మరింత సహజంగా చేస్తుంది.
3.1 ఫారమ్ను మెరుగుపరచడం
కాబట్టి, ఒక ఫారమ్ను చూద్దాం మరియు దానిని ఎలా మెరుగుపరచవచ్చో చూద్దాం.
ఈ ఫారమ్ చాలా ప్రాథమికమైనది. ఇది పేరు, ఇమెయిల్ మరియు ఇష్టమైన రంగును తీసుకుంటుంది, ఆపై దానిని సమర్పించడానికి వినియోగదారుని అనుమతిస్తుంది. దానిలో ఏ సమాచారం ఉంచబడుతుందనే ధృవీకరణ ఇందులో లేదు మరియు కొన్ని ఖాళీ ఫీల్డ్లతో ఈ ఫారమ్ను సమర్పించకుండా వినియోగదారులను ఏదీ ఆపడం లేదు. అవన్నీ మార్చుకుందాం.
కాబట్టి, మేము చేయాలనుకుంటున్న మొదటి విషయం ఏమిటంటే, ఇమెయిల్ ఫీల్డ్ కేవలం ఇమెయిల్ మాత్రమే తీసుకుంటుంది. ఇది చాలా కష్టమైన పని, ఎందుకంటే మీరు అన్ని రకాల ఆర్కేన్ రెగెక్స్ కోడ్ని సృష్టించాలి. సరే, ఇక లేదు. మీరు కేవలం 'టెక్స్ట్' నుండి 'ఇమెయిల్' కు ఇన్పుట్ రకాన్ని మార్చాలి. మీరు ఆ ఫారమ్ను అసభ్యంగా సమర్పించడానికి ప్రయత్నించినప్పుడు, అది ఫిర్యాదు చేస్తుంది మరియు మీరు ఇమెయిల్ సమర్పించాలని పట్టుబడుతుంది.
3.2 ఇన్పుట్ రకాలు మరియు నమూనాలు
మీకు అవసరమైన ఇతర ఇన్పుట్ రకాలు ఉన్నాయి. వీటిలో టెలిఫోన్ నంబర్లు, వెబ్ చిరునామాలు, శోధన ఫారమ్లు మరియు రంగు పికర్లు కూడా ఉన్నాయి! HTML5 నిరంతరం అభివృద్ధి చెందుతున్నందున, సమీప భవిష్యత్తులో మేము మరిన్ని ఇన్పుట్ రకాలను త్వరలో పేర్కొనగలం.
ఇంకా, ప్రాంతాన్ని బట్టి మారుతున్న ఫోన్ నంబర్లు వంటి వాటి కోసం, మీరు ఇన్పుట్ల కోసం నమూనాలను పేర్కొనవచ్చు. ఇవి 'రెగ్యులర్ ఎక్స్ప్రెషన్స్' అని పిలువబడే వాటిని ఉపయోగించి సృష్టించబడ్డాయి మరియు సంక్లిష్టంగా ఉంటాయి, కానీ అపరిమితంగా శక్తివంతమైనవి.
మేము మా ఫీల్డ్లో ఒక ఇమెయిల్ యొక్క ఉదాహరణను కూడా అందించాలనుకుంటున్నాము, కాబట్టి యూజర్ అతను లేదా ఆమె సమర్పించాల్సిన వాటిపై ఎలాంటి అస్పష్టత లేదు. ఇది నిజంగా సులభం. ఉదాహరణ ఇమెయిల్ చిరునామాతో 'ప్లేస్హోల్డర్' యొక్క కొత్త లక్షణాన్ని సృష్టించండి.
మా 'ఇష్టమైన రంగు' ఫీల్డ్ అవసరమని మేము నిర్ధారించబోతున్నాము. ఇమెయిల్ ఇన్పుట్ ట్యాగ్లోని చివరి కోణం బ్రాకెట్లో (>), 'అవసరం' అని వ్రాయండి. అంతే. ఇప్పుడు, మీరు మీ ఫారమ్ను విలువ లేకుండా సమర్పించడానికి ప్రయత్నించినప్పుడు, అది ఒక దోష సందేశాన్ని ఉత్పత్తి చేస్తుంది.
ఈ దోష సందేశాల గురించి నిజంగా నమ్మశక్యం కాని విషయం ఏమిటంటే, వాటిని సృష్టించడానికి వినియోగదారు వాటిని వ్రాయాల్సిన అవసరం లేదు లేదా ఏదైనా కోడ్ రాయకూడదు. మీరు అవసరమైన ఫీల్డ్ని మార్చడానికి ఫీల్డ్ని మార్చండి మరియు అది పని చేస్తుంది. మీరు కోరుకుంటే, వాటిని అనుకూలీకరించడం సాధ్యమవుతుంది.
HTML5 లోని ఫారమ్ల శక్తికి ఇది చాలా క్లుప్త పరిచయం. మీరు మరింత చదవాలనుకుంటే, మీరు ఈ లింక్లను సందర్శించాలని నేను సిఫార్సు చేస్తున్నాను.
మరింత చదవడానికి:
- CSS ట్రిక్స్ - సెమాంటిక్ మార్కప్ వ్రాద్దాం
- HTML5 డాక్టర్ - సెమాంటిక్స్ గురించి మాట్లాడుకుందాం
3.3 మిమ్మల్ని మీరు పరీక్షించుకోండి
వచ్చే వారం మీ పుట్టినరోజు, మరియు మీరు రిజిస్ట్రేషన్ ఫారమ్ని సృష్టించాలనుకుంటున్నారు, కాబట్టి మీరు ఎంత కేక్ను సృష్టించాలో మీకు తెలుస్తుంది. మీ టెక్స్ట్ ఎడిటర్ను తెరిచి, కింది ఫీల్డ్లతో ఒక ఫారమ్ని సృష్టించండి.
- పేరు
- ఇమెయిల్ చిరునామా
- ఫోను నంబరు
- అలెర్జీలు
పేరు, ఇమెయిల్ మరియు ఫోన్ నంబర్ ఫీల్డ్లు తప్పనిసరి అని నిర్ధారించుకోండి మరియు ఇమెయిల్ మరియు ఫోన్ నంబర్ ఫీల్డ్లు 'ఇమెయిల్' మరియు 'టెల్' ఇన్పుట్ రకాలతో సెట్ చేయబడ్డాయి. 'పుప్పొడి, గుడ్లు, క్విచే' విలువతో అలెర్జీ ఫీల్డ్ కోసం ప్లేస్హోల్డర్ను సృష్టించండి.
ఫారమ్తో ఆడుకోండి. అవసరమైన ఫీల్డ్లను ఖాళీగా సమర్పించడానికి ప్రయత్నించండి మరియు ఫోన్ నంబర్ ఫీల్డ్లోకి సంఖ్యా రహిత అక్షరాలను చొప్పించడానికి ప్రయత్నించండి. ఇమెయిల్ ఫీల్డ్లో, ఇమెయిల్ చిరునామా లేనిదాన్ని చొప్పించండి. ఏం జరుగుతుంది?
4. సగటు
ఫ్లాష్, షాక్వేవ్ లేదా సిల్వర్లైట్ వంటి వాటిని ఉపయోగించడం ద్వారా వెబ్ పేజీలో కొంత వీడియో లేదా ఆడియోని చేర్చగల ఏకైక మార్గం ఒకప్పుడు ఉండేది.
ఇది అనువైనది కాదు. ముందుగా, ఈ ఫ్రేమ్వర్క్లు ఏవీ మొబైల్ పరికరాల్లో బాగా పని చేయలేదు. స్మార్ట్ఫోన్లు మరియు టాబ్లెట్ల యొక్క ఆధునిక ప్రపంచానికి అవి కేవలం అమర్చబడలేదు.
విండోస్ 10 కోసం ఏరో గ్లాస్ థీమ్
అదనంగా, అవి యాజమాన్య ఆకృతులు. తత్ఫలితంగా, Linux మరియు OS X యొక్క వినియోగదారులు అందంగా రెండవ-స్థాయి అనుభవాన్ని పొందవచ్చు లేదా వారి ప్లాట్ఫారమ్కు అందుబాటులో లేనందున, మీడియా సేవలను వినియోగించకుండా కూడా నిరోధించవచ్చు.
చివరగా, వారు నెమ్మదిగా ఉండే ధోరణిని కలిగి ఉన్నారు. మీరు శక్తి లేని లేదా పాత కంప్యూటర్లో ఉంటే, ఈ ఫ్రేమ్వర్క్లను ఉపయోగించి వీడియోను చూసే మంచి అనుభవం మీకు ఉండదు. దీని కోసం ఫ్లాష్ ముఖ్యంగా అపఖ్యాతి పాలైంది.
4.1 HTML5 వీడియో మరియు ఆడియోని ఎలా అద్భుతంగా చేస్తుంది
HTML5 వెబ్ డెవలపర్లు వీడియో మరియు ఆడియోను వారి వెబ్ పేజీలలో కొన్ని లైన్ల కోడ్తో చేర్చడానికి అనుమతించడం ద్వారా దీనిని మార్చింది. ఇది మొబైల్ పరికరాల్లో ట్రీట్ పనిచేస్తుంది మరియు ప్రతి ఆధునిక వెబ్ బ్రౌజర్లో పనిచేస్తుంది.
ఫలితంగా, YouTube, Vimeo మరియు Netflix వంటి ప్రధాన కంపెనీలు HTML5 విప్లవాన్ని సద్వినియోగం చేసుకుంటున్నాయి. మీరు వారితో ఎందుకు చేరరు?
4.2 కోడెక్ల గురించి అన్నీ
ఈ అధ్యాయంలో, మీ వెబ్ పేజీలలో ఆడియో మరియు వీడియోను చేర్చడానికి HTML5 శక్తిని ఎలా ఉపయోగించాలో మీరు నేర్చుకోబోతున్నారు.
ముందుగా, నేను ఒక హెచ్చరికతో ప్రారంభించాలి. మీరు ప్రతి ఆధునిక వెబ్ బ్రౌజర్లో HTML5 వీడియోను ఉపయోగించగలిగినప్పటికీ, ఇది ప్రతి వెబ్ బ్రౌజర్లో ఒకే విధంగా పనిచేయదు. ప్రతి బ్రౌజర్ ఉపయోగించే కోడెక్లు మారుతూ ఉంటాయి. ఇంటర్నెట్ ఎక్స్ప్లోరర్లో, మీరు MP4 వీడియోని ఉపయోగించడం పరిమితం. Chrome కొంచెం ఉదారంగా ఉంటుంది మరియు WebM, MP4 మరియు Ogg థియోరా వీడియోలను ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఒపెరా కొంచెం నియంత్రణలో ఉంది మరియు థియోరా మరియు వెబ్ఎం వీడియోలను ఉపయోగించడానికి మాత్రమే మిమ్మల్ని అనుమతిస్తుంది.
తత్ఫలితంగా, మీరు మీ వెబ్ పేజీలో వీడియోని ఎలా చొప్పించాలో మీరు కొంచెం తెలివిగా ఉండాలి. కాబట్టి, ఇది ఎలా పనిచేస్తుందో చూద్దాం.
4.3 వీడియోతో ప్రారంభమవుతుంది
ప్రారంభించడానికి, మీరు కొన్ని ప్రారంభ మరియు ముగింపు ట్యాగ్లను సృష్టించాలి. ఇది మీ వీడియో ఫైల్లకు లింక్ చేసే ఇక్కడ ఉంది. అయితే ముందుగా, మీరు పోస్టర్ సెట్ చేయాలనుకుంటున్నారు. దాని అర్థం ఏమిటి?
సరే, మీ వీడియో లోడ్ అయ్యే వరకు మీరు వేచి ఉన్నప్పుడు, మీ సైట్ను సందర్శించే వ్యక్తి వీడియోకు సంబంధించిన చిత్రాన్ని చూడగలరు. అలా చేయడానికి, మీరు లింక్ చేయాలనుకుంటున్న ఇమేజ్ విలువతో మీ వీడియో ట్యాగ్లకు 'పోస్టర్' లక్షణాన్ని ఇవ్వండి. ఇది ఇలా ఉండాలి.
మేము చేయాలనుకుంటున్న తదుపరి విషయం ఫాల్బ్యాక్ను సృష్టించడం. దీని అర్థం ఏమిటి? కాబట్టి, మీరు అక్కడ పాత, తక్కువ అద్భుతమైన బ్రౌజర్లలో ఒకదాన్ని ఉపయోగిస్తున్నారని అనుకుందాం. ఈ చాలా పాత బ్రౌజర్లు HTML5 వీడియోకు మద్దతు ఇవ్వవు మరియు అందువల్ల HTML5 వీడియోను ప్లే చేయలేవు. మీరు వారి బ్రౌజర్ని అప్గ్రేడ్ చేయాలనుకుంటున్నారని మరియు వారు అలా చేసే వరకు, వారు మీ వీడియోను చూడలేరని వారికి తెలియజేసే సందేశాన్ని మీరు వారికి పంపబోతున్నారు.
అలా చేయడానికి, మీరు మీ సందేశాన్ని మీ వీడియో ట్యాగ్ల లోపల వ్రాయండి. ఇంకేమీ అవసరం లేదు. మీరు దాన్ని పూర్తి చేసిన తర్వాత, మీకు ఇలా కనిపించే కొన్ని కోడ్ మిగిలిపోతుంది.
ఇప్పుడు, కొంత వీడియోని జోడిద్దాం. నేను దీనిని Google Chrome లో పరీక్షించబోతున్నాను, కాబట్టి నేను MP4 సినిమాకి లింక్ చేయబోతున్నాను. అలా చేయడానికి, నేను ఒక సోర్స్ ట్యాగ్ని క్రియేట్ చేసి, దానికి నేను చేర్చాలనుకుంటున్న వీడియో విలువను కలిగి ఉన్న src లక్షణాన్ని ఇస్తాను.
నా పేజీ ఇప్పుడు నా వెబ్ బ్రౌజర్లో తెరవడానికి సిద్ధంగా ఉంది. నేను నిజంగా చాలా పెద్ద సినిమాకి లింక్ చేసాను మరియు దాని ఫలితంగా తెరిచినప్పుడు పోస్టర్ మాత్రమే చూడగలరు.
4.4 ఆడియోను జోడిస్తోంది
ఆడియోను మీ వెబ్ పేజీలో చేర్చవచ్చు, అది మేము మా పేజీలో వీడియోని ఎలా చొప్పించామో గుర్తుచేస్తుంది.
ముందుగా, ఒకరు కొన్ని ఆడియో ట్యాగ్లను సృష్టిస్తారు. ఈ ఆడియో ట్యాగ్లు 'నియంత్రణల' లక్షణాన్ని కలిగి ఉంటాయి. ఇది పేజీని సందర్శించే వినియోగదారుకు ప్లే చేయబడుతున్న ఆడియోను పాజ్ చేయడం, రివైండ్ ప్లే చేయడం మరియు వేగంగా ఫార్వార్డ్ చేయగల సామర్థ్యాన్ని అందిస్తుంది.
అప్పుడు, మీరు లింక్ చేయాలనుకుంటున్న MP3 ఫైల్కు సోర్స్ ట్యాగ్ను చేర్చండి. కోడెక్ అనుకూలత విషయానికి వస్తే మీరు నిజంగా అంతగా ఆందోళన చెందాల్సిన అవసరం లేదు. ఇటీవలి వెబ్ బ్రౌజర్లు MP3 ఆడియోను ప్లే చేయగల సామర్థ్యాన్ని కలిగి ఉన్నాయి, అయితే '.ogg' మరియు '.wav' ఫైల్ను కూడా చేర్చడం మంచి పద్ధతి.
చివరగా, మీరు పాత బ్రౌజర్ల కోసం ఫాల్బ్యాక్ను సృష్టించవచ్చు. మీరు మీ వీడియో కోసం ఫాల్బ్యాక్ను సృష్టించిన విధంగానే ఇది కూడా జరుగుతుంది.
తుది ఫలితం కొంచెం ఇలా కనిపిస్తుంది.
మీరు దీన్ని మీ వెబ్ బ్రౌజర్లో తెరిచినప్పుడు, ఇది కొంచెం ఇలా ఉండాలి.
4.5 మిమ్మల్ని మీరు పరీక్షించుకోండి
- మీ వీడియో ట్యాగ్లలో పోస్టర్ ఉండడం వల్ల ప్రయోజనం ఏమిటి?
- ఇంటర్నెట్ ఎక్స్ప్లోరర్లో మీరు ఏ కోడెక్లను ఉపయోగించలేరు?
- నేను కొంత ఆడియోను పాజ్ చేయగల సామర్థ్యం కావాలనుకుంటే, మీ 'ఆడియో' ట్యాగ్కు మీరు ఏ లక్షణాన్ని జోడిస్తారు?
మరింత చదవడానికి:
5. CSS3 పరివర్తనాలు మరియు యానిమేషన్లు
CSS సాంప్రదాయకంగా వెబ్ పేజీ యొక్క లేఅవుట్ మరియు డిజైన్ను నిర్వహించడానికి ఉపయోగించబడింది. ఇది ఇప్పటికీ నిజం, కానీ దాని తాజా పునరుక్తిలో యానిమేషన్లు మరియు మూలకాలు మరియు చిత్రాల పరివర్తనలను నిర్వహించే సామర్థ్యాన్ని పొందింది.
CSS3 తో ప్రజలు డిజిటల్ గడియారాన్ని సృష్టించడం నుండి పూర్తి పాంగ్ గేమ్ రాయడం వరకు కొన్ని అద్భుతమైన పనులు చేసారు. మ్యాడ్ మెన్కి పరిచయ క్రెడిట్లను తిరిగి సృష్టించడానికి కూడా ఎవరైనా దీనిని ఉపయోగించారు. ఇది నిజంగా శక్తివంతమైన సాంకేతికత మరియు ఇది ప్రావీణ్యం పొందినప్పుడు మీ వెబ్ పేజీకి అద్భుతమైన స్థాయి కార్యాచరణను జోడించడానికి ఉపయోగించవచ్చు.
ఈ అధ్యాయంలో, నేను మీకు CSS3 గురించి క్లుప్త పరిచయం ఇవ్వబోతున్నాను మరియు మీ పేజీకి కొన్ని అద్భుతమైన ప్రభావాలను ఎలా జోడించాలో మీకు చూపుతాను.
ముందుగా, codepen.io కి నావిగేట్ చేయండి మరియు కొత్త పెన్ను సృష్టించండి. ఈ అధ్యాయం వ్యవధి కోసం మేము దీనిని మా పని ప్రదేశంగా ఉపయోగించబోతున్నాము.
మేము సరళంగా ప్రారంభించి, హోవర్ చేసినప్పుడు చిత్రాన్ని 3 డిగ్రీలు తిప్పే సాధారణ ఇమేజ్ ట్రాన్స్ఫార్మ్ను సృష్టించబోతున్నాం. ముందుగా, ఒక డివి ట్యాగ్ని సృష్టించి, దానికి ఒక ఐడిని ఇవ్వండి. దిగువ ఉదాహరణలో, నేను దానికి 'muo' యొక్క ID ఇచ్చాను.
5.1 CSS హోవర్ ప్రభావాలు
ఆ విభాగంలో, మీకు నచ్చిన చిత్రాన్ని చేర్చండి. నేను MakeUseOf కోసం లోగో కాపీని చేర్చాను.
అప్పుడు మీరు కొన్ని స్టైల్షీట్ నియమాలను వ్రాయవలసి ఉంటుంది. దిగువ ఉదాహరణలో, ఇమేజ్కు కొంత గదిని ఇవ్వడానికి నేను టాప్ మరియు ఎడమ మార్జిన్ను సృష్టించాను. నేను '#muo: హోవర్' తో మొదలయ్యే ఆసక్తికరమైన స్టైల్షీట్ నియమాన్ని కూడా చేర్చాను. అది ఏమిటి?
మీరు స్టైల్షీట్ నియమానికి ': హోవర్' అటాచ్ చేసినప్పుడు, అది ఒక మూలకం, ఒక ID లేదా తరగతికి సంబంధించినది అయినప్పుడు, మీ మౌస్ మూలకాన్ని పరిపాలించినప్పుడు ఈ స్టైలింగ్ను వర్తింపజేయమని మీరు బ్రౌజర్కి సమర్థవంతంగా చెబుతున్నారు. చాలా బాగుంది, సరియైనదా?
'#Muo: hover' నియమం లోపల, '-వెబ్కిట్-ట్రాన్స్ఫార్మ్: రొటేట్ (3 డిగ్)' అని చెప్పే లైన్ మాకు వచ్చింది. మీరు ఊహించినట్లు నేను ఖచ్చితంగా అనుకుంటున్నాను, ఇది బ్రౌజర్కు ఆ డివి మూలకాన్ని మూడు డిగ్రీలు తిప్పమని చెబుతోంది.
అయితే, ఈ ట్యాగ్ కేవలం Chrome మరియు Safari లో మాత్రమే పనిచేస్తుంది. మీ కోడ్ ఫైర్ఫాక్స్ లేదా ఇంటర్నెట్ ఎక్స్ప్లోరర్ 9 మరియు ఆ పై వెర్షన్లలో పని చేయాలనుకుంటే, ఈ క్రింది పంక్తులను చేర్చడానికి మీరు మీ CSS ఫైల్ని మార్చాలనుకుంటున్నారు.
ఇప్పుడు, మీరు చిత్రంపై హోవర్ చేసినప్పుడు, ఇది ఇలా కనిపిస్తుంది:
5.2 చిత్రాల పరిమాణాన్ని మార్చడానికి CSS3 ని ఉపయోగించడం
కాబట్టి, అక్కడ ఎందుకు ఆగాలి? ఇమేజ్ని విస్తరించడానికి లేదా కుదించడానికి మీరు 'ట్రాన్స్ఫార్మ్' పద్ధతిని కూడా ఉపయోగించవచ్చని మీకు తెలుసా. కింది పంక్తులను చేర్చడానికి మా CSS ఫైల్ని మార్చుకుందాం.
మీరు చూడగలిగినట్లుగా, మేము ఇప్పుడు కొత్త పరివర్తన నియమాన్ని చేర్చుకున్నాము, కానీ ఈసారి 'స్కేల్' అని పిలవబడే ఏదైనా చేయాలని మేము చెబుతున్నాము. ఇమేజ్ పరిమాణాన్ని పెంచడానికి ఇది నిజంగా అందమైన మార్గం. ఇది రెండు పారామితులను తీసుకుంటుంది (ఆ కుండలీకరణాల మధ్య మీరు చూసే సంఖ్యలు), మరియు మీరు మూలకం యొక్క ఎత్తు మరియు వెడల్పును పెంచే మొత్తాన్ని అవి సూచిస్తాయి.
మీరు కోడ్ నుండి చూడగలిగినట్లుగా, నేను MakeUseOf div లోగో పరిమాణాన్ని 50%పెంచబోతున్నాను. మీరు ఈ పనులను దానిపై ఉంచడం ద్వారా పరీక్షించవచ్చు. ఇప్పుడు 'MakeUseOf' లోగో ఇప్పుడు గణనీయంగా విస్తరించబడిందని మీరు చూస్తారు.
ఇది CSS3 పరివర్తనలకు చాలా సున్నితమైన పరిచయం. CSS3 నిజానికి చాలా కొత్తగా ఉన్నప్పటికీ, మీరు దానితో చాలా ఆసక్తికరమైన అవకతవకలు చేయగలరని మీరు ఇప్పుడు చూడవచ్చు.
5.3 మిమ్మల్ని మీరు పరీక్షించుకోండి
- హోవర్ చేస్తున్నప్పుడు ఒక మూలకానికి మనం స్టైలింగ్ను ఎలా వర్తింపజేస్తాము?
- CSS3 ఉపయోగించి మీరు చిత్రాన్ని ఎలా తిప్పుతారు?
- CSS3 ఉపయోగించి మీరు చిత్రాన్ని ఎలా స్కేల్ చేస్తారు?
- మీరు మీ ట్రాన్స్ఫార్మ్ పద్ధతిని 'అనువాదం (50px, 50px)' పాస్ చేస్తే ఏమి జరుగుతుంది?
మరింత చదవడానికి:
6. తగినంత జావాస్క్రిప్ట్
మీరు మీ వెబ్ బ్రౌజర్లో స్క్రిప్ట్ను ఉపయోగించాలనుకుంటే, మీరు Javascript ని ఉపయోగించాలి. పాపం దాని గురించి రెండు మార్గాలు లేవు. ఇది చాలా మంది అభిమానులను కలిగి ఉన్న భాష, మరియు చాలా మంది వ్యతిరేకులు కూడా. భాషలు వెళ్ళినప్పుడు, దీనికి అనేక మొటిమలు ఉన్నాయి. భాష గురించి అత్యంత ముఖ్యమైన పుస్తకం 'జావాస్క్రిప్ట్: ది గుడ్ పార్ట్స్' అని పిలవబడే ఒక కారణం ఉంది.
ఒకే అధ్యాయంలో జావాస్క్రిప్ట్ ఎలా ఉపయోగించాలో మీకు నేర్పించడం అసాధ్యం. ఇక్కడ లక్ష్యం అది కాదు. డ్రాయింగ్లు మరియు యానిమేషన్లను రూపొందించడానికి కాన్వాస్ అనే సాంకేతికతను ఉపయోగించడం గురించి తదుపరి అధ్యాయాన్ని మీరు అర్థం చేసుకోగలిగేలా తగినంత జావాస్క్రిప్ట్ని మీకు నేర్పించడమే లక్ష్యం.
6.1 కన్సోల్ని యాక్సెస్ చేస్తోంది
దీన్ని చేయడానికి, మేము Google Chrome యొక్క ప్రతి కాపీలో అంతర్నిర్మిత Javascript కన్సోల్ని ఉపయోగించబోతున్నాము. దీన్ని యాక్సెస్ చేయడానికి, మీరు ఏదైనా వెబ్ పేజీపై కుడి క్లిక్ చేసి, ఆపై 'మూలకాన్ని తనిఖీ చేయండి' నొక్కండి. అప్పుడు 'కన్సోల్' పై క్లిక్ చేయండి. మీరు దీనిని చూడాలి.
ఏ వర్ధమాన డెవలపర్ అయినా వ్రాసే మొదటి కార్యక్రమం 'హలో వరల్డ్' ప్రోగ్రామ్ కావడం సాంప్రదాయకమైనది. ఇది 'హలో వరల్డ్' అనే పదబంధాన్ని ముద్రించే ఒక సాధారణ కార్యక్రమం, మరియు మరేమీ కాదు. మీ కన్సోల్లో, 'console.log (' హలో వరల్డ్! '); అని టైప్ చేయండి.
6.2 మీ మొదటి కార్యక్రమం
కాబట్టి, మేము ఖచ్చితంగా ఏమి చేసాము? ముందుగా, మేము 'console.log' అని పిలవబడ్డాము. ఇది కంప్యూటర్లో నిర్మించబడిన ఒక బిట్ కోడ్, అది మీకు ఏది చెప్పినా దాన్ని ప్రింట్ చేస్తుంది. మేము దానికి కొన్ని కుండలీకరణాలను జోడించాము మరియు 'హలో వరల్డ్' అనే డబుల్ కోట్స్లో చేర్చాము. దీనిని 'ఉత్తీర్ణత వాదనలు' అంటారు, మరియు మేము ఆమోదించిన వాదన రకం స్ట్రింగ్ అంటారు. మీరు అక్షరాలు మరియు ప్రత్యేక అక్షరాలతో ఏదైనా చేయాలనుకున్నప్పుడు, మీరు తప్పనిసరిగా ఒకే కోట్లను ఉపయోగించాలి. అయితే, మీరు సంఖ్యలను ఉపయోగించి ఏదైనా చేయాలనుకుంటే, దిగువ చూసినట్లుగా మీరు సాధారణంగా కోట్లను ఉపయోగించాల్సిన అవసరం లేదు.
6.3 జావాస్క్రిప్ట్లో వేరియబుల్స్
మీరు వేరియబుల్స్ని 'console.log' కి కూడా పంపవచ్చు. వేరియబుల్స్ సంక్లిష్టంగా అనిపిస్తాయి, కానీ అవి నిజంగా సమాచార భాగాలను ఉంచే స్థలం మాత్రమే. ఇవి తరచుగా సంఖ్యలు లేదా అక్షరాలు. అలా చేయడానికి, మీరు 'var' కీవర్డ్ని ఉపయోగించి ఒక వేరియబుల్ని డిక్లేర్ చేస్తారు, దానికి ఒక పేరు ఇవ్వండి, ఆపై సమానమైన గుర్తుతో, మీరు దానికి విలువను ఇస్తారు. కాబట్టి, నేను 'హలో' అనే వేరియబుల్ను సృష్టించబోతున్నాను, ఆపై దానికి 'హలో వరల్డ్!' విలువను ఇస్తాను. నేను దానిని కన్సోల్.లాగ్కు పాస్ చేయబోతున్నాను.
కోట్స్ ఉపయోగించి console.log కి నేను 'హలో' ఎలా పాస్ చేయలేదని గమనించండి. నేను 'హలో' లోని విషయాలను కన్సోల్కు ముద్రించాలనుకుంటున్నాను మరియు 'హలో' కాదు.
6.4 ఏ విధులు చేస్తాయి
కోడ్ యొక్క ఒకే భాగాన్ని పదేపదే తిరిగి వ్రాయడం కొంచెం శ్రమతో కూడుకున్నది కావచ్చు, కాబట్టి ఈ కారణంగానే మేము ఫంక్షన్లను వ్రాస్తాము. మీరు అనుకున్నదానికంటే విధులు సులువుగా ఉంటాయి. అవన్నీ కోడ్ యొక్క భాగాలు మాత్రమే, అదే కోడ్ను మళ్లీ వ్రాయకుండా మనం తిరిగి ఉపయోగించుకోవచ్చు. క్రింద, మేము 'sup' అనే ఫంక్షన్ను క్రియేట్ చేసాము మరియు దానిని స్క్రీన్కు లాగ్ చేసిన కుండలీకరణాలను ఉపయోగించి వాదనను పాస్ చేస్తున్నాము. కన్సోల్ 'sup (' హలో వరల్డ్! ') కు పంపడం ద్వారా మేము' sup 'అని పిలుస్తాము;'.
6.5 'ఫర్' లూప్తో చర్యను పునరావృతం చేయడం
మీరు ఒకే చర్యను నిర్ణీత సార్లు చేయాలని అనుకుందాం. ఆ కారణంగానే మేము 'ఫర్' లూప్ను ఉపయోగిస్తాము. వారు మొదట భయానకంగా కనిపిస్తారు, కానీ మీరు వాటిని అర్థం చేసుకున్న తర్వాత చేయడం చాలా సులభం. మీరు 'కోసం ()' రాయడం ద్వారా ప్రారంభించండి.
ఆ కుండలీకరణాలలో, మేము ఒక చర్యను ఎన్నిసార్లు చేశామో లెక్కించే వేరియబుల్ను సృష్టించాలనుకుంటున్నాము. కాబట్టి, 'for (var i = 0;)' లాంటిది మనకు లభిస్తుంది.
నేను ఒక షరతును పాటించలేదని మేము తనిఖీ చేయాలనుకుంటున్నాము. కాబట్టి, ఈ సందర్భంలో, ఇది 10 కంటే తక్కువగా ఉందని మేము చూడాలనుకుంటున్నాము, కాబట్టి, సెమికోలన్ తర్వాత, మేము 'i' అని వ్రాస్తాము<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).
నేను 10 కంటే తక్కువ ఉంటే, మేము దానిని ఒకటి ద్వారా జోడించాలనుకుంటున్నాము మరియు తరువాత ఏదైనా చేయాలనుకుంటున్నాము. కాబట్టి, మేము 'i = i + 1' ఉంచాము. మా లూప్ దాదాపు పూర్తయింది: 'కోసం (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.
ఆ తరువాత, మేము ఒక చర్య చేయాలనుకుంటున్నాము. కాబట్టి, చివరి కుండలీకరణాల తర్వాత, మేము కొన్ని గిరజాల బ్రేస్లను వ్రాస్తాము మరియు వాటి మధ్యలో మేము కన్సోల్ చేయబోతున్నాము. I యొక్క విలువ. ఇది తొమ్మిది వరకు లెక్కించే కౌంటర్ను సృష్టిస్తుంది.
మేము చూడబోతున్న చివరి రెండు ప్రోగ్రామింగ్ నిర్మాణాలు 'if' స్టేట్మెంట్లు మరియు 'అయితే' లూప్లు.
6.6 ప్రకటనలు ఉంటే
నిర్దిష్ట ప్రమాణాలు నెరవేరినట్లయితే 'if' స్టేట్మెంట్ చర్యను నిర్వహిస్తుంది. అవి నిర్మాణంలో 'ఫర్' లూప్ల మాదిరిగానే ఉంటాయి మరియు కింది విధంగా పని చేస్తాయి. మీ వద్ద 'చీజ్బర్గర్స్' అనే వేరియబుల్ ఉందని అనుకుందాం మరియు దానికి 'రుచికరమైన' విలువ ఉందో లేదో మీరు చూడాలనుకుంటున్నారు. అది జరిగితే, మీరు 'yum, cheeseburgers' ని స్క్రీన్కి లాగిన్ చేయాలనుకుంటున్నారు. అలా చేయడానికి మీరు ఇలాంటివి వ్రాస్తారు.
నేను 'if (cheeseburgers ==' రుచికరమైన ')' ఎలా వ్రాశానో గమనించండి. సమానత్వాన్ని తనిఖీ చేయడానికి మీరు డబుల్ లేదా ట్రిపుల్ ఈక్వల్స్ మరియు విలువను కేటాయించడానికి సింగిల్ ఈక్వల్లను ఉపయోగిస్తారు.
6.7 ఉచ్చులు ఉండగా
చివరగా, ఒక 'అయితే' లూప్ ఒక ప్రమాణాన్ని చేరుకున్నప్పుడు చర్యను అమలు చేస్తుంది. కాబట్టి, మీరు జుమ్బర్గర్లు సమానంగా రుచికరంగా ఉన్నప్పుడు 'యమ్, చీజ్బర్గర్స్' లాగ్ చేయాలనుకుంటున్నారని ఊహించుకోండి. దీన్ని చేయడానికి, మీరు ఈ క్రింది వాటిని వ్రాయాలి.
ఇది అనంతమైన లూప్లోకి ప్రవేశిస్తుందని పేర్కొనడం విలువ, మరియు మారే అవకాశం లేని విలువపై మీరు చర్యను నివారించాలి. ఇది మీ బ్రౌజర్ లాక్ అవ్వడానికి లేదా మీ కోడ్ పనిచేయకపోవడానికి కారణం కావచ్చు.
నేను ముందు చెప్పినట్లుగా, ఇది జావాస్క్రిప్ట్లోని ప్రోగ్రామింగ్ నిర్మాణాల గురించి చాలా క్లుప్త పరిచయం. భారీ విషయం అయినప్పటికీ, ఈ మనోహరమైన గురించి మరింత చదవమని మీరు ప్రోత్సహించబడ్డారు.
6.8 మిమ్మల్ని మీరు పరీక్షించుకోండి
- నేను 30 నుండి లెక్కించాలనుకుంటున్నాను. అది చేసే 'ఫర్' లూప్ రాయండి.
- నేను 'makeuseof' అనే వేరియబుల్ను సృష్టించాలనుకుంటున్నాను మరియు దానికి 'అద్భుతమైన' విలువను ఇవ్వాలనుకుంటున్నాను. అది ఎలా జరుగుతుంది?
- కాల్ చేసినప్పుడు 'MakeUseOf ఈజ్ అద్భుతం' అని ముద్రించే ఫంక్షన్ను నేను సృష్టించాలనుకుంటున్నాను. ఆ ఫంక్షన్ రాయండి.
మరింత చదవడానికి:
- జావాస్క్రిప్ట్: మంచి భాగాలు డగ్లస్ క్రాక్ఫోర్డ్ ద్వారా
- MDN జావాస్క్రిప్ట్ గైడ్
7. క్రియేటివ్ కాన్వాస్
కాన్వాస్ అనేది ఫ్లాష్ లేదా సిల్వర్లైట్ను ఉపయోగించకుండా చిత్రాలను గీయడానికి మరియు యానిమేషన్లను రూపొందించడానికి మిమ్మల్ని అనుమతించే ఒక చక్కని సాంకేతికత. హెయిర్డ్రైర్ సిమ్యులేటర్ మరియు వివిధ వీడియో గేమ్లతో సహా విచిత్రమైన మరియు అద్భుతమైన విషయాలను సృష్టించడానికి ప్రజలు దీనిని ఉపయోగించారు. ఇది అద్భుతమైన మరియు గుర్తించలేని పెద్ద సాంకేతికత, ఈ ట్యుటోరియల్లో, నేను మీకు క్లుప్తంగా పరిచయం చేయబోతున్నాను.
కాన్వాస్ ఆధునిక వెబ్ బ్రౌజర్లలో మాత్రమే పనిచేస్తుందని గమనించాలి. మీరు IE, Chrome లేదా Firefox యొక్క పాత వెర్షన్ను ఉపయోగిస్తుంటే, మీరు ఈ అధ్యాయాన్ని అనుసరించలేరు. అదే జరిగితే, నేను ఈ ట్యుటోరియల్ని సృష్టించిన వెబ్ బ్రౌజర్ అయిన గూగుల్ క్రోమ్ యొక్క తాజా వెర్షన్ను డౌన్లోడ్ చేసుకోవడాన్ని మీరు పరిగణించాలి.
7.1 కాన్వాస్తో ప్రారంభించడం
అన్నింటిలో మొదటిది, మీరు మీ వెబ్ బ్రౌజర్ని తెరవాలి మరియు codepen.io కి నావిగేట్ చేయాలి. కొత్త పెన్ను సృష్టించండి.
ఇప్పుడు, మేము కాన్వాస్ మూలకాన్ని ప్రకటించాల్సి ఉంటుంది. రెండు ప్రారంభ మరియు ముగింపు కాన్వాస్ ట్యాగ్లను సృష్టించండి. వాటిలో, మీరు దానిని మూడు లక్షణాలను పాస్ చేయాలి. ఇవి మీరు ఇస్తున్న ID తో పాటు కాన్వాస్ మూలకం యొక్క వెడల్పు మరియు ఎత్తు. మునుపటిలాగే మీరు కొన్ని వీడియోలను చొప్పించినప్పుడు, మీరు ఒక ఫాల్బ్యాక్ సందేశాన్ని చేర్చాలి.
ఇప్పుడు, మేము కొన్ని జావాస్క్రిప్ట్ కోడ్ని వ్రాయాలనుకుంటున్నాము, అది ఏదో తెరపైకి వస్తుంది. మేము ప్రాథమికంగా ప్రారంభించి సాధారణ ఎరుపు చతురస్రాన్ని సృష్టించబోతున్నాం.
మేము ఒక వేరియబుల్ను సృష్టించబోతున్నాము (నేను దీనిని 'డెమో' అని పిలిచాను), ఆపై కాన్వాస్ ఎలిమెంట్ను ఎంచుకుని, దానిని ఆ వేరియబుల్కు కేటాయించండి. అలా చేయడానికి, మీరు document.getElementByID () ని ఉపయోగించండి మరియు మీరు ఎంచుకోవాలనుకుంటున్న మూలకం యొక్క ID ని పాస్ చేయండి.
మా స్క్రిప్ట్లోని రెండవ పంక్తి 'సందర్భం' అని పిలువబడే మరొక వేరియబుల్ను సృష్టించి, ఆపై దానిపై 'demo.getContext (' 2d ')' అని పిలుస్తుంది. ఇది బ్రౌజర్కి మేము 2 డి ఇమేజ్పై పని చేస్తామని చెప్పింది, ఆపై స్క్రీన్కు గీయడానికి అవసరమైన ఫంక్షన్లను పాస్ చేసింది.
మూడవ మరియు నాల్గవ పంక్తులు వాస్తవానికి స్క్రీన్కు డ్రాయింగ్ చేసేవి. మూడవ పంక్తి ఒక దీర్ఘచతురస్రాన్ని ఎరుపు రంగుతో నింపుతుంది, అయితే నాల్గవ పంక్తి ఫిల్ రెక్ట్ అని పిలుస్తుంది, ఇది దానిని ఉంచుతుంది మరియు దాని పొడవు మరియు వెడల్పును నిర్వచిస్తుంది.
అది ఆకట్టుకునేది కాదు. మేక్ యూజ్ఆఫ్ అనే సరికొత్త లోగోను రూపొందించడానికి జావాస్క్రిప్ట్ మరియు కాన్వాస్ మాయాజాలం ఉపయోగించి మరింత అధునాతనమైన పనిని చేద్దాం.
7.2 ఆకారాలు మరియు వచనం
మన నాల్గవ పంక్తిని తొలగించి, దానిని ఎగువ ఎడమ మూలలో మన దీర్ఘచతురస్రాన్ని ఉంచే ఒకదానితో భర్తీ చేసి, దానిని మా కాన్వాస్ పొడవు కోసం విస్తరించండి.
మేము ఆకారం యొక్క x మరియు y అక్షాన్ని ఎక్కడ ఉంచాలనుకుంటున్నామో మొదటి రెండు వాదనలు నిర్వచిస్తాయి. ప్రస్తుతానికి ఈ రెండింటిని '0' కి సెట్ చేద్దాం. మూడవ వాదన ఆకారం యొక్క వెడల్పును సూచిస్తుంది. దానిని '200'కు సెట్ చేద్దాం, ఆపై నాల్గవ వాదనను' 50 'కి వదిలేద్దాం. మీరు ఇప్పుడు కొంచెం ఇలా కనిపించేదాన్ని కలిగి ఉండాలి.
ఇది గొప్ప ప్రారంభం, కానీ ఇది MakeUseOf గురించి అస్సలు పేర్కొనలేదు. కాబట్టి, మేము కొంత వచనాన్ని జోడించబోతున్నాము. 'Makeuseof' కలిగి ఉన్న వేరియబుల్ను సృష్టిద్దాం, మరియు మేము ఆ వేరియబుల్ను 'MakeUseOf' అని పిలుస్తాము.
మేము మరొక సందర్భ వేరియబుల్ను సృష్టించాలనుకుంటున్నాము. దీనిని 'సందర్భం 2' అని పిలవండి మరియు అది 2 డి అని నిర్ధారించుకోండి. మా టెక్స్ట్ను వ్రాయడానికి మేము దీనిని ఉపయోగిస్తాము.
మా టెక్స్ట్ నీలం రంగులో ఉండాలని మరియు మా ఎరుపు చతురస్రాన్ని అతివ్యాప్తి చేయాలని మేము కోరుకుంటున్నాము. కాబట్టి, మునుపటిలాగే, మేము దానికి 'బ్లూ' స్టైల్ని ఇవ్వాలనుకుంటున్నాము. ఇప్పుడు, మేము మా టెక్స్ట్ యొక్క లక్షణాలను ఎంచుకోబోతున్నాము. ఇది 20px పెద్దది, బోల్డ్ ఫార్మాట్ మరియు ఏరియల్ ఫాంట్ను ఉపయోగించాలని మేము కోరుకుంటున్నాము. మేము సందర్భం 2 లో ఫాంట్ అని పిలుస్తాము మరియు దానికి 'బోల్డ్ 20 పిఎక్స్ ఏరియల్' విలువను కేటాయిస్తాము.
ఈ టెక్స్ట్ మా మునుపటి రెడ్ బాక్స్ని అతివ్యాప్తి చేయాలని మేము కోరుకుంటున్నాము, మనం సందర్భం 2 లో 'textBaseLine' కి కాల్ చేసి, దానికి టాప్ విలువను ఇవ్వాలి. అది పూర్తయిన తర్వాత, మేము సందర్భం 2 లో 'ఫిల్ టెక్స్ట్' అని పిలుస్తాము మరియు మా టెక్స్ట్ మరియు x మరియు y కోఆర్డినేట్లను కలిగి ఉన్న వేరియబుల్ను పాస్ చేస్తాము. మా కోడ్ యొక్క తుది ఫలితం ఇలా ఉంటుంది.
కోడ్ ద్వారా ఉత్పత్తి చేయబడిన చిత్రం ఇలా కనిపిస్తుంది.
7.3 కాన్వాస్పై ఒక పదం
ఇది కాన్వాస్కి చాలా ప్రాథమిక పరిచయం అయినప్పటికీ, ఇది చాలా పెద్ద సాంకేతికత మరియు బూట్ చేయడానికి చాలా శక్తివంతమైనది అని మీరు అర్థం చేసుకోవాలి. ఈ గైడ్ కేవలం ఈ కొత్త టెక్నాలజీని ఉపయోగించి గ్రాఫిక్స్ తయారీకి ఒక పరిచయంగా ఉపయోగపడుతుంది.
కరెంటు పోయినప్పుడు చేయవలసిన పనులు
7.4 మిమ్మల్ని మీరు పరీక్షించుకోండి
- మీరు సృష్టించిన చిత్రానికి కింది నినాదాన్ని జోడించండి: 'అత్యుత్తమ టెక్ సైట్!'
- పది పునరావృతాల కోసం నడుస్తున్న 'ఫర్' లూప్ని సృష్టించండి. మీరు మీ డ్రాయింగ్ని ఒకేసారి పిక్సెల్ని కాన్వాస్కి తరలించగలరా అని చూడండి.
- ఫంక్షన్లో మీ డ్రాయింగ్ను చుట్టండి. మీరు కాల్ చేయకపోతే ఏమవుతుంది?
మరింత చదవడానికి:
8. తదుపరి ఎక్కడ?
HTML5 లో కనిపించే కొత్త టెక్నాలజీలకు నా అద్భుతమైన క్లుప్త గైడ్ చదివినందుకు ధన్యవాదాలు. HTML5 అనేది భవిష్యత్ సాంకేతికత అనేది కాదనలేనిది. ఇది చాలా టెక్నాలజీ ద్వారా స్వీకరించబడుతోంది, ఎందుకంటే ఇది వ్రాయడం సులభం మరియు కొలతకి మించిన శక్తివంతమైనది. ప్రజలు ఎప్పటికప్పుడు నమ్మశక్యం కాని పనులు చేస్తున్నారు, భవిష్యత్తులో మీరు అలాంటి వ్యక్తులలో ఒకరవుతారనడంలో నాకు సందేహం లేదు. అడవి మరియు అద్భుతమైన HTML5 ప్రపంచంలోకి మీ ప్రయాణంలో భాగమైనందుకు నేను గౌరవించబడ్డాను.
నేర్చుకోవడం కొనసాగించమని నేను మిమ్మల్ని వేడుకుంటున్నాను. కోడింగ్ చేస్తూ ఉండండి. స్థాయిని మెరుగుపరచడం మరియు మెరుగుపరచడం కొనసాగించండి మరియు అద్భుతమైన ఉత్పత్తులను సృష్టించడానికి ఈ చిన్న గైడ్లో ప్రవేశపెట్టిన సాంకేతికతలను మీరు ఏ సమయంలోనూ ఉపయోగించరు.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ ఇది విండోస్ 11 కి అప్గ్రేడ్ చేయడం విలువైనదేనా?Windows పునesరూపకల్పన చేయబడింది. విండోస్ 10 నుండి విండోస్ 11 కి మారడానికి మిమ్మల్ని ఒప్పించడానికి ఇది సరిపోతుందా?
తదుపరి చదవండి సంబంధిత అంశాలు- WordPress & వెబ్ అభివృద్ధి
- HTML5
- లాంగ్ఫార్మ్
- లాంగ్ఫార్మ్ గైడ్
మాథ్యూ హ్యూస్ ఇంగ్లాండ్లోని లివర్పూల్కు చెందిన సాఫ్ట్వేర్ డెవలపర్ మరియు రచయిత. అతను అరుదుగా అతని చేతిలో బలమైన కప్పు కాఫీ కప్పు లేకుండా కనిపిస్తాడు మరియు అతని మ్యాక్బుక్ ప్రో మరియు అతని కెమెరాను ఆరాధిస్తాడు. మీరు అతని బ్లాగ్ను http://www.matthewhughes.co.uk లో చదవవచ్చు మరియు @matthewhughes లో ట్విట్టర్లో అతన్ని అనుసరించవచ్చు.
మాథ్యూ హ్యూస్ నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి