La mejor manera de aprender tecnologías web del lado del cliente como HTML, CSS y JavaScript es mirar la fuente de los sitios web que visita y jugar con ellos en Firebug. Cada vez que visita un sitio web y se pregunta “¿cómo hicieron que ese botón se vea así?” o “¿cómo se ajusta el tamaño de este cuadro de texto al contenido?” simplemente inspeccione el CSS o JS con Firebug y profundice.
Hay innumerables tutoriales en la web sobre el aprendizaje de etiquetas HTML básicas. Si es completamente nuevo en HTML, es posible que desee comenzar con algunas plantillas de sitios web simples, hacer pequeños ajustes y obtener una vista previa constante en su navegador para ver lo que hizo. Nuevamente, Firebug es realmente útil aquí, ya que puedes hacer cambios sobre la marcha y ver instantáneamente su efecto. Si quieres jugar con otros sitios, te recomiendo sitios más pequeños que no ofuscan su código o que tengan tanta complejidad que solo te confundirán.
Una de las cosas realmente buenas de hacer solo desarrollo del lado del cliente es que puede previsualizar fácilmente su sitio web en su computadora simplemente abriendo el archivo en su navegador. Lanzar tecnologías del lado del servidor como PHP en la mezcla se vuelve un poco más complicado.
- ¿Cuál es una buena alternativa a la Lista de tareas pendientes de Basecamp?
- ¿Cuál es la mejor plataforma y servicio web para extraer múltiples API en un sitio de comparación?
- ¿Cuál es la mejor opción para desarrollar aplicaciones web internas o externas?
- ¿Cuál es el lenguaje de programación más utilizado para el desarrollo de una aplicación web?
- ¿Cómo se crean interfaces planas para sitios web?
Para aprender JavaScript, una biblioteca como jQuery hace que sea súper simple hacer cosas realmente rápido. Sin embargo, hay mucho valor en aprender la sintaxis real de JavaScript y lo recomiendo encarecidamente.
Dado que esta pregunta era sobre los conceptos básicos, no me sumergiré demasiado en temas de moderados a avanzados, pero es bueno aprender las cosas de la manera correcta la primera vez, por lo que debe hacer algunos deberes sobre algunos temas:
- accesibilidad : los usuarios discapacitados (ciegos) navegan por la web con la ayuda de un lector de pantalla que lee sitios web como un libro y tiene atajos de teclado para diversas tareas. Estas herramientas necesitarán su ayuda para descubrir el contexto de ciertos elementos de la página o describir lo que hay en una imagen.
- marcado semántico : se trata de elegir etiquetas HTML en función de su contenido, no de estilo (“marcado de presentación”). Por ejemplo, una lista de elementos debe usar la etiqueta
- porque está destinada a listas. Claro, podría hacer una lista con otras etiquetas, pero no sería semánticamente correcta. Además de ser lo correcto, esto ayuda a los lectores de pantalla.
- validación de doctype : en la parte superior de su archivo, debe tener un DOCTYPE que le indique al navegador qué versión de HTML está utilizando. Cada versión tiene diferencias, y puede usar el validador en http://validator.w3.org para mostrarle cualquier error, desde pequeñas objeciones hasta errores de sintaxis que romperán su sitio.
- Compatibilidad con el navegador : ojalá esté familiarizado con más de un navegador. Si no lo está, debe familiarizarse con los más populares: Internet Explorer, Firefox, Safari y Chrome. Si su sitio se ve bien en cualquiera de los últimos 3, es probable que esté bien en el otro 2. Tratar con la compatibilidad con IE probablemente será una aventura para sí mismo, y es solo una parte del desarrollo web (divulgación completa: trabajo para Mozilla). Si espera que el sitio que está creando tenga una audiencia decente, debe elegir qué navegadores desea admitir desde el principio. Para ver un ejemplo de esto, consulte la matriz de soporte de navegador gradual de Yahoo!: Http://developer.yahoo.com/yui/a… Los ingenieros de front-end aprenden todas las peculiaridades del navegador y generalmente pueden solucionar problemas específicos del navegador con algunos cambios de CSS, pero espero que no necesites hacer eso.
- rendimiento : pequeñas cosas como dónde coloca los archivos JavaScript o cuántas imágenes usa puede tener un gran impacto en la velocidad de carga de su sitio web para los usuarios, especialmente los usuarios con conexiones lentas. Consulte las mejores prácticas de Yahoo! Para obtener consejos sobre el rendimiento del sitio web: http://developer.yahoo.com/perfo…
Esta respuesta completa, por supuesto, supone que desea codificar a mano. También tiene la opción de usar el software WYSIWYG (Lo que ves es lo que obtienes) para arrastrar y soltar elementos de un sitio web exactamente donde los quieres, pero estos producen un código horrible y no aprendes nada.
