¿Cuál es la diferencia entre desarrollo web front-end y producción de páginas web? Sea más detallado

Han pasado seis años desde que entré en contacto con el desarrollo de sitios web. Hoy, cuando accidentalmente clasifiqué los datos de la computadora y vi el primer sitio web que creé para participar en un concurso en el departamento, lo recordé. En este sitio web, una serie de recuerdos sobre el camino del desarrollo, éxitos y alegrías, problemas y enredos están vívidos en mi mente y tengo muchas emociones. Lo comparto con ustedes aquí, esperando que sea útil para aquellos que son nuevos en el front-end web. Bienvenido a quejarse y hacer comentarios.

Empecemos por un malentendido que todo el mundo tiene en sus estudios.

El desarrollo front-end es una industria emergente que ha surgido en los últimos años, por lo que está lejos de ser un sistema de cursos maduro como el comercio electrónico, y no existe un sistema completo de cursos front-end en las universidades, por lo que Aprender front-end en China no es más que capacitación y autoestudio.

La formación es para aquellos que tienen las condiciones. Muchos amigos prefieren el autoestudio. Pero después de todo, el poder del autoaprendizaje es limitado. Para que aquellos que quieran aprender aprendan mejor, recomiendo una falda de 657, la del medio de 1?37 y la última de 906. Hay muchas ideas aquí. Las personas que estudian se comunicarán con usted, y también hay expertos que enseñan gratis todas las noches. Cualquiera que quiera aprender puede unirse a nosotros, pero solo damos la bienvenida a personas que quieran aprender, no solo estudiar. Sólo mira a tu alrededor, no entres.

Malentendidos sobre el aprendizaje front-end web

La producción de páginas web es un curso al que los estudiantes de informática estarán expuestos durante la universidad y el primer entorno de desarrollo integrado (IDE) utilizado para aprender a producir páginas web. es) debe ser principalmente Dreamweaver. Este IDE "explosivo" WYSIWYG nos ha brindado una gran comodidad a la hora de crear páginas web.

Comenzar rápidamente y obtener resultados rápidamente nos hizo enamorarnos profundamente de la producción de páginas web sin siquiera darnos cuenta. En este momento, muchas personas caerán en un malentendido, es decir, con la ayuda de un IDE tan atractivo, se pueden crear páginas web de manera rápida y conveniente haciendo clic en el menú con el mouse.

Entonces, ¿por qué todavía necesitamos aprender estos códigos tan laboriosos como HTML, CSS, JavaScript, jQuery, etc.? ¿No es ésta la búsqueda de la complejidad por encima de la simplicidad?

Pero a medida que el estudio se profundiza, encontraremos que hemos entrado en un dilema: la dependencia excesiva de IDE nos lleva a no conocer la esencia de su implementación, saberlo pero no por qué.

Entonces, cuando hay un problema con el rendimiento de la página, no sabemos cómo optimizar la página y completar algunas aplicaciones más avanzadas. La razón es obvia: el IDE inteligente satisface nuestra pereza y nos hace ignorar el contenido más esencial detrás de las magníficas páginas web: el código.

La dirección correcta es mejor que esfuerzos inútiles

Hay dos hormigas que quieren escalar un tramo de pared para encontrar comida al otro lado de la pared. Cuando una hormiga llega al pie de la pared, sube sin dudarlo, sin embargo, cada vez que sube hasta la mitad, caerá debido al cansancio y el cansancio. Aunque no se desanimó, cayó una y otra vez, rápidamente se ajustó y empezó a subir de nuevo.

La otra hormiga lo observó y decidió rodear el muro. Pronto, la hormiga caminó alrededor de la pared hacia la comida y comenzó a disfrutarla mientras la otra hormiga seguía cayendo y comenzando de nuevo.

Muchas veces, además de coraje y perseverancia, el éxito requiere dirección. Quizás con una buena dirección el éxito llegue más rápido de lo imaginado. Si corres por el camino equivocado, por mucho que lo intentes, será en vano. Lo mismo ocurre con el aprendizaje del front-end web. Primero debe elegir la ruta de aprendizaje correcta.

La ruta de aprendizaje del front-end web se basa en mi experiencia de aprendizaje, mi experiencia en la tutoría de estudiantes en los últimos años y las necesidades de proyectos reales en la empresa. Aquí está el aprendizaje del front-end web. dividido en las siguientes etapas

La primera etapa: aprendizaje de HTML.

HyperTextMark-upLanguage (HTML para abreviar) es el esqueleto de una página web, ya sea una página web estática o una página web dinámica, lo que finalmente se devuelve al navegador es el código HTML y al navegador. interpreta y representa el código HTML y luego lo presenta al usuario. Por tanto, debemos dominar la estructura básica y las etiquetas y atributos comunes de HTML.

El aprendizaje HTML es un proceso de memoria y comprensión. Durante el proceso de aprendizaje, puede utilizar la vista "dividida" de Dreamweaver para facilitar el aprendizaje.

Vea el efecto en la vista "Diseño", aprenda la esencia en la vista "Código" y maximice las ventajas de varias vistas. Este método de aprendizaje comparativo compensa el tedio de simplemente memorizar etiquetas y atributos HTML. para todos los principiantes. ¡Definitivamente será genial para tus pequeños amigos!

Después de aprender HTML, solo dominamos los métodos de producción de varias "materias primas". Si queremos construir un edificio, debemos combinar y distribuir estas "materias primas" de acuerdo con el plan que diseñamos. Haz algunos embellecimientos.

Así que entramos en la segunda etapa: aprender CSS.

CSS es la abreviatura de CascadingStyleSheets en inglés, que se denomina hojas de estilo en cascada. Es un lenguaje de diseño de estilo que realmente puede separar el rendimiento y el contenido de las páginas web. En comparación con el rendimiento del HTML tradicional, sus estilos se pueden reutilizar, lo que mejora enormemente nuestra velocidad de desarrollo y reduce los costos de mantenimiento.

Al mismo tiempo, el modelo de caja, el diseño relativo, el diseño absoluto, etc. en CSS pueden lograr un control preciso a nivel de píxel de la posición y el diseño de cada objeto en la página web. A través de esta etapa de aprendizaje, podemos completar con éxito la construcción de "un edificio".

Una vez completada la construcción del "edificio", podemos entregárselo a los usuarios para que lo utilicen, pero si queremos que los usuarios tengan una mejor experiencia, también podemos "decorar" aún más el "edificio". para que se vea mejor.

Para completar esta tarea, ingresamos a la tercera etapa: aprender JavaScript.

JavaScript es un lenguaje de script ampliamente utilizado en el lado del cliente. JavaScript nos proporciona algunas funciones, objetos y operaciones DOM integrados. Con la ayuda de estos contenidos, podemos implementar algunos efectos especiales en el lado del cliente. , verificación, interacción, etc., hacen que nuestra página parezca menos aburrida, ¡y Sisi contraataca instantáneamente a los ricos y guapos! ¿Hay alguno?

En este momento, tal vez todavía estés inmerso en la sorpresa que te ha traído JavaScript, pero tu gerente de proyecto de repente te gritó:

“Este efecto es × ×El navegador es no es compatible, inténtalo de nuevo."

"¿Incompatible?" ¿Es posible petrificarse instantáneamente?

“¡Oh, no, eso es una estafa! ¡Me tomó una noche escribir cientos de líneas de código y me hizo vomitar sangre!”

Compatibilidad y complejidad de JavaScript A veces Nos da dolor de cabeza, pero afortunadamente hay un "gran dios" que nos ayuda a encapsularlo.

A continuación ingresamos a la cuarta etapa: el aprendizaje de jQUery.

jQuery es una biblioteca JavaScript liviana, de código abierto y gratuita que es compatible con varios navegadores (jQuery2.0 y las versiones posteriores han dejado de ser compatibles con los navegadores IE6/7/8), y ahora hay muchos jQuery- Complementos basados ​​​​en ellos para elegir, que son más convenientes y rápidos cuando implementamos algunos efectos dinámicos ricos, lo que nos ahorra en gran medida tiempo de desarrollo y mejora la velocidad de desarrollo, lo que también refleja plenamente su propósito principal de sin escritura y domore. ¡Esto se siente tan bien! ¿Hay alguno?

Se ha construido el "edificio de lujo", ¡pero es tan engorroso construirlo así día tras día, año tras año! ¿No sería fantástico si cada componente del edificio pudiera modularizarse y ensamblarse como bloques apilados cuando llega el momento de construir un edificio? ¿Es posible? La respuesta es sí.

Este tipo de pensamiento también es adecuado para el desarrollo web front-end, por lo que han aparecido varios marcos front-end. El que se recomienda a todos aquí es Bootstrap. Bootstrap es un conjunto de herramientas de código abierto para el desarrollo front-end lanzado por Twitter. Es un marco CSS/HTML y admite diseño responsivo. Se volvió muy popular una vez que se lanzó y siempre ha sido un proyecto popular de código abierto en GitHub.

Durante el proceso de desarrollo del proyecto, podemos utilizar los estilos CSS, componentes, complementos de JavaScript, etc. proporcionados por Bootstrap para completar rápidamente el diseño de la página y la configuración de estilo, y luego ajustar los estilos en de manera específica, para desarrollarse según el marco. El ciclo de desarrollo se acorta considerablemente. ¡Es genial estar sobre los hombros de gigantes!

Sugerencias de estudio para el front-end web

Finalmente, permítanme hablar sobre algunas sugerencias y métodos para aprender el front-end web.

Un problema al que se debe prestar atención al diseñar CSS es que muchos estudiantes carecen del análisis general del diseño de la página y no pueden comprender la relación anidada entre los cuadros de la página desde una perspectiva macro, por lo que están ansiosos por hacerlo. Como resultado, la relación entre los distintos elementos de la página es muy confusa y es fácil que los cuadros se extravíen al flotar. Se recomienda adoptar la idea de "refinar gradualmente de arriba hacia abajo" al diseñar. Primero use varios cuadros para dividir la página en su conjunto y luego continúe anidando gradualmente los cuadros dentro de los cuadros.

“Un caballero no es una persona diferente, es bueno para falsificar cosas”. En el proceso de aprendizaje, debes explorar más sitios web excelentes, ser bueno analizando y aprovechando sus ideas de diseño y métodos de diseño. , y tener conocimientos al ver muchas cosas, y sólo así podremos entendernos y aprovecharnos de los demás para nuestro propio uso.

Al mismo tiempo, debes ser bueno usando Firebug como herramienta. Por un lado, Firebug puede ayudarnos a depurar nuestras propias páginas durante nuestro proceso de aprendizaje. Por otro lado, podemos usar Firebug para ver y analizar fácilmente el código fuente de los sitios web de otras personas. ¡"Robar" también es una habilidad!

Con el advenimiento del auge de Internet móvil, el desarrollo móvil se está volviendo cada vez más popular. La demanda de diseños responsivos, micrositios, etc. está aumentando, lo que también es una de las futuras direcciones de desarrollo de nuestra Web. front-end. Aprende a Los estudiantes que tienen más energía pueden prestar más atención. Finalmente, deseo que todos puedan encontrar un mundo cada vez más amplio en el camino hacia el desarrollo web front-end.