Desarrollo Web y Diseño 101

web_development_101¿Quieres conocer los conceptos básicos de desarrollo y diseño web? Increíble…


Pero hay un problema con esta línea de pensamiento, o algunos de ellos en realidad …

  • ¿Cuál es el propósito de tener un sitio web?? ¿Todos realmente necesitan uno??
  • Si es así, ¿cómo se construye un sitio web de calidad?? O, en otras palabras, ¿cómo aprende el desarrollo y diseño web básico que le permitiría construir ese sitio web de calidad usted mismo??
  • Más importante aún, ¿puedes crear un sitio web de calidad en tu PRIMER intento?? ¿O necesita años de experiencia detrás de usted, antes de que pueda esperar cualquier resultado superior al terrible??

Respondamos todo eso en este guía para principiantes sobre desarrollo y diseño web.

[Alerta de spoiler. Sí, puedes construir un sitio web de calidad en tu primer intento.]

Lo que está cubierto en esta guía?

Bien, lo primero es lo primero, ¡nos alegra que hayas seguido leyendo y que hayas decidido probar el desarrollo web! Así es como se desarrollará:

Los capítulos se presentan de una manera muy simple, con el contenido principal a la izquierda y los elementos accionables a la derecha. Al igual que:

Introducción a la guía: Capítulo 1

Ahora, cómo proceder:

  • Mientras estás en tu primera lectura: Le recomendamos que lea todo de arriba a abajo. Esto le dará una buena visión de 10,000 pies del tema y lo ayudará a comprender las partes más importantes del mismo. También le proporcionará herramientas y métodos básicos sobre cómo manejar tareas individuales.
  • Mientras estás en tu segunda lectura y más: Use el TOC y salte a la parte que más le interese. Además, siéntase libre de usar los botones para compartir al lado de cada capítulo, y envíe los enlaces a usted mismo o a sus amigos / seguidores que puedan estar interesados.

Listo? Vayamos al capítulo 1.

¿Para quién es esta guía??

Si desea aprender diseño y desarrollo web básico, esta guía es para usted. Cualquiera que sea tu motivación.

Además, no necesita ningún conocimiento técnico previo para comenzar (aparte de las “habilidades web” básicas). El objetivo de esta guía es ser una especie de curso “101” para todos los interesados ​​en crear sitios web y aprender el desarrollo web.

Aquí hay algunas razones comunes por las que podría estar interesado:

  • 1. NECESITA un sitio web para su negocio (y quieres ver si puedes construirlo tú mismo).
  • 2. Desea APRENDER el desarrollo web por pasión o interés temporal (nada malo sobre eso).
  • 3. NECESITA un sitio web para la escuela.
  • 4 4. Estás AYUDANDO a un amigo o familiar para que su sitio web esté en línea.

La idea principal que nos va a guiar

¡Esto es importante! Y no se enoje con nosotros si es un desarrollador web avanzado que lee esto, pero la idea principal que nos guiará a lo largo de todo este recurso de desarrollo web y diseño 101 es:

“El enfoque de menor resistencia”

Estos son los tres principios del enfoque de menor resistencia:

  • Fueron no descomponer las cosas a nivel molecular. Es decir. no vamos a llegar al fondo de cómo funcionan los lenguajes de programación o cómo funciona un servidor web.
  • Fueron no reinventar la rueda. Es decir. Si alguien ya ha resuelto un problema determinado y ha puesto a disposición la solución, la usaremos.
  • Fueron haciendo una solución simple increíble, en lugar de una solución complicada y aparentemente más funcional con errores y no comprensible.

CAPÍTULO 1: El Plan

Su idea, tipo de sitio web, nombre de dominio y alojamiento.

Antes de configurar un sitio web, necesitará un plan

Por irónico que pueda parecer, el exitoso programa de los 80 “The A-Team” nos ha enseñado que un buen plan es un Clave del éxito.

Si ha tenido un sitio web dentro de usted por un tiempo, entonces seguramente está entusiasmado con la única idea de finalmente publicarlo para que otros lo lean y naveguen.

Desea que su sitio web sea increíble. Probablemente ya sepas cómo se verá hasta cierto punto. O tal vez incluso tengas el logo perfecto listo.

Pero…

Esto no es para nada donde deberías comenzar. Si comienza con expectativas preestablecidas, esto solo lo llevará a mucha confusión en el camino y a un resultado inferior al final.

En cambio, piense en lo siguiente:

  1. Separarse de cualquier objetivo técnico que pueda tener. Como, por ejemplo, el objetivo de aprender tecnologías de sitios web o cierto software de sitios web.
  2. Hágase una pregunta principal: “¿Para qué necesito el sitio?”

No se trata de ti, se trata del objetivo del sitio.

Preguntas que debe hacerse antes de configurar su sitio web

  1. Lo que el sitio está destinado a lograr?
  2. ¿Cuál será la principal “cosa” presentada a través del sitio? (por ejemplo, su negocio, un producto, sus publicaciones de blog, etc.)
  3. ¿Tendrá el sitio web algún propósito especial? (por ejemplo, una tienda de comercio electrónico, la cartera de un fotógrafo, etc.)
  4. ¿Quién es el público objetivo??
  5. ¿Por qué están interesados ​​en el tema del sitio??
  6. Qué dolor resuelve el sitio para los miembros individuales de la audiencia?

Sobre estas últimas 3 preguntas, hablemos de la audiencia por un minuto …

Hay 2 reglas principales para la construcción de sitios web. Aquí está la regla # 1:

 El lector / visitante es lo primero, son la persona principal a la que su sitio web debe complacer.

En cierto modo, su sitio web no es suyo. Es de ellos.

(Regla # 2 que discutiremos en un minuto).

Olvidarse de esta simple guía puede llevarlo por el camino completamente equivocado, incluso hasta el punto en que se encuentre con un sitio web que es confuso para todos los que no lo son..

“¡Ugh! La gente simplemente no entiende de qué se trata este sitio. ¿Cómo pueden ser tan ignorantes? – Terminas pensando. Pero resulta que el ignorante fuiste tú.

La única forma de evitar eso es construir su sitio web con el lector en mente desde el primer momento.

Entonces … toma esa hoja de papel y responde todas las preguntas anteriores.

Una vez que haya terminado, tiene su conjunto de pautas definitivas sobre las que va a actuar mientras trabaja en su sitio web.

Esas respuestas serán una herramienta excepcionalmente poderosa a medida que avance. Podrá volver a ellos cuando tenga que tomar una decisión con respecto a su sitio web.

¿Deberías hacer * esto * o * eso *? Ve a la hoja de respuestas y descúbrelo. ¿Deberías usar una barra lateral ancha o estrecha? Vaya a las respuestas, descubra cuál es más probable que resuene con el lector objetivo. Y etc.

Nombres de dominio y alojamiento web

Si desea ser propietario de un sitio web, necesita un nombre de dominio y un proveedor de alojamiento web.

Bueno, está bien, técnicamente hablando, puede construir un sitio web de prueba en su propia computadora y luego ejecutarlo desde un servidor web local (también instalado como software en su computadora), pero esa no sería una solución utilizable para el 99% del casos, así que saltemos.

Entonces, un host y un dominio …

La mala noticia aquí es que ambos cuestan dinero.

La buena noticia … no es tanto dinero en el gran esquema de las cosas. Además, a medida que aprende, incluso puede lanzar múltiples sitios web pequeños en un solo nombre de dominio y bajo un único servidor web.

Pero empecemos por el principio.

Hospedadores web:

  • En términos simples, un proveedor de alojamiento web es donde se encuentra su sitio web y donde sus visitantes pueden encontrarlo. En cierto modo, los servidores web para sitios web son como apartamentos para humanos. Bajo el capó, los servidores web son empresas que alquilan sus servidores a cambio de dinero (… pequeños apartamentos para sus sitios web).
  • Para comenzar, un plan de alojamiento compartido estándar servirá. Puede obtenerlos para cualquier cosa desde tan solo $ 3 / mes. Aquí hay una buena comparación de los servidores web populares. Compruébelo y decida cuál de esas compañías le parece adecuada. Sin embargo, nuestras recomendaciones son para SiteGround, A2 Hosting y Dreamhost.

Dominios:

  • Si un proveedor de alojamiento web es un departamento, entonces un dominio es la dirección de ese departamento. Por ejemplo, el dominio de este sitio web es hostingfacts.com.
  • La forma de comenzar es elegir el nombre de dominio deseado y luego comprarlo en un registrador. Aquí hay una guía completa sobre cómo comprar un nombre de dominio, y aquí hay una lista de generadores de nombres de dominio.

 

Sugerencias y consejos para elegir un nombre de dominio

Bien, entonces ir a algún registrador de dominios y comprar el dominio es una cosa, pero ¿cómo elegir el nombre de dominio correcto??

Hay un par de escuelas:

  • Nombres de dominio de marca. Esos son dominios compuestos de palabras inexistentes. Piensa, cosas como Google.com o Yahoo.com. Antes de que aparecieran esas compañías, esas palabras no significaban nada. Lo bueno de un nombre de dominio de marca es que es … bueno, altamente personalizable, memorable y fácil de distinguir su sitio de los demás..
  • Nombres basados ​​en palabras clave. Se componen de palabras existentes, colocadas en una secuencia que describe el propósito del sitio. Piense, cosas como Pizza.com o StartBloggingOnline.com. Con un nombre de dominio como ese, sus visitantes podrán predecir con precisión el tipo de sitio web que están a punto de visitar. La desventaja es que esos dominios son generalmente menos calificables.
  • Nombres combinados. Esos son dominios de marca y dominios basados ​​en palabras clave juntos. Piensa en Facebook.com o Copyblogger.com. Dichos nombres sugieren “alguna” parte de la naturaleza del sitio web para el visitante, pero siguen siendo altamente calificables.

Algunas pautas generales independientemente del tipo de dominio que elija:

  • Haga que el dominio sea fácil de memorizar.
  • Hazlo corto y simple. Cuanto más largo es el dominio, más confuso es.
  • Obtenga un .com (si es posible). El .com es el principal “dominio de nivel superior” disponible. No te conformes con nada más.
  • Intenta evitar guiones. Obtenga su nombre en forma de blob único como “cakerecipes.com” en lugar de “cake-recipes.com”

Cosas para tener listo después de este capítulo:

  • Un nombre de dominio.
  • Un proveedor de alojamiento web.
  • Su hoja de respuestas: los objetivos de su sitio y cómo va a servir a la audiencia.

Necesitas más ayuda? Aquí hay más lecturas para ti:

  • ¿Por qué alojamiento compartido? Principales tipos de hosts comparados
  • 10 cosas que hacen que un proveedor de alojamiento web sea bueno
  • 12 reglas para elegir el nombre de dominio correcto
  • Una guía completa de planificación de sitios web

CAPÍTULO 2: Diseño y enmarcado

Tome un papel y un bolígrafo y rasque junto con la estructura de su sitio web

Bien, entremos en la fase de diseño.

Primero lo primero, aquí está la ética de trabajo que vamos a seguir aquí:

  • Usaremos lápiz y papel todo el tiempo que podamos, y solo entonces cambiaremos a la computadora. Créanos, cada minuto que pasa trabajando en su diseño en papel se ahorra una hora una vez que comienza a ajustar las cosas en la computadora.
  • Estamos haciendo un trabajo iterativo … Lo hacemos »verificamos los resultados» mejoramos »verificamos los resultados» repetimos hasta terminar.

En el capítulo 1, mencionamos algo que llamamos la regla # 1 de creación de sitios web. Ahora es el momento para la regla # 2:

Regla # 2 de creación de sitios web:

Piensa primero en el contenido.

El contenido es lo que importa en un sitio web. No es el diseño. Contenido.

La gente viene por el contenido. No vienen por el diseño. El diseño es solo un vehículo para entregar el contenido..

Nunca comience con el aspecto de su sitio web. Comience con el contenido. Contenido. Contenido. Contenido.

Entonces, ¿qué queremos decir con “contenido”? En resumen, es lo que la gente quiere obtener de su sitio web. Publicaciones de blog, productos en la tienda, hilos de foro si está creando un foro, artículos de noticias, su oferta comercial, etc..

“¿De Verdad? ¿El aspecto realmente no importa? ” – Usted pregunta.

En lugar de vencer esto, mira esta página:

Sitio web simple

Esta simple página web es, con mucho, la mejor explicación de qué es el diseño y para qué sirve en línea..

Así que recuerda, contenido primero!

Contenido y estructura del sitio web

Bien, ya que el contenido es lo más importante, debes tener (la mayoría) listo de antemano. O al menos, debe tener una buena idea de cuánto contenido habrá y de qué forma.

Nota. Sabemos que esta parte puede ser difícil. Comenzar con contenido parece bastante poco natural para el diseño de sitios web, pero al final es la mejor manera de obtener un resultado excelente. Así que piense en el contenido que desea compartir con el lector y cómo desea presentarlo..

El siguiente paso es seleccionar los tipos individuales de páginas que va a necesitar (como una página de inicio, una página de producto, una página de categoría, una página de información, una página de contacto, la página principal de ventas, alguna página de inicio de suscripción a boletines informativos, lista principal del blog, publicaciones individuales, una tienda quizás y cualquier otra cosa que parezca necesaria).

Piensa, ¿cuál es la forma más efectiva de organizar tu contenido en el sitio web??

Haz todo esto en papel. Es probable que sea más fácil y rápido para usted que aprender algo de software de dibujo de gráficos en el acto.

Ejemplo:

estructura de contenido

Rascar juntos una estructura metálica

Una estructura alámbrica en diseño web es simplemente un esquema o plano de página: una guía visual que representa el marco de un sitio web (Wikipedia nos dice).

¡Los wireframes son increíbles! Los usamos para la mayoría de las cosas que hacemos que están destinadas a aparecer en línea. Por ejemplo, aquí hay una estructura alámbrica para esta guía:

Rasca juntos un alambre

Como puede ver, nuevamente, eso está en papel. Aunque existen múltiples aplicaciones para este tipo de trabajo, en realidad no recomendamos usarlas. Pueden ser excelentes para diseñadores profesionales, pero un principiante o una persona intermedia solo perderá tiempo aprendiéndolos, y al final, no obtendrán muchas mejoras sobre lo que lograrían con lápiz y papel.

Entonces, cómo trazar?

Bueno, hay dos enfoques si eres un principiante:

  • Sigue la corriente si te sientes fuerte y simplemente retírate (no siempre es una solución perfecta).
  • Obtenga un conocimiento rápido sobre cómo cablear correctamente (generalmente mejor).

Para este último, vaya aquí: una gran guía.

(Asegúrese de crear una estructura alámbrica de cada tipo importante de página que haya enumerado en el paso anterior).

Cosas para tener listo después de este capítulo:

  • La mayor parte del contenido del sitio, o al menos la mayoría de lo previsto (por ejemplo, si confía en el contenido generado por el usuario, entonces es difícil tenerlo de antemano).
  • La estructura de contenido de su sitio web preparada como un gráfico.
  • Una estructura alámbrica de los tipos individuales de páginas que va a necesitar..

Otras lecturas:

  • 9 pasos para planificar el contenido del sitio web
  • ¿Nuevo en diseño web? Empieza aqui.

CAPÍTULO 3: UX y UI

Nunca subestimes la importancia de la experiencia del usuario y la interfaz de usuario

Como en, experiencia de usuario e interfaz de usuario.

WebDesignerDepot nos da una definición bastante poética de los dos:

UI es la silla de montar, los estribos y los reinados.

UX es la sensación de que puedes montar a caballo y amarrar a tu ganado.

Para una definición más práctica:

  • La interfaz de usuario es lo que ve el usuario cuando mira su sitio.
  • UX es lo que sienten al respecto.

El par, y qué tan bien se ejecuta, básicamente define la utilidad de su sitio web para el usuario final / visitante.

Tanto el diseño de UX como de UI son temas importantes en sí mismos, y hay muchos elementos más pequeños que juegan un papel en el resultado final.

En resumen, hay mucho que aprender si recién comienza su viaje.

Entonces, en lugar de tratar de limitar todo un curso de diseño de UX y UI aquí, permítanos señalar un puñado de elementos importantes y luego enviarlo a otro lugar para leer más.

Objetivos de usuario

UX se trata de objetivos de usuario … No tanto de sus objetivos … Objetivos de usuario.

¿Qué significa esto? En primer lugar, regrese al propósito de su sitio web: lo que trabajó en los capítulos anteriores. La razón por la que está creando el sitio web y cómo ayuda al usuario / visitante.

¿Cómo se traduce en la meta del visitante? … ¿Qué es lo que el visitante quiere obtener o lograr cuando visita su sitio? Ese es su objetivo.

¿Qué tan fáciles son esos objetivos para lograr?

A continuación, concéntrese en la siguiente pregunta:

  • ¿Puede el visitante lograr su objetivo fácilmente? – ¿Pueden obtener la información exacta para la que vinieron de una manera simple??

Para responder esto, debe volver a su estructura alámbrica, su estructura de contenido y verificar dos veces.

Asegúrese de que la estructura de contenido y las páginas que ha pensado tienen sentido desde el punto de vista del usuario. Asegúrese de que puedan navegar entre las páginas importantes libremente y de una manera no confusa.

Esencialmente, aquí, nos estamos asegurando de que el sitio web brinde valor a sus visitantes.

Difícil de resolver todo esto por tu cuenta, ¿no es así??

Se recomienda encarecidamente que consulte los recursos enumerados en la sección “lectura adicional” de este capítulo … pero también puede intentar “un hack”, por así decirlo.

Es decir, ¿piensa en lo que le frustra cuando visita sitios web similares al que desea crear? Quizás haya alguna información que sea realmente difícil de acceder o algún elemento de interfaz que haga que el sitio sea confuso.

Tome notas, saque conclusiones, no cometa los mismos errores con su sitio web.

Usando la emoción como herramienta

Cuando trabajas en la UI y UX de tu sitio, lo que básicamente estás buscando es invocar cierta emoción en tu visitante.

Desea que se sientan de cierta manera, lo que los convencerá de actuar de cierta manera. Por lo tanto, hacer que su sitio web sea realmente útil.

Para trabajar en la parte emocional del trabajo, una de las mejores herramientas es el color..

Los colores tienen diferentes significados en diferentes culturas. Comprender esas diferencias puede hacer que su trabajo sea mucho más fácil. Aquí hay una buena hoja de trucos.

Una vez que esté en el estadio de los colores que desea (posiblemente) usar, aquí hay un par de pautas generales cuando trabaje con colores:

  • Elija un esquema de color principal que consista en un par de colores que combinen bien. Aquí hay un gran generador de esquemas de color.
  • Elija un color que será su color de acento: el color que se usará para los botones de acción, los botones de compra, etc. Básicamente, cualquier cosa que necesite la atención del usuario.

Tipografía

En muchos casos, la tipografía es donde ganas (o pierdes) el juego de construcción de sitios web.

Es tan fácil olvidarse por completo de la tipografía y simplemente usar Arial para todo.

No recomendado.

En la actualidad, trabajar con fuentes personalizadas es muy sencillo y ni siquiera necesita hacer nada técnico para habilitar esas fuentes personalizadas en su sitio.

La gran tipografía grande está muy de moda en estos días, y también hace que el trabajo de un diseñador, especialmente el trabajo de un diseñador principiante, sea mucho más fácil.

Echa un vistazo a este sitio, por ejemplo:

bonobos

¿Notaste algo? Sí, las fuentes son enormes y se ven geniales!

Aquí se explica cómo trabajar en esto:

  • En general, cada diseño de sitio web necesita dos tipos de texto: encabezados y párrafos. En la mayoría de los casos, solo una fuente por cada.
  • Vaya a Fuentes de Google, la propia biblioteca de fuentes gratuitas de Google que puede usar en su sitio web, y busque una fuente de título que realmente disfrute.
  • Luego, tome el nombre de esa fuente y búsquela en Font Pair: es una biblioteca de combinaciones de fuentes prefabricadas que combinan bien.
  • Elige un emparejamiento que se vea increíble.
  • Anote los nombres de ambas fuentes, las necesitará más tarde.

Hacerlo de esta manera acelerará su proceso y aún así le dará un gran resultado.

Ejemplo, encontramos una fuente llamada Bree Serif en Google Fonts que disfrutamos bastante:

Bree-Serif

Luego, lo llevamos a Font Pair, y el sitio sugirió que Bree Serif funciona bien con Open Sans. Perfecto:

Bree-Serif-abierto-sans

La estructura final

Finalmente el ultimo paso!

El objetivo de este capítulo es llegar a un diseño / estructura final que vaya a utilizar para su sitio. En este punto, debe estar seguro de las cosas que desea hacer con su diseño y su interfaz de usuario.

Cosas para tener listo después de este capítulo:

  • Sus objetivos de usuario claramente enumerados.
  • Su estructura alámbrica se verificó dos veces para asegurarse de que esos objetivos no sean confusos.
  • El esquema de color seleccionado.
  • La tipografía descubrió.
  • Todo el diseño del sitio / estructura / organización del sitio web.

Otras lecturas: 

  • Revista UX
  • Cabina UX
  • La psicología y la emoción detrás del color en el diseño web.
  • ¿Qué es el diseño de experiencia de usuario? Descripción general, herramientas y recursos
  • Establecer objetivos comerciales inteligentes para un sitio web
  • 8 reglas para crear una tipografía efectiva

CAPÍTULO 4: WordPress, HTML o Plantillas?

Decida qué camino tomar: sistemas de gestión de contenido o codifíquelo desde cero

Aquí es donde comienza el trabajo real, sucio de manos, bajo el capó!

Esta también es probablemente la parte más aterradora del proceso (¡admítelo!).

Por una vez, es el momento adecuado para dejar a un lado el lápiz y el papel y comenzar a trabajar con algún software.

Y justo al salir, hay un montón de preguntas …

  • ¿Debo aprender HTML?
  • ¿Qué hay de CSS??
  • ¿Las plantillas HTML de sitios web ya hechas me ayudarán??
  • ¿Necesito aprender un lenguaje de programación como PHP?
  • Escuché que WordPress es la forma de construir un sitio en estos días.
  • Vi ese anuncio de Squarespace Super Bowl. Que pasa con eso?
  • ¿Cómo se llama Joomla? O Drupal?
  • y sigue y sigue y sigue.

La respuesta a todos esos es sí.

Como en sí, puede hacer una o todas esas cosas, y solo depende de usted decidir qué camino elegir.

Lo que estamos tratando de decir es que no existe el mejor enfoque n. ° 1 aquí. Todo depende de qué tan involucrado desee involucrarse con el desarrollo web, qué tanto de los conceptos básicos de construcción de sitios web desea aprender, qué tan rápido necesita que se haga un sitio de calidad y qué tan personalizable desea que sea después..

Así es como vamos a proceder desde este capítulo en adelante. primero, elige la persona que mejor te define:

  • una) Quiero aprender de qué se trata el desarrollo web, todo lo básico, todo el funcionamiento interno de un sitio web y todos los mecanismos que hacen que un sitio web funcione.
  • si) Quiero aprender a usar un creador de sitios web confiable que pueda manejar la mayor parte del trabajo pesado por mí.
  • C) No se que hacer. Solo quiero un sitio web que pueda construir yo mismo y que funcione correctamente.

Respondió a)? Ir al Capítulo 5.

Respondido b)? Ir al Capítulo 6.

Respondido c)? Siéntase libre de revisar este artículo y luego regresar (debería ayudarlo a seleccionar la ruta perfecta):

  • Las 8 mejores plataformas de creación de blogs y sitios web revisadas … Cada plataforma se describe junto con sus pros y sus contras, y el recurso también sugiere la mejor opción disponible (Wix o SB) para sus necesidades específicas.

¿Lo has leído? ¡Excelente! Entonces, ¿cuál de las personas anteriores te describe mejor? a o B)?

Las herramientas que pueden ser útiles en el camino:

  • Gráficos: Paint.NET, Gimp, Pixlr.
  • Escritura de código: Notepad ++, TextWrangler, SublimeText.
  • Dirección del trabajo: Trello.
  • Diseño: esquemas de color, fuentes de Google, las herramientas desde aquí.
  • Fotografía: Unsplash, AllTheFreeStock

CAPÍTULO 5: Introducción a HTML, CSS & Javascript

Cómo los sitios web son una realidad incorporada

En este capítulo, vamos a señalar los conceptos básicos básicos del desarrollo web, explicar los términos más importantes y luego enviarlo a algunos recursos específicos donde puede ampliar sus conocimientos y habilidades..

HTML

HTML es el lenguaje de los sitios web. Cada página web está construida o convertida a HTML en algún momento.

Por ejemplo, para ver la estructura HTML de esta guía que está leyendo aquí, simplemente presione “Ctrl + U” en su teclado.

HTML define cada bloque que ves en una página web. Al final del día, para mostrar cualquier cosa en una página web, debe convertirse a HTML.

Para aprender HTML de manera efectiva, le recomendamos que se registre en uno de los cursos (gratuitos o de pago) disponibles en la web. Algunos de los mejores se pueden encontrar en Codeacademy o Treehouse.

Por ejemplo, aquí hay una sección específica sobre Codeacademy sobre HTML y CSS.

Página de inicio de CodeCademy

Ese es el enfoque integral de HTML.

CSS

CSS, para omitir los aburridos detalles técnicos, es responsable de diseñar todo lo que es visible en una página web.

CSS toma etiquetas HTML y luego las estructura y les agrega estilo. Cosas como: texto en negrita, ajustes de color, sombras, diseños, incluso animaciones, ahora se realizan principalmente con CSS.

Para una mejor comprensión de cómo funciona exactamente esto, pase a este curso rápido en Codeacademy.

Para un aprendizaje más profundo, consulte también las secciones de CSS en Codeacademy o Treehouse.

JavaScript, jQuery, Bootstrap, etc..

JavaScript es un lenguaje de programación que le permite introducir algunas acciones dinámicas en su sitio web. Por ejemplo, puede hacer cosas como validar formularios web o interactuar con el usuario de una manera más ágil sin tener que volver a cargar la página en la que se encuentra. Aquí hay un buen tutorial de w3schools.

Teniendo eso en cuenta, jQuery es una biblioteca de JavaScript que le permite crear cosas avanzadas con menos codificación. Muy útil para un desarrollador web. Aprende más aquí.

Finalmente, Bootstrap es un invento muy interesante. Presentado originalmente por Twitter, es básicamente un entorno front-end que acelera el proceso de construcción de un sitio web al ofrecer la mayoría de los elementos comunes del sitio ya preconstruidos. Suena complicado, ¿no??

Pero no lo es. Solo echa un vistazo a este curso de iniciación en Codeacademy (por cierto, así es como aprendimos originalmente Bootstrap).

Cosas para tener listo después de este capítulo:

  • Básicamente, el primer borrador de su sitio web HTML / CSS completamente construido. A partir de ahí, puede comenzar a iterar y mejorar el resultado final.

CAPÍTULO 6: Plataformas de creación de sitios web

¿Estás configurando tu primer sitio? Pruebe plataformas de sitios web gratuitas como WordPress, Joomla o Drupal

Capítulo 6: Plataformas de creación de sitios web

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Hay más creadores de sitios web de los que puedes sacudir. (Si eres el tipo de persona que sacude las cosas).

Ok, bromas aparte.

Claramente, si no tiene el deseo de aprender a codificar las cosas a mano, seguramente son múltiples soluciones que pueden ayudarlo.

Nota. Tenga en cuenta que todo lo que discutimos en los capítulos 1-4 todavía se aplica aquí. Incluso si opta por una solución de creación de sitios que no es práctica, debe tener cuidado para que el producto final sea amigable para los usuarios y esté en sintonía con los objetivos de todos. Esas herramientas de construcción de sitios son exactamente eso … herramientas.

Comenzando con los que son más fáciles de entender:

SquareSpace

La única plataforma de sitio web que se anuncia durante el Super Bowl.

En resumen, una solución muy útil que puede ser utilizada por cualquier persona. No se requieren habilidades previas.

Le permite crear sitios web clásicos, blogs, incluso tiendas de comercio electrónico, incluso escribimos una reseña sobre ellos. La interfaz y todo el proceso de uso son bastante fáciles de entender, además los chicos de Squarespace proporcionan muchos tutoriales interesantes. Míralos aquí.

WordPress

Sinceramente, amamos WordPress.

La mayoría de las veces, es la plataforma perfecta para construir un sitio web. Tiene el equilibrio perfecto entre complejidad y facilidad de uso, y es básicamente personalizable sin fin.

Animación de WordPress

Además, actualmente es la plataforma de sitio web más popular de todas. Según lo compartido por el creador de WordPress – Matt Mullenweg – WordPress ahora controla el 25% de todo el internet. ¿Pueden todas esas personas estar equivocadas??

De acuerdo, para comenzar con WordPress básicamente solo necesitas tu dominio y alojamiento. El software de WordPress en sí mismo es completamente gratuito..

Para comenzar, siéntase libre de seguir uno de estos caminos:

a) “La ruta de inicio rápido”

  • Vaya aquí para aprender la forma simplificada de instalar WordPress y lanzar su sitio en una tarde.
  • Elija un tema gratuito del directorio oficial: asegúrese de que esté en sintonía con los objetivos de su sitio y que el diseño / diseño no esté lejos de su estructura deseada (lo ajustará ligeramente).
    • Consulte estos dos recursos para aprender a personalizar un tema existente.
    • Alternativamente, puede elegir un tema premium multipropósito que se puede ajustar a través de una práctica interfaz de usuario (sin codificación). El tema X es un buen ejemplo de tal cosa.
  • Instale algunos de los complementos más populares y mejores para obtener funciones adicionales.

b) “El camino en profundidad”

  • Comience por aprender WordPress a través de un curso en línea. Treehouse ofrece una increíble.
  • Elija su tema y complementos como se indicó anteriormente. Alternativamente, construye tu propio tema desde cero.

Al final, WordPress es probablemente la plataforma de sitio web más versátil del mercado. Con él, puede crear prácticamente cualquier tipo de sitio web, no solo blogs o sitios comerciales simples. Aquí hay una lista de 47 (!) Diferentes formas de usar WordPress, solo para que pienses.

Joomla y Drupal

Aunque son ligeramente diferentes entre sí, Joomla y Drupal son excelentes sistemas de gestión de contenido para proyectos web más avanzados..

No son tan fuertes en cuanto al diseño, pero son altamente personalizables y capaces de manejar cualquier tipo de sitio web que pueda tener en el plan.

A veces, dependiendo de la complejidad de su proyecto, pueden requerir mucho más tiempo para dominarlo y mucho más esfuerzo para lograrlo..

Para una capacitación más profunda, hay cursos increíbles en Lynda.com, tanto para Joomla como para Drupal..

Cosas para tener listo después de este capítulo:

  • El primer borrador de su sitio web completamente construido, sin importar si decidió usar WordPress u otra plataforma.
  • Asegúrese de que está en sintonía con sus objetivos iniciales, el público objetivo y que ofrece una buena experiencia de usuario.

CAPÍTULO 7: Diseño móvil receptivo

Más del 60% de las personas usan teléfonos móviles y tabletas para navegar por la web.

La capacidad de respuesta móvil es ahora un aspecto muy importante de la creación de sitios web, probablemente más de lo que nunca ha sido.

Aquí se trata todo el problema:

Básicamente, en este momento, hay más personas que usan dispositivos móviles para acceder a la web que nunca antes. De hecho, se estima que ahora hay más usuarios de Internet móvil que usuarios de Internet de escritorio (75.1% frente a 52.7%).

Pero hay un problema.

No todos los diseños de sitios web serán optimizados para ser vistos en dispositivos móviles directamente.

Algunos problemas comunes incluyen:

  • las fuentes son demasiado pequeñas,
  • el diseño en sí no se ajusta en absoluto a una pantalla más pequeña,
  • o la tecnología utilizada para construir el sitio no está disponible en dispositivos móviles.

Aquí es donde entra en juego la idea de la capacidad de respuesta móvil.

Un sitio web receptivo responde al entorno en el que se está viendo. Si se trata de una computadora de escritorio, el sitio web se representa de cierta manera. Si es un dispositivo móvil, se procesa de otra manera.

Aquí hay una mejor explicación: ¿Qué diablos es el diseño web receptivo??

Entonces, lo que debería hacer ahora es verificar y asegurarse de que su sitio web funcione en dispositivos móviles. Use sus propios dispositivos para verificar esto, pero también pruebe la prueba móvil de Google, o vaya a una herramienta como Responsive Design Tester.

Si hay problemas, debe solucionarlos.

Algunas soluciones:

  • Diseño web receptivo: cómo hacerlo
  • Cómo hacer que el sitio web responda en aproximadamente 15 minutos

CAPÍTULO 8: Reuniendo todo

Ya sabes lo básico, ahora es tu turno

Espera, ya casi llegamos!

Este es el último capítulo de nuestro largo viaje..

En este punto, debe tener su primer sitio web construido … Ya sea con WordPress, HTML / CSS construido a mano, algún creador de sitios web o cualquier otra herramienta que haya seleccionado para el trabajo.

En resumen, felicidades! Pero todavía hay un par de cosas que vale la pena hacer:

  • Vuelva a verificar las cosas que discutimos en los capítulos 1 y 2. Asegúrese de que los objetivos realmente funcionen para el usuario final y que el sitio web no sea confuso.
  • Valide la estructura de su código a través del servicio de validación de marcado del W3C.
  • Compruebe si no hay problemas de seguridad con el sitio. Usa el escáner de Sucuri para eso.
  • Obtenga comentarios de la comunidad. Comprueba lo que otras personas piensan de tu trabajo. Los foros en Sitepoint pueden ser buenos para eso.

Si esa es su primera lectura de este recurso, le recomendamos que vuelva un par de veces y lo trate como un archivo de referencia para su educación superior..

Como dijimos al principio, siéntase libre de usar el TOC y navegar de un capítulo a otro y de un recurso a otro como mejor le parezca.

Por último, tenemos curiosidad … ¿cuál es su mayor desafío cuando se trata de construcción de sitios web, desarrollo web o diseño? Por favor comparta en los comentarios o vía Twitter. Todos somos oídos!

Gracias por leer, eres increíble!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map