Compartir:
Creación de interfaces web por dónde empezar
Más que ladrillos y cemento, los códigos de computadora y los píxeles son la base de la economía del siglo XXI. Si alguna vez has mirado “Fuente de la página” o “Herramientas de desarrollo” En tu navegador, es probable que hayas encontrado un montón de texto y te hayas preguntado cómo hace que funcione la página web..
Los desarrolladores web llaman solraphical User yonterfaces (GUIs) colectivamente las Interfaz de una página web, en contraste con el back-end. El front-end es lo que el usuario puede manipular, tomar medidas y utilizar de otro modo. El back-end se puede considerar como la infraestructura que contiene y soporta toda la información y las tareas implícitas en el front-end..
Este artículo es sobre el front-end. Mapearemos el territorio para que pueda comprender las distinciones y las capacidades que hacen que el front-end sea lo que es, y le mostraremos cómo comenzar a tener sentido y uso de las herramientas del desarrollador web para crear aplicaciones atractivas y atractivas. páginas web interactivas.
Diseño web versus desarrollo front-end
En las grandes organizaciones, el diseño y el desarrollo son tareas realizadas por equipos de profesionales con diferentes habilidades. Los diseñadores crearían un diseño visual y de interacción específico; Los desarrolladores de front-end lo implementarían.
Para una persona, sin embargo, no hay razón para limitar su exploración: solo porque esté interesado en el desarrollo, no significa que no tenga una visión para el diseño y viceversa. Una cantidad modesta de conocimiento sobre tecnologías web básicas o principios de diseño puede resultar enormemente beneficiosa en su carrera o negocio.
El desarrollo de front-end es más y menos una actividad de codificación. Más porque tiene más de la mitad de diseño en su forma de pensar: muchos conceptos se extraen del mundo de la producción impresa. Menos porque mientras usa el código de la computadora, ese código es una variedad menos compleja, más indulgente y requiere menos conocimientos básicos de programación que otros lenguajes de programación web (muchos de los cuales se pueden encontrar en el back-end). Learn - Programación web Qué lenguaje de programación aprender - Programación web Hoy vamos a echar un vistazo a los distintos lenguajes de programación web que impulsan Internet. Esta es la cuarta parte en una serie de programación para principiantes. En la parte 1, aprendimos lo básico de… Leer más .
El front-end de la web: marcado, hoja de estilo y lenguajes de programación
La mayoría de las páginas web están construidas con un trío de tecnologías: lenguaje de marcado de hipertexto (HTML), hojas de estilo en cascada (CSS) y JavaScript (JS):
- Lenguajes de marcado Como HTML marca un documento con etiquetas. Las etiquetas demarcan el contenido semántico y estructuran el documento. Los documentos estructurados pueden ser de estilo.
- CSS es un lenguaje de hojas de estilo y descendiente de las instrucciones de estilo de impresión a un compositor de páginas (que crea la imagen imprimible final para una imprenta); En la web, CSS dicta la presentación de contenido como tipografía y diseño en general, así como la colocación de gráficos..
- JavaScript, a diferencia de los dos anteriores, es un lenguaje de programación. JS maneja la interacción y la entrada del usuario, y se enfoca en los eventos que produce un usuario. Para completar la imagen un poco más, lo contrario de un paradigma basado en eventos es uno donde la programación se ejecuta independientemente de la entrada del usuario.
HTML
Han pasado más de veinte años, y el propósito central de HTML sigue siendo el mismo: separar el texto destinado a un lector de la estructura necesaria para analizar el documento..
Porqué lo necesitas
¿Por qué el HTML sigue siendo importante? En pocas palabras, HTML es donde reside el significado semántico de su contenido. Eso es necesario para los lectores de máquinas como las arañas de los motores de búsqueda y los lectores de pantalla (para accesibilidad). Con el tiempo, la relevancia de separar lo semántico frente a lo estructural ha aumentado en lugar de disminuir con el tiempo. La versión más reciente de HTML (5) introdujo etiquetas como
Anatomía de un elemento HTML
Los elementos HTML, como mínimo, son pares de etiquetas de apertura y cierre, cada etiqueta encerrada en
El resultado de este marcado:
Texto de párrafo simple aquí.
Crédito Extra (Avanzado)
Desarrolladores de todo tipo están obsesionados con la velocidad de ejecución. Con este fin, optimizarán los propios idiomas para la velocidad en la escritura y la creación de líneas legibles. Esto se llama sugarcoating sintáctico. La comunidad HTML ha producido algunos de estos esfuerzos..
¿Por qué usar un acceso directo centrado en el desarrollador cuando, presumiblemente, eres un principiante? Al crear cosas en un marcado más simple, puedes enfocarte en la intención, no en la expresión, al mismo tiempo que la validas contra un último estándar de todos. Los archivos de origen que genere en el marcado simplificado se compilarán en HTML válido o el compilador generará un error en un número de línea específico. Podrías encontrar eso más instructivo que cazar “sopa de etiquetas” para un soporte de ángulo que falta. Cada uno de ellos requiere una pieza intermedia de software para compilarlos en HTML. (Es extra crédito, después de todo.
- Haml (lenguaje de marcado de abstracción HTML) | Requiere Ruby (sobre el cual hemos escrito cuidadosamente antes de 3 maneras interactivas, divertidas y gratuitas para comenzar a aprender el lenguaje de programación de Ruby 3 formas interactivas, divertidas y gratuitas para comenzar a aprender el lenguaje de programación de Ruby Ruby es un lenguaje expresivo de muy alto nivel para scripting Se usa en la Web principalmente como parte del marco de desarrollo web de Ruby on Rails, pero también es independiente. Si tiene curiosidad acerca de lo que Ruby (no… Leer más) compilar
- Jade | Requiere Node.js (encontrará una introducción aquí ¿Qué es Node.JS y por qué debería importarme? [Desarrollo web] ¿Qué es Node.JS y por qué debería importarme? [Desarrollo web] JavaScript es solo un lado del cliente lenguaje de programación que se ejecuta en el navegador, ¿verdad? Ya no. Node.js es una forma de ejecutar JavaScript en el servidor; pero también es mucho más. Si… Leer más) para compilar
- Delgado | Requiere Ruby para compilar (como arriba)
CSS
CSS permite que el contenido semántico y la presentación de documentos se alojen por separado, lo que hace que las características estilísticas como el diseño, los colores y la tipografía sean portátiles y aplicables a diferentes documentos. Cuando el contenido y el diseño visual están separados, el desarrollador gana más flexibilidad y consistencia en el diseño visual.
Porqué lo necesitas
Los sitios web sin estilo se ven terribles y poco atractivos. Si bien pueden ser legibles, CSS es la piedra angular de la jerarquía de información visual debido al diseño que habilita. Por ejemplo, la figura a continuación ilustra en parte el menú de navegación superior actual de makeuseof.com, sin ningún CSS aplicado.
Observe que, aparte de la tipografía y el color, el menú sin estilo es vertical porque ese es el estilo predeterminado del navegador. Es poco probable que desee volver a crear Internet en 1990, por lo que querrá una dosis continua y saludable de conocimiento de CSS para ser verdaderamente competente. Además, con el aumento de dispositivos de diferentes tamaños y conectados como iPhones, tabletas, etcétera, una de las habilidades más importantes se ha convertido en “Diseño de respuesta,” O páginas web que se adaptan a diferentes tamaños de pantalla. Todo esto se logra a través de CSS.
Anatomía de una regla de CSS
Las reglas de CSS se escriben en uno de tres lugares: a) en línea dentro de un elemento, b) creando una