De acuerdo a TechRepublic , el desarrollo web es una de las 10 habilidades tecnológicas más novedosas en 2019.Se proyecta que el empleo de los desarrolladores web crecerá un 15 por ciento entre 2016 y 2026, mucho más rápido que el promedio de todas las ocupaciones. Este es el momento adecuado para mejorar sus habilidades y comenzar su carrera de desarrollador web. En este artículo, discutiremos algunos de los Proyectos que le ayudarán a crear aplicaciones por su cuenta en la siguiente secuencia:
Carrera en desarrollo web
Un desarrollador web es un programador que se especializa en el desarrollo de aplicaciones World Wide Web utilizando un modelo cliente-servidor. También son responsables de diseñar, codificar y modificar sitios web, desde el diseño hasta la función y de acuerdo con las especificaciones del cliente.
Puede encontrar profesionales capacitados en desarrollo web que trabajen como programadores informáticos, ingenieros de software e incluso diseñadores gráficos centrados en la web. Algunas de las funciones laborales clave son:
- Desarrollador web - Los desarrolladores web utilizan habilidades de programación y tecnología para construir la apariencia y la experiencia del usuario de un sitio. El salario promedio es de alrededor de Rs. 480.694.
- Programador - Los programadores informáticos desarrollan y ajustan la función adecuada del software escribiendo y probando código. El rango de salario promedio es de Rs 232k a Rs 1 millón.
- Diseñador web - Los diseñadores web trabajan en la interfaz de un sitio y se preocupan por la apariencia externa y la experiencia del usuario. El salario medio de un diseñador web en la India es de 281410 rupias.
- Diseñador gráfico web - Un diseñador gráfico trabaja para mejorar la experiencia del usuario o la aplicación mediante la creación de gráficos y otros medios visuales. El salario promedio varía de Rs 118k a Rs 619k.
Ahora que conoce el crecimiento profesional, echemos un vistazo a algunos de los proyectos de desarrollo web que le ayudarán a comprender mejor el proceso de diseño web y también a crear sus propios proyectos.
instrucción goto c ++
Proyectos de desarrollo web
Los proyectos de desarrollo web se dividen en tres niveles: Básico, Intermedio, y Avanzar . Discutiremos los diferentes niveles de proyectos y cómo funciona el código.Esto le ayudará a comprender mejor el proceso de desarrollo web y le dará la idea de crear sus propios sitios web utilizando diferentes lenguajes de programación. Entonces, comencemos con el Proyecto de nivel básico.
Disposición Responsive
Una de las funciones principales de un desarrollador front-end es comprender los principios del diseño receptivo y cómo implementarlos en el lado de la codificación.
En este proyecto, crearemos un diseño básico de una sola página receptiva y cómo funciona en el desarrollo web para construir sitios web multipropósito. El primer paso es crear el diseño HTML y diseñar la parte principal de la página web.
* {box-sizing: border-box} .menu {float: left width: 20% text-align: center} .menu a {background-color: # deeba6 padding: 8px margin-top: 7px display: block width: 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} @media solo pantalla y (ancho máximo: 620px) {/ * Para teléfonos móviles: * / .menu, .main, .right {ancho: 100%}} Pregunta anterior Siguiente pregunta Enviar cuestionarioA continuación, necesitaremos una forma de crear un cuestionario, mostrar los resultados y ponerlo todo junto. Podemos comenzar por diseñar nuestras funciones con la ayuda de JavaScript.
quiz.js
(función () {const myQuestions = [{pregunta: '¿Qué criatura marina tiene tres corazones?', responde: {a: 'Pulpo', b: 'Ballena azul', c: 'Tortuga marina'}, respuesta correcta: 'a '}, {pregunta:' ¿Cuál es la palabra italiana para pastel? ', responde: {a:' Donut ', b:' Pastel de pastel ', c:' Pizza '}, correctAnswer:' c '}, {pregunta: '¿Cuál es el único mamífero que no puede saltar?', Responde: {a: 'Serpiente', b: 'Elefante', c: 'Canguro',}, correctAnswer: 'b'}] function buildQuiz () {// necesitaremos un lugar para almacenar la salida HTML const output = [] // para cada pregunta ... myQuestions.forEach ((currentQuestion, questionNumber) => {// queremos almacenar la lista de opciones de respuesta const answers = [] // y para cada respuesta disponible ... para (letter in currentQuestion.answers) {// ... agregue un botón de opción HTML answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // agregue esta pregunta y sus respuestas a la salida output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // finalmente combine nuestro outpu t lista en una cadena de HTML y colócala en la página quizContainer.innerHTML = output.join ('')} function showResults () {// recopila contenedores de respuestas de nuestro cuestionario const answerContainers = quizContainer.querySelectorAll ('. answers') // realizar un seguimiento de las respuestas del usuario let numCorrect = 0 // para cada pregunta ... myQuestions.forEach ((currentQuestion, questionNumber) => {// encontrar la respuesta seleccionada const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: comprobado` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Seleccione la respuesta del usuario var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // si la respuesta es correcta if (userAnswer === currentQuestion.correctAnswer) { // agregar al número de respuestas correctas numCorrect ++ // colorear las respuestas en verde //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// if answer es incorrecto o está en blanco // colorea las respuestas en rojo answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // muestra el número de respuestas correctas del total resultsContainer.innerHTML = `$ {numCorrect} out of $ {myQuestions.length}`} function showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') slides [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') // mostrar la prueba de inmediato buildQuiz () const previousButton = document.getElementById ('anterior') const nextButton = document.getElementById ('siguiente ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // al enviar, mostrar resultados submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()Finalmente, podemos usar CSS para agregar diferentes estilos a este juego.
quiz.css
@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', sans-serif color: rgb (24, 23 , 23) font-weight: 300 text-align: center background-color: # f8e8f2} h1 {font-weight: 300 margin: 0px padding: 10px font-size: 40px background-color: rgb (9, 107, 102) color: #fff} .question {font-size: 40px margin-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block} .answers label {display: block margin-bottom: 10px } botón {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px cursor: pointer margin-bottom: 20px} button: hover {background-color: # 38a} .slide {position: absolute left: 0px top: 0px width: 100% z-index: 1 opacity: 0 transit: opacity 0.5s} .active- diapositiva {opacidad: 1 z-index: 2} .quiz-container {posición: altura relativa: 200px margin-top: 40px}Salida:
Estos fueron algunos de los proyectos de desarrollo web. con esto, hemos llegado al final de este artículo. Espero que hayas entendido los diferentes niveles de proyectos y hayas tenido la idea de cómo construir tu propia página web y diseñarlos de acuerdo a tus necesidades.
marco basado en datos en selenio
Ahora que conoce los bucles de JavaScript, consulte el por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender cómo crear sitios web impresionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y cómo implementarlo en Amazon Simple Storage Service (S3).
Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios de “Proyectos de desarrollo web” y nos comunicaremos con usted.