Cómo aprender diseño web

Con el desarrollo de tantos lenguajes de programación, estilo y marcado, aprender diseño web se está volviendo más complejo que nunca. Afortunadamente, existen muchas herramientas para ayudarlo a comenzar. Busca algunos recursos básicos,...

Método 1 de 4:

Encontrar recursos para el diseño web

  1. Foto 1 de Cómo aprender diseño web

    Consulte en línea los cursos y lecciones de diseño web. Internet está lleno de información detallada sobre el diseño web y gran parte de ella está disponible gratuitamente. Puede comenzar tomando algunos cursos en línea gratuitos para Udemy o CodeCademy, o unirse a una comunidad de codificación como freeCodeCamp. También puede encontrar videos tutoriales para diseño web en YouTube.[1]

    1. Si sabe exactamente lo que está buscando, intente realizar una búsqueda utilizando términos específicos (p. ej., "selectores de clase de lección CSS").
    2. Si es un principiante sin experiencia en diseño web, comience por aprender los conceptos básicos de codificación HTML y CSS.
  2. Foto 2 de Cómo aprender diseño web

    Busque una clase en un colegio o universidad local. Si asiste a un colegio o universidad, consulte el departamento de informática de su escuela o consulte su catálogo de cursos para averiguar si hay cursos de diseño web. Si no está en la escuela, verifique si hay colegios o universidades cerca de usted que ofrezcan cursos de educación continua en diseño web.

    1. Algunas universidades ofrecen clases de diseño web en línea que están abiertas a cualquier persona que desee inscribirse. Visite sitios web como Coursera.org para encontrar clases de diseño web gratuitas o asequibles impartidas por instructores universitarios.
  3. Foto 3 de Cómo aprender diseño web

    Consigue algunos libros de diseño web en la librería o biblioteca. Un buen libro de diseño web puede ser una referencia invaluable a medida que aprende y practica su oficio. Busque libros de diseño web generales actualizados o formatos de codificación e idiomas específicos que le gustaría aprender.[2]

    1. Leer revistas y artículos en blogs de diseño web también es una buena manera de aprender nuevas técnicas, inspirarse y mantenerse al día con las últimas tendencias.
  4. Foto 4 de Cómo aprender diseño web

    Descarga o compra software de diseño web. Un buen software de diseño web puede ayudarlo a crear sitios web de manera más eficiente y efectiva, y también es excelente para ayudarlo a aprender los entresijos de la aplicación de codificación, scripts y otros elementos clave de diseño.[3] Puedes aprovechar el uso de herramientas como:

    1. Programas de diseño gráfico como Adobe Photoshop, GIMP o Sketch.
    2. Herramientas de creación de sitios web como WordPress, Chrome DevTools o Adobe Dreamweaver.
    3. Software FTP para transferir sus archivos terminados a su servidor.[4]
  5. Foto 5 de Cómo aprender diseño web

    Encuentre plantillas para sitios web con las que jugar mientras comienza. No hay nada de malo en usar plantillas mientras se aprenden los conceptos básicos del diseño web. Busque plantillas de páginas web que le gusten y mire detenidamente el código para tener una idea de cómo el diseñador armó la página. También puede experimentar cambiando el código y agregando sus propios elementos a la plantilla.[5]

    1. Busque plantillas de sitios web gratuitas para comenzar o experimente con las plantillas que vienen con su software de diseño web.

Método 2 de 4:

Dominar HTML

  1. Foto 6 de Cómo aprender diseño web

    Aprenda las etiquetas HTML básicas. HTML es un lenguaje de marcado simple que se utiliza para dar formato a los elementos básicos de un sitio web. Puede formatear varios elementos de su sitio web usando etiquetas. Las etiquetas aparecen entre paréntesis antes y después de cada elemento y brindan instrucciones sobre cómo funcionará ese elemento en la página. Para cerrar la etiqueta, coloque / delante de la etiqueta final dentro de los soportes de esquina.[6]

    1. Por ejemplo, si desea que parte de su texto sea Bravo, incluiría el artículo con la etiqueta de la siguiente manera: Este texto está en negrita.
    2. Varios marcadores comunes incluyen

      (párrafo), (un ancla que define el texto relacionado) y (una fuente que puede ayudar a definir varios atributos del texto, como el tamaño y el color).

    3. Otras etiquetas definen las diferentes partes del propio documento HTML. Por ejemplo, se utiliza para contener información sobre una página que no será visible para el espectador, como palabras clave o una descripción de una página que aparecerá en los resultados del motor de búsqueda.
  2. Foto 7 de Cómo aprender diseño web

    Aprenda a usar los atributos de las etiquetas. Algunas etiquetas necesitan información adicional para especificar cómo deberían funcionar. Esta información adicional aparece en la etiqueta de inicio y se denomina "atributo". El nombre del atributo aparece inmediatamente después del nombre de la etiqueta, separado por un espacio. El valor del atributo se adjunta al nombre del atributo con un signo = y entre comillas.[7]

    1. Por ejemplo, si desea que parte de su texto sea de color rojo, puede hacerlo usando el marcador y el un atributo de color de fuente como este: Este texto es rojo.
    2. Muchos de los efectos que alguna vez se lograron de forma rutinaria con los atributos de etiquetas HTML, como establecer diferentes colores de fuente, ahora se realizan generalmente con la codificación CSS.
  3. Foto 8 de Cómo aprender diseño web

    Experimente con elementos anidados. HTML también le permite incrustar elementos en otros elementos para crear un formato más complejo. Por ejemplo, si desea definir un párrafo y luego cursiva parte del texto en el párrafo, puede hacerlo de la siguiente manera:[8]

    1. I amor ¡codificación!

  4. Foto 9 de Cómo aprender diseño web

    Familiarícese con los elementos vacíos. Algunos elementos HTML no requieren etiquetas de apertura y cierre. Por ejemplo, si inserta una imagen, solo necesita una etiqueta "img" que contenga el nombre de la etiqueta y todos los demás atributos necesarios (como el nombre del archivo de imagen y cualquier texto alternativo que desee agregar para fines de accesibilidad). Por ejemplo:[9]

    1. Foto 10 de Cómo aprender diseño web

  5. Foto 11 de Cómo aprender diseño web

    Ver el diseño básico de un documento HTML. Para que su sitio web basado en HTML funcione correctamente, necesitará saber cómo formatear toda la página. Esto incluye definir dónde comienza y termina su código HTML, así como el uso de etiquetas para determinar qué partes del código se mostrarán en relación con cuáles están allí para proporcionar información básica oculta. Por ejemplo:[10]

    1. Utilice la etiqueta para definir su página como un documento HTML.
    2. Luego incluya toda su página en las etiquetas para definir dónde comienza y termina su código.
    3. Coloque cualquier información que no se mostrará al espectador, como el título de la página, las palabras clave y la descripción de la página, en las etiquetas.
    4. Defina el cuerpo de su página (es decir, cualquier texto e imágenes que desee que vea el espectador) con las etiquetas.

Método 3 de 4:

Introducción a CSS

  1. Foto 12 de Cómo aprender diseño web

    Utilice CSS para aplicar estilos a sus documentos HTML. CSS es un lenguaje de estilo que le permite aplicar diferentes estilos y elementos de diseño a su página web. Por ejemplo, si desea aplicar de forma selectiva una fuente específica o un color de texto a algunos de los elementos de texto de su página, puede crear un archivo CSS y luego puede insertar el archivo CSS en su documento HTML donde lo desee.[11]

    1. Por ejemplo, si desea que un archivo CSS cambie todos los elementos de párrafo de su documento HTML a verde, puede crear un archivo .css que contenga las líneas:
      1. pags {
      2. color verde;
      3. }
    2. A continuación, guardará el archivo con un nombre como style.css.
    3. Para adjuntar una hoja de estilo a su documento HTML, debe insertarla como un enlace en blanco en las etiquetas. Por ejemplo:
  2. Foto 13 de Cómo aprender diseño web

    Familiarícese con los elementos del conjunto de reglas CSS. Una pieza separada de código CSS se denomina "conjunto de reglas". El conjunto de reglas contiene los diversos elementos que determinan lo que desea que haga su código. Incluyen:[12]

    1. El selector que define el elemento HTML que desea diseñar. Por ejemplo, si desea que su conjunto de reglas afecte a los elementos del párrafo, debe comenzar su conjunto de reglas con la letra 'p'.
    2. La declaración que define las propiedades a las que desea aplicar estilo (como el color de fuente). La declaración está encerrada entre llaves {}.
    3. La propiedad que especifica qué propiedad del elemento HTML desea aplicar estilo. por ejemplo, dentro

      etiqueta, puede especificar que desea estilizar el color del texto.

    4. El valor de la propiedad especifica cómo desea cambiar la propiedad (por ejemplo, si la propiedad es un color de fuente, el valor de la propiedad será "verde").
    5. Puede cambiar varias propiedades diferentes dentro de una declaración.
  3. Foto 14 de Cómo aprender diseño web

    Aplique CSS a su texto para que su conjunto se vea bien. CSS es útil para aplicar varios efectos a su texto sin tener que codificar cada propiedad por separado en HTML. Experimente cambiando diferentes propiedades de conjunto en CSS, incluyendo:[13]

    1. Color de fuente
    2. Tamaño de fuente
    3. Familia de fuentes (por ejemplo, el rango de fuentes que desea usar en su texto)
    4. Alineación del texto
    5. Altura de la línea
    6. Espacio entre letras
  4. Foto 15 de Cómo aprender diseño web

    Experimente con cuadros y otras herramientas de diseño CSS. CSS también es útil para agregar elementos visuales atractivos a su página, como cuadros de texto y tablas. También puede usarlo para cambiar el diseño general de su página y determinar dónde se ubican los diferentes elementos entre sí.[14]

    1. Por ejemplo, puede definir atributos como el ancho y el color de fondo de un elemento, agregar un borde o establecer campos que crearán espacio entre diferentes elementos en su página.

Método 4 de 4:

Trabajar con otros lenguajes de diseño

  1. Foto 16 de Cómo aprender diseño web

    Aprenda JavaScript si desea agregar elementos interactivos a sus páginas. JavaScript es un excelente lenguaje para aprender si está interesado en agregar funciones más avanzadas a sus sitios web, como animaciones y ventanas emergentes.[15] Tome un curso o busque tutoriales en línea sobre cómo codificar en JavaScript e incorporar estos elementos codificados en sus páginas web | usando HTML.

    1. Antes de aprender a trabajar bien con JavaScript, deberá conocer los conceptos básicos de la creación de páginas en HTML y CSS.[16]
  2. Foto 17 de Cómo aprender diseño web

    Aprenda jQuery para que JavaScript sea más fácil de cifrar. jQuery es una biblioteca de JavaScript que puede simplificar la programación de Java al permitirle acceder a varios elementos de JavaScript precodificados. jQuery es una gran herramienta si ya está familiarizado con los conceptos básicos de la codificación de JavaScript.[17]

    1. Puede acceder a la biblioteca jQuery y a muchos otros recursos valiosos a través de jQuery.org, el sitio web de la Fundación jQuery.
  3. Foto 18 de Cómo aprender diseño web

    Aprenda lenguajes del lado del servidor si está interesado en el desarrollo de backend. Si bien HTML, CSS y JavaScript son ideales para los diseñadores web que se enfocan en lo que el usuario ve y hace en el sitio web, los lenguajes del lado del servidor son útiles si está más interesado en el trabajo detrás de escena. Si desea aprender sobre el desarrollo de back-end, concéntrese en aprender lenguajes como Python, PHP y Ruby on Rails.[18]

    1. Estos lenguajes son útiles para gestionar y procesar datos que el usuario no ve. Por ejemplo, PHP se puede usar para crear herramientas seguras para crear contraseñas en sitios web que requieren inicio de sesión.

Archivos de ayuda

Foto 19 de Cómo aprender diseño web

Hoja de trucos HTML

Foto 20 de Cómo aprender diseño web

Hoja de trucos de CSS

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir
error: Content is protected !!