విషయము
- 01. లైట్ హౌస్
- 02. పాలిమర్
- 03. API లు ఎక్స్ప్లోరర్
- 04. అల్లాడు
- 05. గూగుల్ గిట్హబ్
- 06. తోలుబొమ్మ
- 07. వర్క్బాక్స్
- 08. కోడ్ల్యాబ్లు
- 09. రంగు సాధనం
- 10. డిజైన్ స్ప్రింట్స్
- 11. ప్రజలు + AI గైడ్బుక్
- 12. గూగుల్ అసిస్టెంట్
- 13. పేజ్స్పీడ్ అంతర్దృష్టులు
- 14. Google లో AMP
- 15. Google DevTools
- 16. మెటీరియల్ డిజైన్
వెబ్లో పనిచేయడం అంటే సాధారణంగా మీరు Google తో కొంత ఆకారం లేదా రూపంలో పని చేస్తున్నారని అర్థం. గూగుల్ క్రోమ్ పోటీకి ముందు వీధులుగా ఉన్నందున, డిజైనర్లు మరియు డెవలపర్లు వారి ప్రాజెక్ట్ బ్రౌజర్తో ఎలా పని చేస్తుందో ఆలోచించాలి. ఇది ఎలా కనిపిస్తుంది? ఇది ఏ సాంకేతిక పరిజ్ఞానాలకు మద్దతు ఇస్తుంది, ఇది ఎంత సురక్షితం మరియు అది ఎలా పని చేస్తుంది?
అదృష్టవశాత్తూ, ఏదైనా సైట్ లేదా అనువర్తనం ఉత్తమంగా ఉంటుందని నిర్ధారించడానికి Chrome సాధనాలను అందిస్తుంది. వెబ్ పేజీలో అంతర్దృష్టిని పొందడానికి DevTools డిజైనర్లు మరియు డెవలపర్లను అనుమతిస్తుంది: మీరు DOM ను మార్చవచ్చు, CSS ను తనిఖీ చేయవచ్చు, లైవ్ ఎడిటింగ్తో డిజైన్లపై ప్రయోగం చేయవచ్చు, జావాస్క్రిప్ట్ను డీబగ్ చేయవచ్చు మరియు పనితీరును తనిఖీ చేయవచ్చు. (ఈ Google వెబ్ సాధనాలను ఎలా ఉపయోగించాలో ఇక్కడ మరింత చూడండి, మరియు మీరు మొదటి నుండి మొదలుపెడితే మా అగ్ర వెబ్ బిల్డర్ల జాబితాను కూడా చూడండి).
కానీ గూగుల్ బ్రౌజర్ కంటే ఎక్కువ అందిస్తుంది. ఇది మీ డిజైన్ మరియు అభివృద్ధి జీవితంలో దాదాపు ప్రతి అంశానికి సహాయపడే సాధనాలు మరియు వనరులను కలిగి ఉంది. పనితీరును ఎలా మెరుగుపరచాలో తెలుసుకోవాలనుకుంటున్నారా? సహాయం చేయడానికి లైట్హౌస్ ఇక్కడ ఉంది. మెరుగైన పనితీరు గల మొబైల్ సైట్లను నిర్మించాలనుకుంటున్నారా? అప్పుడు AMP కి హలో చెప్పండి. మీరు అందమైన పిడబ్ల్యుఎలను నిర్మించాలని చూస్తున్నారా? అప్పుడు ఫ్లట్టర్, మెటీరియల్ డిజైన్ మరియు వర్క్బాక్స్ అడుగు పెట్టడానికి సిద్ధంగా ఉన్నాయి.
గూగుల్ సాధనాలు, వనరులు, లైబ్రరీలు మరియు ఫ్రేమ్వర్క్లను ఉపయోగించడం యొక్క అందం ఏమిటంటే, అవి క్రోమ్ బ్రౌజర్తో బాగా పనిచేస్తాయని మీకు తెలుసు - గ్రహం మీద అత్యంత ప్రాచుర్యం పొందిన బ్రౌజర్. మరిన్ని సాధనాల కోసం, మా వెబ్ డిజైన్ సాధనాల రౌండప్ చూడండి.
01. లైట్ హౌస్
సైట్ విజయవంతం కావడానికి పనితీరు ఒక ముఖ్య అంశం మరియు వెబ్ పేజీల నాణ్యతను మెరుగుపరచడానికి లైట్హౌస్ గూగుల్ యొక్క సాధనం (సరైన వెబ్ హోస్టింగ్ సేవ కూడా సహాయపడుతుంది). కాబట్టి మీరు లైట్హౌస్ను ఎలా ఉపయోగిస్తున్నారు మరియు అది ఏమి చేయగలదు? దాని సరళమైన రూపంలో, మీరు ఆడిట్ ట్యాబ్ నుండి లైట్హౌస్ను అమలు చేయవచ్చు మరియు సూచించిన మెరుగుదలలతో తుది నివేదికను రూపొందించడానికి పనితీరు, ప్రాప్యత మరియు SEO కోసం టిక్ బాక్స్లతో పాటు డెస్క్టాప్ లేదా మొబైల్తో సహా ఎంపికల ఎంపికను ఎంచుకోవచ్చు.
02. పాలిమర్
పాలిమర్ వెబ్ భాగాలతో చేసిన పనికి ప్రసిద్ది చెందింది, అయితే ఈ ప్రాజెక్ట్ ఇప్పుడు గ్రంథాలయాలు, సాధనాలు మరియు ప్రమాణాల సేకరణను స్వీకరించడానికి దాని కచేరీలను విస్తరించింది. ఏమి చేర్చబడింది? లిట్ ఎలిమెంట్ అనేది వెబ్ భాగాలను నిర్వచించడాన్ని సులభతరం చేసే ఎడిటర్, అయితే లిట్-హెచ్ఎమ్ఎల్ ఒక HTML టెంప్లేటింగ్ లైబ్రరీ, ఇది వినియోగదారులను JS లో తదుపరి తరం HTML టెంప్లేట్లను వ్రాయడానికి వీలు కల్పిస్తుంది. అదనంగా, మీరు PWA స్టార్టర్ కిట్, అసలు పాలిమర్ లైబ్రరీ మరియు వెబ్ భాగాల సెట్లను కూడా కనుగొంటారు.
03. API లు ఎక్స్ప్లోరర్
గూగుల్ డెవలపర్లకు విస్తారమైన API ల లైబ్రరీని కలిగి ఉంది, కానీ మీకు కావలసినదాన్ని కనుగొనడం అంత తేలికైన పని కాదు. గూగుల్ యొక్క API లు ఎక్స్ప్లోరర్ సహాయం అందించడానికి ఇక్కడే అడుగులు వేస్తుంది. స్క్రోల్ చేయగల పొడవైన జాబితా ఉంది, కానీ, త్వరగా యాక్సెస్ కోసం, API జాబితాను ఫిల్టర్ చేయడానికి శోధన పెట్టె ఉంది. ప్రతి ఎంట్రీ API ని ఎలా ఉపయోగించాలో మరిన్ని వివరాలతో రిఫరెన్స్ పేజీకి లింక్ చేస్తుంది.
04. అల్లాడు
మీరు ఒకే కోడ్బేస్ నుండి మొబైల్, వెబ్ మరియు డెస్క్టాప్ కోసం మంచి అనువర్తనాలను రూపొందించాలని చూస్తున్నట్లయితే, అల్లాడు మీ కోసం కావచ్చు. ఫ్లట్టర్తో పనిచేయడానికి మరియు నిర్మించడానికి సైట్ పూర్తి సూచన. ఏమి చేయాలో క్లూ రాలేదా? డాక్స్ సంస్థాపన నుండి సృష్టికి వినియోగదారుని తీసుకువెళతాయి, నమూనాలు మరియు ట్యుటోరియల్స్ పుష్కలంగా సహాయపడతాయి.
05. గూగుల్ గిట్హబ్
చాలా మందికి తెలిసినట్లుగా, కోడ్ మరియు ఫైళ్ళను నిల్వ చేయడానికి మరియు పంచుకునేందుకు హోస్టింగ్ ప్లాట్ఫాం / రిపోజిటరీ గిట్హబ్. సంతోషంగా గూగుల్ ప్లాట్ఫామ్లో 260 కి పైగా రిపోజిటరీలతో దాని స్వంత స్థానాన్ని కలిగి ఉంది. మీ శోధన సమయాన్ని తగ్గించడానికి ఫిల్టర్ను ఉపయోగించండి మరియు మీరు ఆడటానికి లేదా సహకరించాలనుకుంటున్న రిపోజిటరీకి దగ్గరగా ఉండండి.
06. తోలుబొమ్మ
నోడ్లో నిర్మించబడిన, పప్పెట్టీర్ హై-లెవల్ API ని అందిస్తుంది, ఇది హెడ్లెస్ క్రోమ్ను యాక్సెస్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది - UI లేకుండా సమర్థవంతంగా Chrome, డెవలపర్లు కమాండ్ లైన్ ద్వారా నియంత్రించవచ్చు. కాబట్టి మీరు తోలుబొమ్మతో ఏమి చేయవచ్చు? స్క్రీన్షాట్లు మరియు పేజీల పిడిఎఫ్లను రూపొందించడానికి, ఫారమ్ సమర్పణను ఆటోమేట్ చేయడానికి మరియు స్వయంచాలక పరీక్షా వాతావరణాన్ని సృష్టించడానికి కొన్ని ఎంపికలు అందుబాటులో ఉన్నాయి.
07. వర్క్బాక్స్
మీరు పిడబ్ల్యుఎను నిర్మించాలని చూస్తున్నట్లయితే ఇది గొప్ప ప్రారంభ స్థానం. వెబ్ అనువర్తనాలకు ఆఫ్లైన్ మద్దతును జోడించడానికి వర్క్బాక్స్ జావాస్క్రిప్ట్ లైబ్రరీల సేకరణను అందిస్తుంది. లోతైన మార్గదర్శకాల ఎంపిక సేవా వర్కర్ ఫైల్, రూట్ రిక్వెస్ట్లు, ప్లగిన్లను ఉపయోగించడం మరియు వర్క్బాక్స్తో బండ్లర్లను ఎలా ఉపయోగించాలో ప్రదర్శిస్తుంది. మరియు తనిఖీ చేయడానికి ఉదాహరణ కాషింగ్ వ్యూహాల సమితి కూడా ఉంది.
08. కోడ్ల్యాబ్లు
Google ఉత్పత్తికి ఆచరణాత్మక మార్గదర్శకత్వం అవసరమా? కోడ్ల్యాబ్స్ “గైడెడ్, ట్యుటోరియల్, చేతుల మీదుగా కోడింగ్ అనుభవాన్ని” అందిస్తుంది. సైట్ చక్కగా వర్గాలు మరియు సంఘటనలుగా విభజించబడింది, మీకు కావలసినదాన్ని త్వరగా మరియు సులభంగా కనుగొనవచ్చు. ఇందులో అనలిటిక్స్, ఆండ్రాయిడ్, అసిస్టెంట్, ఆగ్మెంటెడ్ రియాలిటీ, ఫ్లట్టర్, జి సూట్, సెర్చ్, టెన్సార్ ఫ్లో మరియు వర్చువల్ రియాలిటీ ఉన్నాయి. ఒక ఎంపికను ఎంచుకోండి మరియు మీరు చిన్న అనువర్తనాలను రూపొందించడానికి అవసరమైన కోడ్ మరియు దిశలను పొందండి.
09. రంగు సాధనం
రంగు సాధనం అనేది ప్రాప్యతను తనిఖీ చేయడంతో పాటు పాలెట్ను సృష్టించడానికి, భాగస్వామ్యం చేయడానికి మరియు వర్తింపజేయడానికి మిమ్మల్ని అనుమతించే సూటి సాధనం. మెటీరియల్ పాలెట్ నుండి వినియోగదారులు ముందే నిర్వచించిన పాలెట్ను ఎంచుకోవచ్చు. రంగును ఎంచుకుని, ఆపై దానిని ప్రాధమిక రంగు పథకానికి వర్తింపజేయండి, ద్వితీయ ఎంపికకు మారండి మరియు మళ్లీ ఎంచుకోండి. చివరగా, రెండు పథకాలకు వచన రంగులను ఎంచుకోండి. ప్రత్యామ్నాయంగా, మీ రంగులను ఎంచుకోవడానికి అనుకూలానికి మారండి. చివరకు, పాలెట్ను ఎగుమతి చేసే ముందు అన్నింటినీ తనిఖీ చేయడానికి ప్రాప్యతకి మారండి.
10. డిజైన్ స్ప్రింట్స్
డిజైన్ స్ప్రింట్ కిట్ అనేది డిజైన్ స్ప్రింట్లలో పాల్గొనడం లేదా అమలు చేయడం నేర్చుకునే వారికి. ఇది ఫస్ట్-టైమర్స్ నుండి అనుభవజ్ఞుడైన స్ప్రింట్ ఫెసిలిటేటర్స్ వరకు అన్ని జ్ఞాన స్థావరాలను కవర్ చేస్తుంది. సంక్షిప్త రచనలు, డేటా మరియు పరిశోధనలను సేకరించడం, అలాగే పోస్ట్-స్ప్రింట్ ఏమి చేయాలో సహా పద్దతి గురించి తెలుసుకోండి లేదా ప్రణాళిక దశకు నేరుగా వెళ్లండి. ఉపకరణాలు, టెంప్లేట్లు, వంటకాలు మరియు మీ స్వంత పద్ధతిని సమర్పించే ఎంపిక వంటి వనరులను కూడా కలిగి ఉంటుంది. అలాగే, వనరులను నిల్వ చేయడానికి మరియు పంచుకోవడానికి మీకు ఎక్కడో అవసరం కాబట్టి మీ క్లౌడ్ నిల్వ ఎంపిక సరైనదని నిర్ధారించుకోండి.
11. ప్రజలు + AI గైడ్బుక్
ఈ గైడ్ గూగుల్ వద్ద పీపుల్ + AI రీసెర్చ్ చొరవ యొక్క పని మరియు మానవ కేంద్రీకృత AI ఉత్పత్తులను నిర్మించాలనుకునే వారికి సహాయం అందించడానికి కనిపిస్తుంది. సమగ్ర మార్గదర్శిని వినియోగదారు అవసరాలు, డేటా సేకరణ మరియు మూల్యాంకనం, మానసిక నమూనాలు, నమ్మకం, అభిప్రాయం మరియు మనోహరమైన వైఫల్యం గురించి ఆరు అధ్యాయాలుగా విభజించబడింది. ప్రతి అధ్యాయంలో వ్యాయామాలు, వర్క్షీట్లు మరియు అది జరగడానికి అవసరమైన సాధనాలు మరియు వనరులు ఉంటాయి.
12. గూగుల్ అసిస్టెంట్
ఇది Google అసిస్టెంట్ యొక్క డెవలపర్ ప్లాట్ఫాం, మీ కంటెంట్ మరియు సేవలను Google అసిస్టెంట్తో ఎలా సమగ్రపరచాలో మార్గదర్శినిని అందిస్తుంది. ఇది మీ మొబైల్ అనువర్తనాన్ని ఎలా విస్తరించాలో, శోధన మరియు సహాయకుల కోసం కంటెంట్ను గొప్ప మార్గాల్లో ప్రదర్శించడం, ఇంటి చుట్టూ ఉన్న లైట్లు, కాఫీ యంత్రాలు మరియు ఇతర పరికరాలను నియంత్రించడం మరియు స్మార్ట్ స్పీకర్లు, డిస్ప్లేలు మరియు ఫోన్ల కోసం వాయిస్ మరియు విజువల్ అనుభవాలను ఎలా నిర్మించాలో ఇది మీకు చూపుతుంది.
13. పేజ్స్పీడ్ అంతర్దృష్టులు
పేజ్స్పీడ్ అంతర్దృష్టులు వెబ్ కంటెంట్ను విశ్లేషిస్తాయి మరియు తరువాత దాన్ని వేగంగా లోడ్ చేయాలనే సూచనలను అందిస్తాయి. URL ను జోడించి, విశ్లేషించు బటన్ను నొక్కండి మరియు మేజిక్ జరిగే వరకు వేచి ఉండండి. పేజ్స్పీడ్ API ఎలా పనిచేస్తుందో మరియు దాన్ని ఎలా ఉపయోగించడం ప్రారంభించాలో మంచి అవగాహన పొందడానికి డాక్స్ తనిఖీ చేయండి.
14. Google లో AMP
AMP అనేది వేగంగా లోడ్ అవుతున్న మొబైల్ పేజీలను సృష్టించడానికి గూగుల్ యొక్క సాధనం, ఇది శోధన ర్యాంకింగ్స్లో అగ్రస్థానంలో ఉంటుంది (ఆశాజనక). వేగవంతమైన, వినియోగదారు-మొదటి సైట్లను ఎలా సృష్టించాలో తెలుసుకోండి, గూగుల్ ఉత్పత్తుల్లో AMP ని ఏకీకృతం చేయండి, AMP పేజీలను వేగవంతం చేయడానికి Google AMP కాష్ను ఉపయోగించండి మరియు ఇతర Google ఉత్పత్తులతో AMP పేజీలను డబ్బు ఆర్జించండి.
15. Google DevTools
ప్రతి డిజైనర్ మరియు డెవలపర్కు తెలుసు (లేదా కనీసం తెలుసుకోవాలి) Chrome నేరుగా బ్రౌజర్లో నిర్మించిన సాధనాల సమితితో వస్తుంది. ఒక పేజీని రూపొందించే అంశాలను పరిశీలించడానికి, CSS ను తనిఖీ చేయడానికి, ఫ్లైలో పేజీలను సవరించడానికి మరియు మరెన్నో చేయడానికి Chrome యొక్క DevTools అనువైనవి.
ఎలిమెంట్స్ ట్యాబ్ దేవ్టూల్స్కు పరిచయం. ఇది ఎంచుకున్న పేజీని రూపొందించే HTML కోడ్ను ప్రదర్శిస్తుంది. ఎంచుకున్న పేజీ నుండి ప్రతి డివి లేదా ట్యాగ్ యొక్క లక్షణాలపై అంతర్దృష్టిని పొందండి మరియు ప్రత్యక్ష సవరణను ప్రారంభించండి. డిజైన్లతో ప్రయోగాలు చేయడానికి ఇది సరైనది. లేఅవుట్ను తనిఖీ చేయండి - మీరు ఫ్లెక్స్బాక్స్ లేదా గ్రిడ్ ఉపయోగిస్తున్నారా - మరియు ఉదాహరణలతో సంబంధిత ఫాంట్లను చూడండి మరియు యానిమేషన్లను పరిశీలించండి.
మరొకచోట, మీరు CSS ని చూడవచ్చు మరియు మార్చవచ్చు. ఎలిమెంట్స్ ప్యానెల్లోని స్టైల్స్ ట్యాబ్ DOM ట్రీలో ప్రస్తుతం ఎంచుకున్న మూలకానికి వర్తించే CSS నియమాలను జాబితా చేస్తుంది. డిజైన్లతో ప్రయోగాలు చేయడానికి లక్షణాలను ఆన్ మరియు ఆఫ్ చేయండి (లేదా క్రొత్త విలువలను జోడించండి). ప్రత్యక్ష రూపకల్పనలో ఏవైనా మార్పులను వర్తించే ముందు ప్రతిదీ expected హించిన విధంగా పనిచేస్తుందని నిర్ధారించడానికి ఇది సరైన సాధనం.
మీరు జావాస్క్రిప్ట్ను డీబగ్ చేయవచ్చు, వెబ్సైట్ వేగాన్ని ఆప్టిమైజ్ చేయవచ్చు మరియు నెట్వర్క్ వేగాన్ని తనిఖీ చేయవచ్చు. మీ వర్క్ఫ్లోను వేగవంతం చేయడానికి మీరు ఉపయోగించగల శీఘ్ర చిట్కా ఇక్కడ ఉంది. సోర్సెస్ ట్యాబ్కు వెళ్ళండి, క్రొత్త స్నిప్పెట్ క్లిక్ చేసి, తరచుగా ఉపయోగించే కోడ్ను జోడించండి. కోడ్ స్నిప్పెట్ పేరు పెట్టండి మరియు సేవ్ చేయండి. అవసరమైన విధంగా రిపీట్ చేయండి. ఇప్పుడు మీరు ఈ కోడ్ స్నిప్పెట్ను మళ్ళీ వ్రాయడానికి బదులుగా పట్టుకోవచ్చు.
ప్రతి మంచి బ్రౌజర్ మాదిరిగా, Chrome నిరంతరం అభివృద్ధి చెందుతుంది మరియు ప్రతి కొత్త విడుదల కొత్త లక్షణాలను తెస్తుంది. Chrome స్థితి ప్లాట్ఫారమ్లో ఏమి జరుగుతుందో తెలుసుకోండి
16. మెటీరియల్ డిజైన్
అభివృద్ధిని గూగుల్ ఇష్టపడే బిడ్డగా చూడవచ్చు కాని, మీరు ఏమి చేస్తున్నా, సృష్టించినా, నిర్మించినా అది చక్కగా కనిపించాలి మరియు వినియోగదారు దానిని ఉపయోగించాలనుకునే అనుభవాన్ని ఇవ్వాలి. మెటీరియల్ అనేది గూగుల్ స్టేబుల్కు ఇటీవలి చేరిక, అయితే ఇది డిజైన్ సిస్టమ్, ఇది కీలకమైన డిజైన్ కిట్లోకి పరిపక్వం చెందింది.
ఏదైనా మంచి డిజైన్ సిస్టమ్ మాదిరిగా, ఇది దాని స్వంత మార్గదర్శకాలను కలిగి ఉంది, మీరు మరింత ఉత్తేజకరమైన విషయాలలో అడుగు పెట్టడానికి ముందు చూడాలి. విభిన్న అంశాలను ఎలా ఉపయోగించాలో, మెటీరియల్ థీమింగ్ అంటే ఏమిటి, థీమ్ను ఎలా అమలు చేయాలి మరియు ప్రాప్యతతో సహా వినియోగ మార్గదర్శకాలను పొందండి. మరొకచోట, మెటీరియల్ ఫౌండేషన్పై అంతర్దృష్టి ఉంది, దీనిలో లేఅవుట్, నావిగేషన్, కలర్, టైపోగ్రఫీ, సౌండ్, ఐకానోగ్రఫీ, మోషన్ మరియు ఇంటరాక్షన్ వంటి డిజైన్ యొక్క ముఖ్య రంగాలు ఉన్నాయి. ప్రతి వర్గం దాని చేయవలసినవి మరియు చేయకూడని వాటిని వెల్లడిస్తుంది మరియు మీరు ఎక్కడ జాగ్రత్త వహించాలి. ఏమి ఆశించాలో ఒక ఆలోచన ఇవ్వడానికి, లేఅవుట్ వర్గం అవగాహన లేఅవుట్, పిక్సెల్ సాంద్రత, నిలువు వరుసలు, గట్టర్లు మరియు మార్జిన్లు, బ్రేక్పాయింట్లు, యుఐ ప్రాంతాలు మరియు పేరు పెట్టడానికి అంతరం పద్ధతులతో సహా ప్రతిస్పందించే లేఅవుట్తో ఎలా పని చేయాలి అనే విభాగాలను అందిస్తుంది.
డిజైన్ విభాగానికి మించి భాగాలు, ఇది డిజైన్ను రూపొందించడానికి అవసరమైన భౌతిక బిల్డింగ్ బ్లాక్లను అందిస్తుంది. ఇక్కడ ఏమి చేర్చబడింది? బటన్లు, బ్యానర్లు, కార్డులు, డైలాగులు, డివైడర్లు, జాబితాలు, మెనూలు, పురోగతి సూచికలు, స్లైడర్లు, స్నాక్బార్లు (ఇవి స్క్రీన్ దిగువన ఉన్న అనువర్తన ప్రక్రియల గురించి సంక్షిప్త సందేశాలు), ట్యాబ్లు, టెక్స్ట్ ఫీల్డ్లు మరియు టూల్టిప్లు. నిస్సందేహంగా భాగాల సమగ్ర సేకరణ.
ఆండ్రాయిడ్, iOS, వెబ్ మరియు అల్లాడు - వివిధ ప్లాట్ఫారమ్ల కోసం ఎలా నిర్మించాలో వివరాలు మరియు ట్యుటోరియల్లతో డెవలపర్లను మరచిపోలేదు. చివరకు, మీరు ఎంచుకున్న రూపకల్పనలో సహాయపడటానికి వనరుల హోస్ట్కు అంకితమైన పేజీ ఉంది.
ఈ వ్యాసం మొదట నెట్ మ్యాగజైన్లో వచ్చింది. ఇష్యూ 326 కొనండి.