La clase comienza conversando sobre el entorno al desarrollo web. En el caso de la ilustración el entorno seria una tableta de dibujo utilizando los programas como ilustrator. Para el caso del desarrollo web lo mas básico es el editor de texto, el lenguaje html y css entre otros le dan formato al proyecto, los navegadores como google chrome toman el código y lo procesan para proyectar en nuestras pantallas.
Aprenderemos manejar los siguientes términos que ayudaran a clasificar el área de trabajo:
Back-end
(es ver la parte de atrás del trabajo, el código, la matrix)
El backend es la parte del desarrollo web que se encarga de que toda la lógica de una página web funcione. Se trata del conjunto de acciones que pasan en una web pero que no vemos como, por ejemplo, la comunicación con el servidor.
El encargado de desarrollar el back-end se pasa el día entero toqueteando diferentes y variados códigos de programación en lenguajes como PHP, Java o .Net. El desarrollador debe ser meticuloso y cuidadoso en su trabajo ya que un pequeño despiste y la página web se cae.
- Un buen desarrollador de backend debe saber configurar los servidores. O al menos, saber lo suficiente para hablar con el responsable de sistemas y explicarle sus necesidades.
- Debería manejar al menos un CMS, por ejemplo WordPress.
- Saber de Metodologías de programación.
- Conocer al dedillo los fundamentos de la programación y manejarse con soltura en al menos uno de ellos (en Ensalza, por ejemplo, nos especializamos en el desarrollo con PHP)
- Ser MUY lógico (pero mucho, mucho, mucho…) y ordenado (pero mucho, mucho también)
Front-end
(es lo que esta por delante, lo visual).
Un desarrollador front-end es el programador que se encarga de que una web sea atractiva para el usuario y, al mismo tiempo, funcione correctamente.
Un desarrollador front-end trabaja la interfaz de usuario desde el punto de vista del código, para que la interacción con el sistema sea posible. Por lo tanto, se encarga de la parte visual de la web (de todo aquello que puedes ver en tu explorador) haciendo que su diseño sea intuitivo y atractivo.
front-end (desarrollo frontal) trabaja desde el lado del cliente, interpretando y adaptando lenguajes de desarrollo web para crear la experiencia final de ese cliente/usuario: es la forma en la que el diseño se implementa realmente en la web.
Un desarrollador front-end, además de definir la estructura de la web, debe facilitar la navegación del usuario, teniendo en cuenta la usabilidad y legibilidad de la web o app. Así, es clave la conexión y buena comunicación del front-end web developer con sus aliados: el diseñador UX y el desarrollador backend.
- Traducir diseños a lenguaje de programación.
- Desarrollar la parte visual y estructura de un site o app web, además de mantener y optimizar sitios y apps web e interfaces de usuario.
- Facilitar la navegación del usuario y mejorar la usabilidad e interacción con el sitio en cualquier dispositivo o explorador (revisar tiempo de carga de la web, hacer diseños responsivos, escribir código mantenible, asegurar la accesibilidad de la web…).
- Ocuparse de los componentes externos del site o app web y gestionar el flujo de trabajo del software.
- Implementar prácticas de SEO on page.
Una de las principales tareas del front-end es la de asegurarse de que su web sea cross-browser (que se vea correctamente en diferentes navegadores), cross-platform (en diferentes sistemas operativos) y cross-device (en diferentes dispositivos).
Algunos programas editores son los siguientes:
visual studio code
Atom
Algunas definiciones:
Los tags HTML corresponden a elementos de código HTML en una página web. Forman parte integral de la composición de la página ya que permiten que se estructure y de forma al contenido, además, los buscadores usan específicamente algunos tags HTML como indexación de sitios web y parámetros de clasificación (marketing en buscadores).
https://www.w3schools.com/tags/default.asp
https://www.w3schools.com/html/html5_semantic_elements.asp
Elementos semánticos de Html
Cuando se manejan códigos por sus nombres lo que haremos con el tiempo es copiar fracciones de ese código y pegarlo, la clave es hacerlo dentro de los parámetros correctos para no entorpecer la estructura.
las etiquetas deben cerrarse con /
<p> </p> Aquí se pueden colocar mas atributos.
<body> para el contenido.
<head> para información sobre el documento.
<div> división dentro del contenido.
<a> para enlaces.
<strong> para poner el texto en negrita.
<br> para saltos de línea.
<H1>… <H6> para títulos dentro del contenido.
<img> para añadir imágenes al documento.
¿Cuáles son las etiquetas HTML básicas?
Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación las explicamos:
- <body> para el contenido
- <head> para información sobre el documento
- <div> división dentro del contenido
- <a> para enlaces
- <strong> para poner el texto en negrita
- <br> para saltos de línea
- <H1>…<H6> para títulos dentro del contenido
- <img> para añadir imágenes al documento
- <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
- <p> para parágrafos
- <span> para estilos de una parte del texto
<body> </body>
Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica donde empieza el contenido visible del documento.
<head></head>
La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS…
<div> </div>
Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones.
<a> </a>
Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la misma.
Ejemplo HTML:
Pulsa <a href=”https://www.nombredelaweb.com/” target=”_blank”>aquí</a> para visitar DonDominio.
<strong> </strong>
Si tienes mucho texto, es importante poder dar énfasis a una parte en concreto, con la etiqueta strong lo podemos hacer.
Ejemplo HTML:
Quiero destacar solo <strong>esta palabra</strong>.
<br>
Con esta etiqueta HTML le podemos decir al navegador que viene un salto de línea. Nos sirve para hacer el texto más leíble.
<H1> </H1> …. <H6> </H6>
Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar la importancia del título y para estructurar el contenido, de esta forma ayudamos a los bots a entender la importancia del contenido.
<IMG> </IMG>
Usamos la etiqueta IMG para mostrar imágenes dentro del contenido. Necesita el atributo src para funcionar, ya que será donde indicaremos desde donde tiene que mostrar la imagen.
<OL> <li></li> <OL> | <UL> <li></li> <UL>
Las etiquetas OL y LI nos sirven para crear listas, OL para listas ordenadas y UL para listas sin orden. Dentro de las listas, los elementos se identifican con la etiqueta LI.
Ejemplo HTML:
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<ul>
<P> </P>
Etiqueta que nos sirve para agrupar texto dentro de un parágrafo. El propósito es poder hacer el contenido más fácil de leer y organizado.
<SPAN> </SPAN>
Con la etiqueta podemos personalizar el estilo de solamente una parte del texto.
Ejemplo HTML:
Solo <span style=”color: red;”>esta palabra</span> en rojo.
La clase termina con la Instalación de Sublime text con una explicación de su funcionamiento.
