Documentos de Académico
Documentos de Profesional
Documentos de Cultura
La Web est evolucionando rpidamente. Desarrollo front-end web ha sido mayormente afectados por los cambios recientes en las
tcnicas de codificacin y enfoques. En 2003, un desarrollador web front-end competente habra sabido HTML y CSS, posiblemente con un
poco de copiar y pegar JavaScript, y creado sitios Web que se pueden ver en las computadoras de escritorio.
No as en el ao 2013! Ahora, un desarrollador web front-end competente est bien versado en HTML y CSS, JavaScript y jQuery,
preprocesadores CSS, nuevas tcnicas, como el diseo sensible y mvil primero, y un mundo de nuevos dispositivos para los sitios web de
visualizacin.
As como el trabajo de un desarrollador web front-end ha cambiado, por lo que deben ser las clases de diseo web introductorios bsicos
ofrecidos en toda la educacin superior. Cmo se debe ensear a los estudiantes que no saben nada de HTML o CSS, por lo que
pensar en el diseo y construccin de sitios web en un dispositivo de manera independiente, utilizando tcnicas modernas como el diseo
sensible y mvil por primera vez?
He estado enseando Diseo web introductoria durante 13 aos en una variedad de entornos acadmicos y comerciales, y le he dado
muchas vueltas a la forma en que deberamos estar enseando a dos de los cursos de primeros y ms bsicos de un diseo web de la
universidad y el desarrollo del currculo . Este debate es importante, porque slo unos pocos recursos disponibles para la enseanza
del diseo y desarrollo web. Debido a la falta de tiempo y la rpida evolucin de la Web, es difcil volver a cursos y actualizarlos con los
ltimos materiales cada ao.
El aumento de la colaboracin entre los profesores de tiempo completo y adjuntos a tiempo parcial puede ayudar a mejorar la experiencia
de los estudiantes. Fuente de la imagen
Profesores adjuntos, que frecuentemente ensean a tiempo parcial y por lo general tienen un "trabajo de da", a menudo crear sitios web
profesionales y tienen recursos para mantenerse al da con las ltimas tendencias y tcnicas en el campo.Sin embargo, no tienen fcil
acceso a grandes recursos de enseanza, que pueden tener dificultades para presentar este material de vanguardia de manera que los
estudiantes puedan entender y apreciar. Instructores a tiempo completo y los profesores no suelen crear sitios web profesionales (o van a
construir algunos de ellos), y con muchas otras demandas sobre su tiempo, pueden tener dificultades para mantenerse al da con las
tendencias y tcnicas.
Sin embargo, a menudo tienen una profunda experiencia en metodologas de enseanza, con un sentido claro de lo que funciona y lo que
no en la enseanza del diseo Web. Debido a que muchos instructores adjuntos ensean tardes y fines de semana, mientras que los
profesores de tiempo completo por lo general ensean clases de da, estos profesores rara vez interactan. Parte de la clave para mejorar
la experiencia de los estudiantes, la calidad de la enseanza y planes de estudio es aumentar la colaboracin entre los profesores de
tiempo completo y adjuntos a tiempo parcial. Ambos grupos de instructores aportan habilidades valiosas y complementarias a la
educacin superior. (Los bajos salarios de los instructores adjuntos tambin son importantes para la discusin, pero, por desgracia, ms
all del alcance de este artculo.)
En este artculo, me centrar en slo dos cursos: un curso de diseo grfico introductorio y una introduccin HTML y CSS por
supuesto. Conceptos tales como la estrategia del sitio web y la planificacin, mviles primero, arquitectura de informacin, usabilidad,
diseo centrado en el usuario, JavaScript y jQuery, sistemas de gestin de contenidos, etc son valiosos y deben ser cubiertos en el plan de
estudios. Sin embargo, estos temas suelen ser (o al menos deberan ser) cubiertos en cursos separados en la mayora de planes de
estudios universitarios y, as, no se tratan en este captulo.
Creacin de Diseos
En la mayora de los programas de diseo Web de las universidades, los estudiantes tomarn un curso sobre la creacin de diseos de
pgina web en un solo grfico en el software como Photoshop o Fireworks. Los estudiantes pueden comenzar con una captura de pantalla
de un sitio web existente, capas de sus propias imgenes y contenido para crear un diseo nico, o puede crear un diseo desde cero.
La idea detrs de esta clase es el sonido. Una vez que los estudiantes han aprendido lo bsico de trabajar con el software, el curso genera
discusin de la usabilidad, color, diseo, las fuentes, el espacio negativo, la calidad de imagen y la colocacin y mucho ms, todo sin la
participacin de cdigo. Permite a los estudiantes a imaginar a una pgina Web en su mente sin ser demasiado preocupado acerca
de cmo se codifica la pgina. Cuando el estudiante hace empezar a programar la pgina, tendrn los conocimientos necesarios para
aclarar lo que ellos quieren construir antes de escribir una lnea de cdigo.
Es importante que los estudiantes se forman una idea de una pgina web antes de la participacin de cdigo. Fuente de la imagen
En este curso, los estudiantes con frecuencia tienen problemas para entender lo que sucede ms all del lienzo. Si el diseo es de 960
pxeles de ancho, lo que ocurre cuando el monitor es de 1200 pxeles de ancho? Por lo general, que est dirigida por un color de fondo o
repetido grfico. Los estudiantes rara vez se preguntaron qu pasara si el monitor es ms estrecho que 960 pxeles.
La mayora de los estudiantes, si se le pregunta acerca de una ventana estrecha, sealaran la barra de desplazamiento en la parte inferior
de la pgina, alertando al visitante a ampliar su navegador para ver el diseo completo. No tienen en cuenta si los botones estn
demasiado juntos para la navegacin basada en el contacto, por ejemplo, o cmo el tamao del texto pueden variar en diferentes
dimensiones de la pantalla. Los estudiantes en este curso pueden, sin embargo, ser guiados a pensar en estas cuestiones.
Muchos estudios de diseo que se centran en el diseo de respuesta no utilizan composiciones, como los generados en esta clase, como
parte de su proceso de desarrollo ms. En su lugar, prefieren usar HTML y composiciones basadas en CSS para demostrar el aspecto de un
sitio web para un cliente. As que, por qu ensear a composiciones basadas en imgenes para los estudiantes?
La razn es que, en este momento de su desarrollo, los estudiantes no necesariamente saben HTML y CSS y, en todo caso. Al eliminar el
cdigo de la imagen, los estudiantes se centran en los principios de diseo, incluyendo el diseo grfico y la experiencia del usuario. Una
vez que aprenden HTML y CSS, que nunca podra crear un borrador basado en imgenes de nuevo. Sin embargo, en este proceso, han
aprendido a navegar Photoshop y / o Fireworks, y han aprendido las ventajas y desventajas de trabajar en un entorno borrador - todos los
cuales son valiosas experiencias.
Estas son algunas de las tareas se puede asignar a mejorar esta clase y preparar a los estudiantes para el trabajo independiente del
dispositivo de diseo:
Tenga en cuenta que algunas compaas estn trabajando en el problema de disear en un entorno flexible sin usar cdigo. Cuando estos
programas son ms estables, que valdra la pena incorporar en el plan de estudios de la universidad.
Enseanza HTML y CSS
En un curso de HTML y CSS tpica, los estudiantes aprenden la diferencia entre marcas y presentacin. A lo largo del perodo, los
estudiantes aprenden a crear una pgina web desde cero, manipulando HTML, CSS y archivos de imagen. Sus diseos se suele ser
completamente personalizado, y por lo general van a aprender acerca de carrozas y el posicionamiento como parte de este
proceso. Compatibilidad del navegador puede ser tocado en lo que se encuentra.
"No le temo a la Internet" es un recurso de aprendizaje fantstico que ensea algunas muy tiles HTML y CSS bsico.
Fundamentalmente, no hay nada malo en esta clase. Los estudiantes dejarn saber a mano el cdigo compatible con los estndares HTML
y CSS. Sin embargo, s necesita algunas modificaciones para tener en cuenta las tcnicas modernas de diseo:
Normalizar en un navegador.
Recomiendo trabajar con Firefox o Chrome como navegador estndar en clase, porque estn disponibles en Mac y PC, y son los
ms compatible con los estndares. Diga a los estudiantes que este es el nico navegador que importa para el propsito de
esta clase. Los problemas entre exploradores deben ser tratadas ms adelante, una vez que los estudiantes entiendan cmo de
HTML y CSS trabajan completamente en este navegador. Cuando los problemas a travs del navegador se introducen
demasiado pronto, los estudiantes se confunden, no est claro si un problema particular se debe al navegador de cdigo
simplemente mal formado.
Ensee a HTML5.
Los estudiantes deben aprender a maquetar documentos con secciones, apartes, la navegacin, los encabezados y pies de
pgina de inicio.
Tan pronto como los estudiantes a entender carrozas y posicionamiento, ensean cmo codificar una cuadrcula.
Dado que los estudiantes han estado pensando en el diseo Web con principios basados en la red, esta transicin debera ser
bastante rpido para ellos.
Habilidades indirectos
He habilidades en forma directamente cubierto por el desarrollo front-end web moderno. Tambin me gustara sugerir que cubre algunas
tcnicas indirectas, como parte de cualquiera de estos cursos u otros cursos que los estudiantes toman.
Portafolios Online
Estos han sido integrados en los programas de varios aos, pero tienden a ser ms utilizado por los diseadores que por los
desarrolladores. Con las carteras, el pblico puede centrarse en el propio diseo visual, en lugar de en el cdigo o la filosofa detrs
de la obra. Asegrese de que los estudiantes estn acostumbrados a publicar el cdigo para su revisin (que une a su propia
pgina de GitHub es un buen toque).
Pida a los estudiantes explicar los problemas que han estado tratando de resolver y por qu se tom el enfoque que hicieron para
resolverlos.Blogging debe exigirse, por lo que los estudiantes pueden realizar un seguimiento de artculos interesantes, nuevos
enfoques a los problemas, fragmentos de cdigo de inters, etc. Anime a los estudiantes a desarrollar una presencia profesional en
medios de comunicacin social, centrndose en su cdigo y el trabajo.
Escribe codificar un poco a la vez, poco a poco haciendo los ejemplos ms complejos.
No introducir demasiados elementos a la vez. Por ejemplo, cuando se introduce CSS, empezar por escribir estilos de etiquetas
HTML. Mostrar cmo el estilo del body etiqueta puede controlar toda la pgina Web, incluyendo el color de fondo, tipo de letra,
tamao, etc Escribir un atributo a la vez, guardar los cambios y mostrarla en el navegador cada vez, de manera que los
estudiantes vean que es exactamente la lnea de CSS controla qu elemento de la pgina.
de confirmar cmo hacerlo. Si pueden explicar la idea conceptualmente, a continuacin, el cdigo se convierte en fcil. Por
ejemplo, si usted ha Styled el cuerpo de una pgina web con el texto azul, pregunte cmo hara el principal ttulo rojo. Si los
estudiantes pueden explicar que lo que se necesita para cambiar de alguna manera el texto de la h1 tag a ser de color rojo, a
continuacin, que estn haciendo muy bien. Entonces, usted slo tendr que mostrarles la forma de escribir que, como cdigo.
Sintaxis es un reto.
Los estudiantes principiantes se olvidan de cerrar las etiquetas, olvdate punto y coma, conforman etiquetas por completo y
hacer muchos otros errores. Encontrar esos errores a veces es fcil y otras veces difcil. Me gustara presentar el tema de la
validacin bastante temprano en el proceso, por lo que los estudiantes tienen una manera fcil de comprobar su trabajo. Al
principio, puede que tenga que sealar que falta, la sintaxis adicional o no cerrado, pero ensendoles tcnicas de depuracin
slidas desde el principio les ayudar de manera significativa.
Para la mayora de los estudiantes en los cursos de introduccin de HTML y CSS, gestin de archivos es un problema
constante. Algunos tienen problemas para diferenciar entre guardar informacin en un disco duro en comparacin con el ahorro en
una unidad flash, y algunos podran no saber la diferencia entre un archivo y una carpeta. Puede que tenga que explicar los
fundamentos antes de ensearles cmo administrar los archivos en un sitio web. Trato de mantener todos los archivos de un
proyecto en una sola carpeta en el escritorio para iniciar, ya que los estudiantes generalmente pueden encontrar en el escritorio, y
una sola carpeta deja poco margen para la confusin. Todas HTML, imgenes y CSS se guardan en la carpeta individual. Es
manejable al principio, ya que los estudiantes requerirn slo un puado de los activos de sus primeros sitios web. Cuando los
estudiantes se sienten como una carpeta est recibiendo desordenado y que le gustara un poco ms de organizacin, se han
llegado a dominar la forma de vincular dos archivos, insertar una imagen y as sucesivamente. Ellos sabrn cmo se supone que el
cdigo para ver y trabajar, as que, si algn cdigo no funciona, se supone razonablemente que el culpable es un camino
incorrecto.
Un error comn entre los profesores con talento es hacer que sus pginas Web de ejemplo en su clase, hermoso, ajustado a la
perfeccin y cross-browser compatible desde el principio. Por desgracia, eso no es el punto.Los principiantes pueden fcilmente
descubrir hermosos diseos de navegar por la Web. Adems, usted es el instructor - usted no tiene que demostrar su competencia
en este camino. Su trabajo es mostrar con claridad lo que cada lnea de cdigo hace y cmo afecta a la pgina Web, tanto en
apariencia como en funcionalidad. Cuando estoy escribiendo cdigo con los estudiantes, inserto un montn de horribles colores del
fondo y las fronteras de la CSS para demostrar los conceptos. Animo a los estudiantes a utilizar este mismo mtodo para depurar
CSS. No le d demasiada CSS demasiado rpido. Los estudiantes empuje para hacer las cosas ms bonitas s, como era de esperar
- muchos de ellos sern los diseadores grficos y odiarn lo feo que sus pginas web son los primeros. Sin embargo, cuando los
estudiantes ven el progreso en sus diseos, desde la primera pgina HTML sin labrar para algunos estilos bsicos de CSS y,
finalmente, a un diseo completo, que ser paciente con usted si se le explica que una cuestin particular es complicado o
prematuro punto.
problemas de compatibilidad entre navegadores - estos son conceptos fundamentales en la vida de un desarrollador de frontend. He visto estudiantes sufren enormemente de instructores introductorias malos. Su trabajo es muy importante, as, ir poco
a poco con el nuevo material, y asegrese de que los estudiantes tengan una slida comprensin de la misma antes de pasar al
siguiente tema.
N O TA D E L E D I T O R
Este artculo es una rplica de la " ve el futuro de la Internet tienen espacio para diseadores web? ", publicado en nuestra seccin de"
columna de opinin "Hace un par de das. En esa seccin, damos a la gente en la comunidad del diseo Web una plataforma para
presentar sus opiniones sobre temas de importancia para ellos. Tenga en cuenta que el contenido de esta serie no es de ninguna manera
influido por el equipo de Smashing Magazine. No dude en discutir la opinin del autor en la seccin de comentarios a continuacin y con
sus amigos y colegas. Esperamos sus comentarios.
- Vitaly Friedman, editor en jefe de Smashing Magazine
El jueves pasado por la tarde, pas unos 30 minutos haciendo una sesin de preguntas y respuestas a travs de Skype con una clase de
diseo web en Colorado.Me dieron algunos ejemplos de preguntas que pensar antes de nuestra sesin, que eran todos bastante
estndar. "Quines son algunos de sus clientes?" "Qu te gusta de tu trabajo?" "Quin es tu diseador favorito?" Me sent preparado. A
mitad de la entrevista, una pregunta me sorprendi. "Entonces, hay puestos de trabajo en el diseo Web?" Cuando un adolescente de un
pueblo con una poblacin de 300 pregunta por la seguridad laboral, y los otros se sientan y presten atencin, que no est pidiendo a la
preocupacin por mi bienestar. Est pidiendo a la preocupacin por su futuro.
Mi respuesta fue: S, absolutamente puestos de trabajo en el diseo Web. "El diseo web es una carrera que te llevar lejos, si usted est
dispuesto a trabajar duro para ello." Y esa es la verdad.
Dos das ms tarde, me voy a Smashing Magazine y ver el artculo de Cameron Chapman, "Tiene El futuro de la Internet tienen espacio
para diseadores web?" Y casi ahogarse con mi cereal. Despus de leer lo que equivale a una pieza de ataque a tu blog , y despus de
que corresponde con Smashing editores de la revista, le suger que me dejan escribir un contrapunto. Estuvieron de acuerdo.
NO SOMOS DISEADORES WEB
Uno de los mayores conceptos errneos acerca de los diseadores (y diseadores Web por lo general) es que somos diseadores
web slo - que el mbito de nuestras competencias comienza con Lorem ipsum y termina con mensajes de correo electrnico HTML. Esto
es ridculo.
Todo el mundo en esta industria llena de docenas de papeles a lo largo de un da determinado. En una llamada con un cliente
potencial, tomamos el papel de vendedor. Despus se ordena el contrato, nos convertimos en investigadores, peinado a travs de pgina
web obsoleta del cliente, mirando a anlisis y la identificacin de las averas y de mejora. Poco despus, llegamos a ser curadores de
contenido, vadeando a travs de los montones de contenidos en formato PDF enviado por el cliente, la identificacin de lo que funciona y
lo que no.
Entonces somos arquitectos, trazando contenido para obtener los mensajes ms importantes a travs de, al tiempo que garantiza que
todo en nuestros diseos permanece localizable. Diseamos la propia pgina web. Gestionamos las expectativas del cliente y trabajamos
a travs de revisiones. Escribimos cdigo. Se introduce un sistema de gestin de contenidos. Insertamos cuidadosamente y contenido
estilo. Nosotros creamos y actualizamos la presencia de la marca en Facebook, Twitter y YouTube. Le ayudamos a crear un calendario
editorial para mantener el contenido fresco y preciso. Nos registramos en el anlisis y mediciones para ver cmo el sitio web se est
realizando.
Observe que el "diseo" se menciona slo una vez en todo ese trabajo.
Usted slo tiene que mirar a los temas tratados en sitios web como Freelance Switch y Smashing Magazine para ver la gama de papeles
que llenar. Estamos acostumbrados a adaptarse y cambiar, y como la web se adapta y cambia, diseadores web siguen su ejemplo. As
como de video no mat a la estrella de radio, Twitter no va a matar a la pgina original.
Scrivs escribi un gran artculo sobre Drawar destacando algunas falacias en el artculo original de Smashing Magazine. Creo que resume
el "No eres ms que un diseador web" as emisin:
No se puede quedar atrapado en el trmino "diseador web", porque si lo hace, entonces usted est quitando la idea de que un gran
diseador no puede aprender la manera de trasladar sus habilidades a otra plataforma. Si estamos diseando aplicaciones que slurp
contenido de la Internet para presentar a un usuario, a continuacin, pronto vamos a estar todos los diseadores de Internet. Eso elimina
la carga de diseo Web y cambia las cosas un poco.
Kristina Halvorson, habitual seguidor de contenido, dando uno de sus famosos talleres de contenido. (Foto: Warren Parsons) Crdito de la
imagen
En el mismo sentido, ninguna empresa de pronto renunciar a su creativo cuidadosamente elaborado y el retroceso a una
plantilla. Plantillas han existido por aos, y ninguna empresa con cualquier tipo de presupuesto se utilice una solucin empaquetada $ 49
de Template Monster si puede permitirse el lujo de pagar a alguien para hacer frente a sus necesidades particulares y moldear una pgina
web con su contenido. Una plantilla no tiene necesidades o metas en cuenta cuando el contenido se pega pulg Un buen diseador hace
elecciones que una plantilla de 49 dlares no va a hacer para usted.
Cameron habla de cmo las empresas tendern a las plantillas estndar y lejos de la contratacin de diseadores:
Las empresas no vern el momento de contratar a alguien para crear un sitio web totalmente a medida cuando se puede simplemente
utilizar una plantilla y luego alimentar a todos sus contenidos a Google y Facebook y Twitter.
Los diseadores web no slo tiene que aadir las fronteras a los botones y los colores a los titulares. El diseo web es como mucho sobre
la resolucin de problemas como cualquier otra cosa. Y una parte del rompecabezas es encontrar la mejor manera de ofrecer y promover
contenido. No todo el mundo tiene los mismos problemas.
JulesLt establece este argumento en los comentarios:
[...] Pero yo no creo que ninguna empresa que anteriormente habran hecho empleado a un diseador para crear su presencia en la web,
la marca, cambiar a un modelo estndar. Para la mayora de las empresas, Facebook, YouTube o Twitter pueden ser canales alternativos
para llegar a sus clientes, pero no quieren que su marca subsumida en otra persona. [...] La forma correcta de hacer esto es crear un
ncleo reutilizable, pero entender las diferencias entre plataformas - y asegurarse de que sus clientes entiendan cualquier
compensaciones.
La lnea de fondo? Diseo web es un mercado de trabajo estable y en crecimiento. Dos fuentes que son algo as como las
autoridades en el empleo y el diseo Web estn de acuerdo en este punto. El Departamento de Trabajo de Estados Unidos predice que las
posiciones para los diseadores grficos aumentarn 13% de 2008 a 2018, con la que se aade ms de 36.000 nuevos puestos de
trabajo. Tambin se afirma que "los individuos con el diseo del sitio Web [...] tendrn las mejores oportunidades."
Y en el 2008 A List Apart Encuesta Para personas que hacen las pginas web , el 93,5% de los encuestados dijo que haba al menos
bastante confianza en su seguridad en el empleo.
Voy a dormir bien esta noche sabiendo que la industria me encanta no va por el camino del dodo ... y que yo no ment a una clase llena de
jvenes diseadores deseosos de Colorado.
(Al)