百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

怎么样向不懂前端的人介绍前端工作?

itomcoil 2025-02-28 16:09 15 浏览


网页可以简单的理解为素材及布局、交互行为和数据的集合体。

  1. 美工负责素材及界面布局

  2. 交互制定交互的行为和规则

  3. 后端设计数据库

  4. 前端是通过工具(HTML、CSS、JavaScript)把这些都整合起来,设计制作出页面。

Web前端,制作的是用户可以看得见碰得着的东西。或者称为“网页制作”、“网页制作工程师”、“前端制作工程师”、“网站重构工程师”。

另外,根据不同的对象,和自己的心情,是否有闲暇时间,使用不同的方式来回答这个问题:。

对于没必要了解工作内容的人,一律回复:写代码的程序员即可。

  1. 对于朋友,可以让他稍微了解工作内容的人,可以回复:写网站界面/程序的。

  2. 对于家里人,只需要知道你工作的地方稳定/你工作开心/生活健康就好,回复诸如:吃得好睡的好,工资高待遇好……

  3. 对于妹纸,可以做一个resume或者blog出来,然后和她们讲:“我的工作内容和做这个网站差不多”

  4. 对于校友或者学弟学妹一类,想了解专业方向和工作内容的人,可以比较详细的回答他们,下面是完整的技能树:

前端工程师

  • 浏览器

    • IE6/7/8/9/10/11 (Trident)

    • Firefox (Gecko)

    • Chrome/Chromium (Blink)

    • Safari (WebKit)

    • Opera (Blink)

  • 编程语言

    • JavaScript/Node.js

    • CoffeeScript

    • TypeScript

  • 切页面

    • HTML/HTML5

    • CSS/CSS3

    • Sass/LESS/Stylus

    • PhotoShop/Paint.net/Fireworks/GIMP/Sketch

  • 开发工具

    • 编辑器和IDE

      • VIM/Sublime Text2

      • Notepad++/EditPlus

      • WebStorm

      • Emacs EmacsWiki

      • Brackets

      • Atom

      • Lime Text

      • Light Table

      • Codebox

      • TextMate

      • Neovim

      • Komodo IDE / Edit

      • Eclipse

      • Visual Studio/Visual Studio Code

      • NetBeans

      • Cloud9 IDE

      • HBuilder

      • Nuclide

    • 调试工具

      • Firebug/Firecookie

      • YSlow

      • IEDeveloperToolbar/IETester

      • Fiddler

      • Chrome Dev Tools

      • Dragonfly

      • DebugBar

      • Venkman

    • 版本管理

      • Git/SVN/Mercurial

      • Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge

  • 代码质量

    • Coding style

      • JSLint/JSHint/jscs

      • CSSLint

      • Markup Validation Service

      • HTML Validators

    • 单元测试

      • QUnit/Jasmine

      • Mocha/Should/Chai/Expect

      • Unit JS

    • 自动化测试

      • WebDriver/Protractor/Karma Runner/Sahi

      • phantomjs

      • SourceLabs/BrowserStack

  • 前端库/框架

    • jQuery/Underscore/Mootools/Prototype.js

    • YUI3/Dojo/ExtJS/KISSY

    • Backbone/KnockoutJS/Emberjs

    • AngularJS

    • Batarang

    • Bootstrap

    • Semantic UI

    • Juice UI

    • Web Atoms

    • Polymer

    • Dhtmlx

    • qooxdoo

    • React

    • Brick

  • 前端标准/规范

    • HTTP/1.1: RFCs 7230-7235

    • HTTP/2

    • ECMAScript3/5

    • W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...

    • CommonJS Modules/AMD

    • HTML5/CSS3

    • Semantic Web

      • MicroData

      • RDFa

    • Web Accessibility

      • WCAG

      • Role Attribute

      • WAI-ARIA

  • 性能

    • JSPerf

    • YSlow 35 rules

    • PageSpeed

    • HTTPWatch

    • DynaTrace's Ajax

    • 高性能JavaScript

  • SEO

  • 编程知识储备

    • 数据结构

    • OOP/AOP

    • 原型链/作用域链

    • 闭包

    • 编程范型

    • 设计模式

    • Javascript Tips

  • 部署流程

    • 压缩合并

      • YUI Compressor

      • Google Clousure Complier

      • UglifyJS

      • CleanCSS

    • 文档输出

      • JSDoc

      • Dox/Doxmate/Grunt-Doxmate

    • 项目构建工具

      • make/Ant

      • GYP

      • Grunt

      • Gulp

      • Yeoman

      • FIS

      • Mod

  • 代码组织

    • 类库模块化

      • CommonJS/AMD

      • YUI3模块

    • 业务逻辑模块化

      • bower/component

    • 文件加载

      • LABjs

      • SeaJS/Require.js

    • 模块化预处理器

      • Browserify

  • 安全

    • CSRF/XSS

    • CSP

    • Same-origin policy

    • ADsafe/Caja/Sandbox

  • 移动Web

    • HTML5/CSS3

    • 响应式网页设计

    • Zeptojs/iScroll

    • V5/Sencha Touch

    • PhoneGap

    • jQuery Mobile

    • W3C Mobile Web Initiative

    • W3C mobileOK Checker

    • Open Mobile Alliance

  • 前沿技术社区/会议

    • D2/WebRebuild

    • NodeParty/W3CTech/HTML5梦工厂

    • JSConf/沪JS(JSConf.cn)

    • QCon/Velocity/SDCC

    • JSConf/NodeConf

    • CSSConf

    • YDN/YUIConf

    • HybridApp

    • WHATWG

    • MDN

    • codepen

    • w3cplus

    • CNode

  • 计算机知识储备

    • 编译原理

    • 计算机网络

    • 操作系统

    • 算法原理

    • 软件工程/软件测试原理

    • Unicode

  • 软技能

    • 知识管理/总结分享

    • 沟通技巧/团队协作

    • 需求管理/PM

    • 交互设计/可用性/可访问性知识

  • 可视化

    • SVG/Canvas/VML

    • SVG: D3/Rapha?l/Snap.svg/DataV

    • Canvas: CreateJS/KineticJS

    • WebGL/Three.JS

后端工程师

  • 编程语言

    • C/C++/Java/PHP/Ruby/Python/...

  • 网页服务器

    • Nginx

    • Apache

    • Lighttpd

  • 数据库

    • SQL

    • MySQL/PostgreSQL/Oracle/DB2

    • MongoDB/CouchDB

  • 数据缓存

    • Redis

    • Memcached

  • 文件缓存/代理

    • Varnish

    • Squid

  • 操作系统

    • Unix/Linux/OS X/Windows

  • 数据结构

陈童的博客(http://www.everyinch.net/)专注于用户体验研究的IT类网站。发表用户体验研究与度量方面的知识,分享前端与三维网站技术,总结人机交互、集体智慧算法的研究心得,推荐国外相关资源。

相关推荐

Python Qt GUI设计:将UI文件转换Python文件三种妙招(基础篇—2)

在开始本文之前提醒各位朋友,Python记得安装PyQt5库文件,Python语言功能很强,但是Python自带的GUI开发库Tkinter功能很弱,难以开发出专业的GUI。好在Python语言的开放...

Connect 2.0来了,还有Nuke和Maya新集成

ftrackConnect2.0现在可以下载了--重新设计的桌面应用程序,使用户能够将ftrackStudio与创意应用程序集成,发布资产等。这个新版本的发布中还有两个Nuke和Maya新集成,...

Magicgui:不会GUI编程也能轻松构建Python GUI应用

什么是MagicguiMagicgui是一个Python库,它允许开发者仅凭简单的类型注解就能快速构建图形用户界面(GUI)应用程序。这个库基于Napari项目,利用了Python的强大类型系统,使得...

Python入坑系列:桌面GUI开发之Pyside6

阅读本章之后,你可以掌握这些内容:Pyside6的SignalsandSlots、Envents的作用,如何使用?PySide6的Window、DialogsandAlerts、Widgets...

Python入坑系列-一起认识Pyside6 designer可拖拽桌面GUI

通过本文章,你可以了解一下内容:如何安装和使用Pyside6designerdesigner有哪些的特性通过designer如何转成python代码以前以为Pyside6designer需要在下载...

pyside2的基础界面(pyside2显示图片)

今天我们来学习pyside2的基础界面没有安装过pyside2的小伙伴可以看主页代码效果...

Python GUI开发:打包PySide2应用(python 打包pyc)

之前的文章我们介绍了怎么使用PySide2来开发一个简单PythonGUI应用。这次我们来将上次完成的代码打包。我们使用pyinstaller。注意,pyinstaller默认会将所有安装的pack...

使用PySide2做窗体,到底是怎么个事?看这个能不能搞懂

PySide2是Qt框架的Python绑定,允许你使用Python创建功能强大的跨平台GUI应用程序。PySide2的基本使用方法:安装PySide2pipinstallPy...

pycharm中conda解释器无法配置(pycharm安装的解释器不能用)

之前用的好好的pycharm正常配置解释器突然不能用了?可以显示有这个环境然后确认后可以conda正在配置解释器,但是进度条结束后还是不成功!!试过了pycharm重启,pycharm重装,anaco...

Conda使用指南:从基础操作到Llama-Factory大模型微调环境搭建

Conda虚拟环境在Linux下的全面使用指南:从基础操作到Llama-Factory大模型微调环境搭建在当今的AI开发与数据分析领域,conda虚拟环境已成为Linux系统下管理项目依赖的标配工具。...

Python操作系统资源管理与监控(python调用资源管理器)

在现代计算环境中,对操作系统资源的有效管理和监控是确保应用程序性能和系统稳定性的关键。Python凭借其丰富的标准库和第三方扩展,提供了强大的工具来实现这一目标。本文将探讨Python在操作系统资源管...

本地部署开源版Manus+DeepSeek创建自己的AI智能体

1、下载安装Anaconda,设置conda环境变量,并使用conda创建python3.12虚拟环境。2、从OpenManus仓库下载代码,并安装需要的依赖。3、使用Ollama加载本地DeepSe...

一文教会你,搭建AI模型训练与微调环境,包学会的!

一、硬件要求显卡配置:需要Nvidia显卡,至少配备8G显存,且专用显存与共享显存之和需大于20G。二、环境搭建步骤1.设置文件存储路径非系统盘存储:建议将非安装版的环境文件均存放在非系统盘(如E盘...

使用scikit-learn为PyTorch 模型进行超参数网格搜索

scikit-learn是Python中最好的机器学习库,而PyTorch又为我们构建模型提供了方便的操作,能否将它们的优点整合起来呢?在本文中,我们将介绍如何使用scikit-learn中的网格搜...

如何Keras自动编码器给极端罕见事件分类

全文共7940字,预计学习时长30分钟或更长本文将以一家造纸厂的生产为例,介绍如何使用自动编码器构建罕见事件分类器。现实生活中罕见事件的数据集:背景1.什么是极端罕见事件?在罕见事件问题中,数据集是...