வலை அபிவிருத்தி திட்டங்கள்: வலை பக்கங்களை எவ்வாறு உருவாக்குவது மற்றும் வடிவமைப்பது என்பதை அறிவீர்கள்

படி டெக்ரெப்ளிக் , வலை அபிவிருத்தி என்பது 2019 ஆம் ஆண்டில் வெப்பமான 10 தொழில்நுட்ப திறன்களில் ஒன்றாகும்.வலை உருவாக்குநர்களின் வேலைவாய்ப்பு 2016 முதல் 2026 வரை 15 சதவீதம் அதிகரிக்கும் என்று எதிர்பார்க்கப்படுகிறது, இது அனைத்து தொழில்களுக்கும் சராசரியை விட மிக வேகமாக இருக்கும். உங்கள் திறமைகளை மேம்படுத்தவும், உங்கள் வலை டெவலப்பர் வாழ்க்கையைத் தொடங்கவும் இது சரியான நேரம். இந்த கட்டுரையில், சிலவற்றை நாங்கள் விவாதிப்போம் பின்வரும் வரிசையில் சொந்தமாக பயன்பாடுகளை உருவாக்க உதவும் திட்டங்கள்:

• வலை அபிவிருத்தியில் தொழில்
• வலை அபிவிருத்தி திட்டங்கள்
  • பொறுப்பு அமைப்பு
  • டைனமிக் வலைப்பக்கம்
  • வினாடி வினா விளையாட்டு

வலை அபிவிருத்தியில் தொழில்

ஒரு வலை டெவலப்பர் என்பது ஒரு கிளையன்ட்-சர்வர் மாதிரியைப் பயன்படுத்தி உலகளாவிய வலை பயன்பாடுகளின் வளர்ச்சியில் நிபுணத்துவம் பெற்ற ஒரு புரோகிராமர். வலைத்தளங்களை வடிவமைத்தல், குறியீட்டு செய்தல் மற்றும் மாற்றியமைத்தல், தளவமைப்பு முதல் செயல்பாடு வரை மற்றும் வாடிக்கையாளரின் விவரக்குறிப்புகளின்படி அவை பொறுப்பாகும்.

ஒரு அட்டவணை டெவலப்பர் ஆவது எப்படி

கணினி புரோகிராமர்கள், மென்பொருள் பொறியாளர்கள் மற்றும் வலை-மையப்படுத்தப்பட்ட கிராஃபிக் வடிவமைப்பாளர்களாக பணிபுரியும் வலை அபிவிருத்தியில் பயிற்சி பெற்ற நிபுணர்களை நீங்கள் காணலாம். சில முக்கிய வேலை பாத்திரங்கள்:

• இனையதள வடிவமைப்பாளர் - வலை உருவாக்குநர்கள் ஒரு தளத்தின் தோற்றம் மற்றும் பயனர் அனுபவத்தை உருவாக்க நிரலாக்க மற்றும் தொழில்நுட்ப திறன்களைப் பயன்படுத்துகின்றனர். சராசரி சம்பளம் சுமார் ரூ. 480,694.
• கணிப்பொறி நிரலர் - கணினி புரோகிராமர்கள் குறியீட்டை எழுதி சோதனை செய்வதன் மூலம் மென்பொருளின் சரியான செயல்பாட்டை உருவாக்கி சரிசெய்கின்றனர். சராசரி சம்பள வரம்பு ரூ .232 கி முதல் ரூ .1 மீ வரை.
• வலை வடிவமைப்பாளர் - வலை வடிவமைப்பாளர்கள் ஒரு தளத்தின் முன் இறுதியில் வேலை செய்கிறார்கள் மற்றும் வெளிப்புற தோற்றம் மற்றும் பயனர் அனுபவத்தில் அக்கறை கொண்டுள்ளனர். இந்தியாவில் ஒரு வலை வடிவமைப்பாளரின் சராசரி சம்பளம் ரூ .281,410.
• கிராஃபிக் வலை வடிவமைப்பாளர் - கிராபிக்ஸ் மற்றும் பிற காட்சி ஊடகங்களை உருவாக்குவதன் மூலம் பயனர் அனுபவத்தை அல்லது பயன்பாட்டை மேம்படுத்த கிராஃபிக் டிசைனர் செயல்படுகிறது. சராசரி சம்பளம் ரூ .118 கி முதல் ரூ .619 கி.

தொழில் வளர்ச்சியைப் பற்றி இப்போது உங்களுக்குத் தெரியும், வலை வடிவமைப்பின் செயல்முறையை சிறப்பாகப் புரிந்துகொள்ளவும், உங்கள் சொந்த திட்டங்களை உருவாக்கவும் உதவும் சில வலை அபிவிருத்தி திட்டங்களைப் பார்ப்போம்.

வலை அபிவிருத்தி திட்டங்கள்

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

பொறுப்பு அமைப்பு

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

இந்த திட்டத்தில், ஒரு பதிலளிக்கக்கூடிய பக்கத்தின் அடிப்படை தளவமைப்பை உருவாக்குவோம் மற்றும் பல்நோக்கு வலைத்தளங்களை உருவாக்குவதற்கான வலை வளர்ச்சியில் இது எவ்வாறு செயல்படுகிறது. முதல் படி HTML தளவமைப்பை உருவாக்கி வலைப்பக்கத்தின் தலை பகுதியை வடிவமைப்பது.

* {பெட்டி-அளவிடுதல்: எல்லை-பெட்டி} .மெனு {மிதவை: இடது அகலம்: 20% உரை-சீரமை: மையம்} .மெனு ஒரு {பின்னணி-வண்ணம்: # டீபா 6 திணிப்பு: 8px விளிம்பு-மேல்: 7px காட்சி: தொகுதி அகலம்: 100 % color: black} .main {float: left width: 60% padding: 0 20px} .right {background-color: # f0b569 float: left width: 20% padding: 15px margin-top: 7px text-align: center} @ மீடியா மட்டும் திரை மற்றும் (அதிகபட்ச அகலம்: 620px) {/ * மொபைல் போன்களுக்கு: * / .மெனு, .மெயின், .right {அகலம்: 100%}} முந்தைய கேள்வி அடுத்த கேள்வி வினாடி வினாவைச் சமர்ப்பிக்கவும்

அடுத்து, வினாடி வினாவை உருவாக்குவதற்கும், முடிவுகளைக் காண்பிப்பதற்கும், அனைத்தையும் ஒன்றாக இணைப்பதற்கும் எங்களுக்கு ஒரு வழி தேவை. ஜாவாஸ்கிரிப்ட் உதவியுடன் எங்கள் செயல்பாடுகளை அமைப்பதன் மூலம் தொடங்கலாம்.

quiz.js

(செயல்பாடு () {const myQuestions = [{கேள்வி: 'எந்த கடல் உயிரினத்திற்கு மூன்று இதயங்கள் உள்ளன?', பதில்கள்: {a: 'ஆக்டோபஸ்', பி: 'நீல திமிங்கலம்', c: 'கடல் ஆமை' correct, correctAnswer: 'a '}, {கேள்வி:' பை என்பதற்கான இத்தாலிய சொல் என்ன? ', பதில்கள்: {a:' டோனட் ', பி:' பை கேக் ', சி:' பிஸ்ஸா 'correct, சரியான பதில்:' சி '}, {கேள்வி: 'குதிக்க முடியாத ஒரே பாலூட்டி எது?', பதில்கள்: {a: 'பாம்பு', பி: 'யானை', c: 'கங்காரு',}, சரியான பதில்: 'b' function] செயல்பாடு buildQuiz () {// ஒவ்வொரு கேள்விக்கும் HTML வெளியீடு const output = [] // ஐ சேமிக்க எங்களுக்கு ஒரு இடம் தேவை ... myQuestions.forEach ((currentQuestion, questionNumber) => {// பதில் தேர்வுகளின் பட்டியலை சேமிக்க விரும்புகிறோம் பதில்கள் = [] // மற்றும் கிடைக்கக்கூடிய ஒவ்வொரு பதிலுக்கும் ... for (currentQuestion.answers இல் உள்ள கடிதம்) {// ... ஒரு HTML ரேடியோ பொத்தானைச் சேர்க்கவும். புஷ் (`$ {கடிதம்}: {{currentQuestion.answers [கடிதம் ]} `)} // இந்த கேள்வியையும் அதன் பதில்களையும் வெளியீட்டு வெளியீட்டில் சேர்க்கவும். புஷ் (` $ {currentQuestion.question} $ {answer.join ('')} `)}) // இறுதியாக எங்கள் வெளியீட்டை இணைக்கவும் HTML இன் ஒரு சரத்தில் பட்டியலிட்டு அதை quizContainer.innerHTML = output.join ('')} function showResults () {// எங்கள் வினாடி வினா வினைச்சொல்லிலிருந்து விடை கொள்கலன்களை சேகரிக்கவும் பதில் கன்டெய்னர்கள் = வினாடி வினாக்கள் // பயனரின் பதில்களைக் கண்காணிக்கவும் ஒவ்வொரு கேள்விக்கும் numCorrect = 0 // ஐ அனுமதிக்கவும் ... myQuestions.forEach ((currentQuestion, questionNumber) => {// தேர்ந்தெடுக்கப்பட்ட பதிலைக் கண்டுபிடி const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: சரிபார்க்கப்பட்டது` const userAnswer = (answerContainer.querySelector (தேர்வாளர்) || {}). மதிப்பு const answerID = (answerContainer.querySelector (தேர்வாளர்) || {}). id const selector1 = `label [id = '$ {answerID}']` // பயனரின் பதிலைத் தேர்ந்தெடுக்கவும் var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // பதில் சரியாக இருந்தால் (userAnswer === currentQuestion.correctAnswer) { // சரியான பதில்களின் எண்ணிக்கையில் சேர்க்கவும் numCorrect ++ // பதில்களை பச்சை நிறமாக மாற்றவும் //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// பதில் என்றால் தவறு அல்லது வெற்று // வண்ண பதில்கள் சிவப்பு பதில் Elem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // மொத்த முடிவுகளிலிருந்து சரியான பதில்களின் எண்ணிக்கையைக் காண்பி Container.innerHTML = `{{சரியான எண்} of {{myQuestions.length}`} செயல்பாடு showSlide (n) {ஸ்லைடுகள் [currentSlide] .classList.remove ('a ctive-slide ') ஸ்லைடுகள் [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} else {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} function showNextSlide () {showSlide (currentSlide + 1)} function showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // காட்சி வினாடி வினா இப்போதே buildQuiz () const previousButton = document.getElementById ('முந்தைய') const nextButton = document.getElementById ('அடுத்தது ') const slides = document.querySelectorAll ('. slide ') currentSlide = 0 showSlide (0) // ஐ சமர்ப்பிக்கவும், முடிவுகளைக் காண்பிக்கவும் submitButton.addEventListener (' கிளிக் ', showResult s) previousButton.addEventListener ('கிளிக்', showPreviousSlide) nextButton.addEventListener ('கிளிக்', showNextSlide)}) ()

இறுதியாக, இந்த விளையாட்டுக்கு வெவ்வேறு பாணிகளைச் சேர்க்க CSS ஐப் பயன்படுத்தலாம்.

வீசுதலுக்கும் வீசுதலுக்கும் உள்ள வேறுபாடு

quiz.css

url இறக்குமதி url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) உடல் {font-size: 30px font-family: 'Work Sans', sans-serif color: rgb (24, 23 , 23) எழுத்துரு-எடை: 300 உரை-சீரமை: மைய பின்னணி-வண்ணம்: # f8e8f2} h1 {எழுத்துரு-எடை: 300 விளிம்பு: 0px திணிப்பு: 10px எழுத்துரு அளவு: 40px பின்னணி-வண்ணம்: rgb (9, 107, 102) வண்ணம்: #fff}. கேள்வி {எழுத்துரு-அளவு: 40px விளிம்பு-கீழ்: 10px} .ஆன்வெர்ஸ் {விளிம்பு-கீழ்: 20px உரை-சீரமை: இடது காட்சி: இன்லைன்-தொகுதி} .ஆன்வெர்ஸ் லேபிள் {காட்சி: தொகுதி விளிம்பு-கீழ்: 10px } பொத்தான் {எழுத்துரு-குடும்பம்: 'பணி சான்ஸ்', சான்ஸ்-செரிஃப் எழுத்துரு அளவு: 22px பின்னணி-வண்ணம்: rgb (218, 167, 57) நிறம்: #fff எல்லை: 0px எல்லை-ஆரம்: 3px திணிப்பு: 20px கர்சர்: சுட்டிக்காட்டி விளிம்பு-கீழ்: 20px} பொத்தான்: மிதவை {பின்னணி-வண்ணம்: # 38 அ} .சாய்வு {நிலை: முழுமையான இடது: 0px மேல்: 0px அகலம்: 100% z- குறியீட்டு: 1 ஒளிபுகாநிலை: 0 மாற்றம்: ஒளிபுகா 0.5s} .செயல்பாடு- ஸ்லைடு {ஒளிபுகாநிலை: 1 z- குறியீட்டு: 2} .க்விஸ்-கொள்கலன் {நிலை: உறவினர் உயரம்: 200px விளிம்பு-மேல்: 40px}

வெளியீடு:

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

ஜாவாவில் பிட்வைஸ் ஆபரேட்டர்களை எவ்வாறு பயன்படுத்துவது

ஜாவாஸ்கிரிப்ட் சுழல்கள் பற்றி இப்போது உங்களுக்குத் தெரியும், பாருங்கள் வழங்கியவர் எடுரேகா. HTML5, CSS3, Twitter பூட்ஸ்டார்ப் 3, jQuery மற்றும் Google API களைப் பயன்படுத்தி சுவாரஸ்யமான வலைத்தளங்களை எவ்வாறு உருவாக்குவது என்பதை அறிய வலை மேம்பாட்டு சான்றிதழ் பயிற்சி உங்களுக்கு உதவும்.

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'வலை அபிவிருத்தி திட்டங்கள்' இன் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.