Recursos para desarrolladores web Una mega compilación

Internet está creciendo constantemente y hay cientos de miles de recursos colectivos para los próximos desarrolladores web. Desde artículos en línea, tutoriales, herramientas, guías hasta videos, puede aprender casi cualquier cosa a través de la Web. Realmente nunca ha sido tan fácil saltar en línea.!

A continuación, he reunido una gran colección de recursos para desarrolladores web muy útiles. Estos incluyen material para principiantes para HTML5 / CSS3 junto con teorías más complicadas para la programación de JavaScript y PHP. Es posible que un par de desarrolladores entusiastas estudien estos idiomas y construyan aplicaciones web muy populares similares a Twitter o Tumblr. Si te interesan los recursos útiles para los desarrolladores web modernos, te encantará esta compilación de recursos confiables..

Revistas útiles en línea

El mundo de los blogs ha explotado con cientos de miles de nuevos escritores que se lanzan a Internet. Muchos de estos blogs en línea se centran en el diseño y el desarrollo web. Puede encontrar una gran cantidad de recursos útiles simplemente hojeando estos canales RSS.

Dependiendo del tipo de idioma que codifique, determinará su interés en cualquiera de estos blogs. Podemos centrarnos en el desarrollo web y asumir que esto incluye todo el trabajo de front-end (HTML5 / CSS3 / JavaScript), así como los scripts de back-end simples (PHP / RoR / Python / SQL). Me he tomado la libertad de construir una lista única de los blogs de desarrollo más populares que se centran tanto en el código de front-end como en el de back-end..

Nettuts+
24 maneras
Webmonkey
Codificación aplastante
Arquitecto web
Inspeccionar elemento
Gatos que codifican
Line25 Web Design Blog

Ciertamente hay muchos otros a considerar. Recomiendo ir a Google en busca de tutoriales y artículos en su idioma de desarrollo preferido. Luego, utilizando un agregador de fuentes RSS como Google Reader, puede configurar listas de los últimos artículos de estas revistas. Esta es una excelente manera de comenzar su jornada laboral, o incluso de matar un poco de tiempo revisando los tutoriales..

jQuery Plugins Galore

Tanto la biblioteca principal de jQuery como jQuery Mobile han ganado mucha tracción en el último año. Estas bibliotecas de código abierto trabajan para diseñar una experiencia de front-end llena de animaciones ricas y características de Ajax fáciles de implementar, aunque la biblioteca móvil no ha alcanzado a su principal en términos de complementos y código de terceros.

De forma similar, otro producto fantástico bgStretcher se puede utilizar como un script de fondo dinámico. Tomará una serie de imágenes y una escala de los tamaños proporcionalmente a la resolución de la pantalla del usuario. Echa un vistazo a la maravillosa demostración para ver esto en acción. Ambos de estos complementos se pueden descargar gratis y se comportan como simples ejemplos del increíble código de terceros creado con jQuery. Trabajar con estos recursos le ahorrará una gran cantidad de tiempo en el trabajo del proyecto para que no tenga que reinventar la rueda.

En general, también recomiendo navegar por los sitios web Ajax Blender y Dynamic Drive para obtener fragmentos de código JavaScript / complementos. La biblioteca no es enorme, pero está creciendo constantemente a partir del nuevo contenido enviado por el usuario. Los sitios incluyen no solo los complementos de jQuery, sino también las bibliotecas de MooTools y Prototype..

Si terminas trabajando con la biblioteca de jQuery Mobile, quiero recomendar otra herramienta jqmPhp. Es una clase dinámica de PHP en la que puede hacer referencia a funciones simples para líneas de salida y líneas de código HTML5 alimentadas a través de jQuery Mobile. Sinceramente, es la forma más sencilla de crear prototipos de aplicaciones móviles dinámicas basadas en un shell de PHP. El blog del sitio tiene muchas referencias de ejemplo para explorar..

Construyendo en HTML5 y CSS3

Cuando hablamos de desarrollo web front-end, generalmente se trata de eficiencia. No tiene los mismos problemas al crear un sitio web en HTML / CSS como codificaría una aplicación de fondo de Ruby. No existe una lógica real o manejo de errores en HTML, se trata principalmente de la rapidez con la que puede escalar un diseño de diseño correctamente en todos los navegadores.

Primero tengo que empezar por recomendar el HTML5 HTML5. Esta es una plantilla básica que incluye todos los “estándar” Elementos de la página web HTML5 en un solo paquete. Esto incluye una hoja de estilo predeterminada, JavaScript, favicon, íconos táctiles de Apple y muchas otras opciones. Es un proyecto 100% gratuito e incluso puedes contribuir en su repo de Github. Este es un recurso imprescindible para todos los desarrolladores antes de iniciar cualquier proyecto web serio.

Ahora, si trabajas con esta placa, tienes la opción de agregar todos tus propios códigos personalizados. Pero sugiero dar el siguiente paso y construir con una aplicación como Initializr. Esto generará un diseño de sitio web típico e incluso le permitirá personalizar qué elementos se incluyen dentro de su paquete boilerplate. El código de Google Analytics, los archivos jQuery, .htaccess o web.config minimizados, además de una docena de otras opciones están disponibles.

Diseñadores CSS

Ahora que hemos analizado un poco la codificación HTML5, también deberíamos considerar algunos de los marcos CSS3 populares. Estas son más abiertas que las plantillas HTML, ya que puedes hacer mucho más con CSS. Los diseñadores también se darán cuenta de la dificultad de crear un código compatible con los estándares para todos los navegadores web modernos.

El sistema Golden Grid es fantástico como marco para diseños web sensibles. Estos diseños se adaptarán a las pantallas móviles y se plegarán hacia adentro a medida que cambia el tamaño de la ventana del navegador. También ayuda a planificar el ancho y el tamaño de cada área de columna. Blueprint es otro marco CSS útil que deberías revisar. Es genial para crear sitios web personalizados y ofrece documentación fantástica..

Sin embargo, cuando se trata de herramientas CSS, CSS3 PIE tiene que estar entre mis tres favoritos. Es una aplicación web simple que genera el código adecuado para representar los efectos CSS3 admitidos en Internet Explorer 6-9. Puede crear degradados lineales dinámicos, esquinas redondeadas y sombras de cuadro con configuraciones personalizables. El sitio tiene ejemplos de IE si también quiere revisarlos.

Los desarrolladores también buscarán reducir el tamaño de sus archivos para la producción. Clean CSS es un recurso donde puede seleccionar entre numerosas opciones para simplificar su código y reducir el tamaño del archivo. Otra alternativa de Code Beautifier no ofrece tantas opciones, pero puede ser más fácil de usar.

Personalizando Temas con WordPress

La publicación de WordPress es fácilmente el CMS más popular en esta era. Hemos visto posiblemente millones de nuevos blogs y sitios web que funcionan con esta fantástica solución de administración de contenido. Y como tales, los desarrolladores de WordPress tienen una gran demanda para crear widgets personalizados y temas de sitios web.

La nueva versión de Constellation Theme brinda a los desarrolladores de WordPress un punto de partida más sencillo que las plantillas predeterminadas. El nuevo tema de Twenty Eleven es muy ingenioso y minimalista, pero no puede competir con una plantilla de tema completa construida sobre la placa de identificación HTML5. El tema Constellation WP incluso incluye consultas de medios para varias resoluciones de dispositivos, como tabletas para iPhone y iPad.

Wonderflux es otra plantilla de tema de WordPress que no está tan avanzada en el desarrollo. Recientemente se lanzó de la versión beta a v1.0 junto con algunos documentos en línea. Este tema es un poco más complicado que Constellation, que le da más control sobre el diseño. Los desarrolladores han incluido enlaces, funciones y filtros PHP personalizados para hacer que su sitio de WordPress sea más dinámico.

Los desarrolladores de WP serios deben revisar ambas soluciones para ver si alguna de ellas podría ayudar en futuros proyectos..

Encontrar Freebies para desarrolladores web

En comparación con los PSD y los gráficos, la comunidad de desarrollo web parece carecer de galerías de regalos. Siempre puedes encontrar grandes scripts en Github, pero a menudo tendrás que buscar y probarlos tú mismo..

Es difícil encontrar sitios web que ofrezcan descargas y demostraciones gratuitas, así como ejemplos de guiones. Mi nuevo recurso favorito es CodeVisually, que cataloga herramientas de desarrollo enviadas por el usuario, complementos, bibliotecas y otras cosas interesantes. El diseño se configura como una galería donde cada página incluye un enlace al producto, una captura de pantalla de demostración y algunos detalles adicionales.

La galería incluye cientos de ejemplos de código de plantilla HTML / HTML5, bibliotecas CSS3 y, sin duda, un montón de cosas de jQuery también. También encontré que este es un gran sitio web para enviar su propio código de código abierto al público. Su nombre está vinculado al envío, además puede colocar enlaces a su propio sitio web donde los usuarios pueden acceder al código.

API de aplicaciones web

Una tendencia muy popular en el desarrollo web moderno es la construcción de API como una aplicación de terceros. La mayoría de las marcas de redes sociales principales incluyen una API de trabajo y un segmento de documentación directamente en su sitio web. Además, hay un montón de clases de envoltorio gratuitas en Github escritas en todos los principales lenguajes de programación de back-end.

Los desarrolladores deben sentirse cómodos trabajando con este tipo de bibliotecas de códigos, ya que están creciendo en demanda. Usando el sistema OAuth, puede construir rápidamente una base de usuarios desde muchas de estas aplicaciones. He enumerado a continuación solo algunas referencias a las API en línea populares y su documentación completa.

API de Twitter
API de CloudApp
API de Instagr.am
API de eBay
API cuadrangular
Dribbble API
API de Github

Aproveche estos recursos en nuevos proyectos siempre que sea posible. La web está cada vez más conectada y los usuarios siempre están acudiendo a la próxima gran aplicación. Puede reclutar miles de miembros más dedicados a su aplicación cuando sus visitantes no necesitan registrar una cuenta completamente nueva y pueden registrarse directamente a través de Twitter o Facebook.

Recursos de preguntas y respuestas

La experiencia más beneficiosa entre los desarrolladores es hacer preguntas y aprender nuevas técnicas. La comunidad de desarrolladores siempre es muy útil para los recién llegados y está dispuesta a ofrecer su experiencia en muchas situaciones. Si tiene problemas o preguntas específicas sobre un proyecto, busque en Google el foro de un desarrollador web relacionado..

Personalmente, tengo que recomendarte unirme a la comunidad de Stack Exchange si aún no eres miembro. Esto incluye sitios web increíbles como Stack Overflow y Super User, donde puede obtener ayuda de programación en prácticamente cualquier cosa. Los miembros de la comunidad tienen conocimiento de todos los principales idiomas web, incluyendo jQuery y clases de PHP más pequeñas.

Un buen truco que aprendí es buscar en Google y ver si su problema ya se ha resuelto. Ingrese algunas palabras clave en su búsqueda de Google y agregue el sufijo sitio: stackoverflow.com. Todos los resultados de búsqueda devueltos serán preguntas de los archivos de Stack Overflow. Si tiene suerte, puede encontrar exactamente la solución a su problema actual..

Prueba de velocidad de página en línea

Esta nueva herramienta de Google Developers ha sido realmente impresionante. La aplicación Page Speed Online analizará el contenido de su sitio web y generará un informe analítico de sus velocidades. Esto incluye posibles soluciones para reducir los tiempos de carga y mantener a sus visitantes en el sitio por más tiempo.

También puede ayudarlo a determinar problemas con tasas de rebote y conversiones más bajas. Google Analytics es una necesidad para cualquier sitio web, pero creo que Page Speed solo alcanza un mayor nivel de análisis.

La salida del informe se clasifica de prioridad alta a baja y, a menudo, incluye muchos elementos diferentes. Si comprende las configuraciones de LAMP y está trabajando en servidores Apache, entonces también puede considerar el módulo mod_pagespeed. Realiza automáticamente muchas de estas optimizaciones en su sitio web para disminuir los tiempos de carga y almacenar datos web importantes (imágenes, iconos, scripts).

El mejor software para desarrolladores

Entre los dos sistemas operativos más populares, puedes encontrar docenas de programas. Desde el software de gráficos hasta los editores de código fuente y los IDE, hay muchos recursos para que los desarrolladores web puedan elegir. Pero si buscas sugerencias populares te recomiendo los siguientes títulos.

Mac OS X

Panic es una compañía de software que creó Coda, la mejor aplicación de desarrollo web para Mac. Tiene acceso a un editor de código fuente, terminal y cliente FTP donde puede realizar cambios directamente en los archivos del servidor. Coda también admite una larga lista de resaltado de sintaxis para idiomas como HTML, XML, CSS, JavaScript, PHP, SQL y muchos más..

Sin embargo, si necesitas una solución gratuita, deberías revisar Komodo Edit. El software está desarrollado para Windows y Mac, de código abierto y totalmente gratuito para descargar. Incluye todo el mismo soporte para el resaltado de sintaxis y muchas características similares a las de Coda (desafortunadamente no hay FTP). TextWrangler es otra solución gratuita que puede probar, también es un simple editor de texto..

Para obtener una aplicación FTP gratuita, visite Cyberduck en la Mac App Store. Aunque personalmente prefiero una alternativa pagada como Yummy FTP o Transmit.

Microsoft Windows

El paquete de software Adobe siempre viene a la mente cuando piensa en el diseño y desarrollo web. Los usuarios de Windows tienen muchas alternativas a Dreamweaver, y muchos de ellos son totalmente gratuitos..

Notepad ++ es un gran ejemplo de algún software Win32 de código abierto. El proyecto todavía está en desarrollo activo y lanza actualizaciones con frecuencia (casi mensualmente). Me encanta su interfaz con pestañas y soporte para tantos complementos adicionales. Como mencioné anteriormente, Komodo Edit también se ofrece para Windows XP / Vista / 7, así que puedes intentarlo como alternativa.

Los desarrolladores web en Windows tampoco están sin un cliente FTP. Filezilla es probablemente la alternativa gratuita más popular. Para conocer alternativas, consulte nuestra lista de clientes FTP gratuitos junto con herramientas similares.

Otros recursos de desarrollo útiles

100 herramientas de desarrollo web esenciales
Lo mejor de 2011: los mejores plugins y tutoriales jQuery útiles
Tutoriales de Ruby on Rails para principiantes de desarrollo web
7 tendencias de desarrollo web emocionantes para 2011

Conclusión

¡Hasta el momento el primer trimestre de 2012 ha comenzado con una explosión! Ya hemos visto contenido asombroso de diseñadores y desarrolladores web de todo el mundo. Los profesionales que construyen para la web tienen tantas herramientas a su disposición en comparación con 1-2 años atrás..

Espero que esta gran compilación de herramientas y recursos impulse su metodología para un mejor desarrollo. Me encanta trabajar con desarrolladores web y aprender sobre nuevos proyectos todo el tiempo. Sin embargo, solo hay mucho espacio para nuevos recursos que podemos incluir, por lo que es probable que me haya perdido algunas gemas. Si tiene ideas o sugerencias para recursos de desarrolladores web relacionados, háganoslo saber en el área de discusión posterior..