Programador Full Stack - Desarrollo frontend y backend

CURSO VISUAL Y PRÁCTICO Argentina $ xx

KEND C A B Y D N E T N O R F O L L D E SA R R O

ECOSISTEMA WEB Primeras líneas de código \ Tags HTML \ Servidores, URLs, páginas y recursos

1 MAPA DE TECNOLOGÍAS Y LENGUAJES Domina las últimas tecnologías para sitios web responsive y dinámicos

Instalación de Brackets IDE Brackets es un editor de código

constante evolución y desarrollo por

y Windows, y podemos descargarlo

gratuito desarrollado por la irma

una comunidad de colaboradores

desde el siguiente link: http://

Adobe. Es la evolución de su antigua

independientes. Su código original

brackets.io/, e instalarlo rápido y

herramienta Adobe Edge, que tenía

proviene del editor de código

con facilidad. Una vez instalado en

el mismo in que Brackets, pero fue

ATOM, de iloso ía open source.

nuestro equipo y previo a adentrarnos

discontinuada en 2014 en pos de

Es multiplataforma, por lo tanto,

en HTML5, repasaremos las

este último editor. Brackets está en

tenemos versiones para Linux, Mac

características principales de Brackets.

Imagen 01.

Brackets es un editor de código gratuito creado por Adobe, que basa su estructura en Atom; está programado completamente en Node, JS, HTML y CSS.

EDITORES LITE Dentro de la línea de editores bajos en peso o en consumo de recursos, podemos encontrar a Brackets, VS Code y Atom. Los dos primeros están basados en la filosofía de este último. Si somos partidarios de los productos de la plataforma Adobe o estamos acostumbrados a ellos, Brackets será el editor que nos haga sentir más cómodos.

Si por el contrario la plataforma Visual Studio de Microsoft es nuestra preferida, VS Code será nuestro editor de preferencia. Por último, si el software libre es lo que profesamos, Atom es el editor que buscamos instalar.

Más allá de alguna que otra función que pueda existir en uno, y no en otro, cualquiera de estos tres editores nos permitirá movernos con comodidad para realizar los ejercicios planteados en este curso.

4

Clase 02 > Desarrollo frontend: HTML5

El lenguaje de marcado HTML HTML es una sigla que proviene de

etcétera) es segmentado a través de

a HTML 4.1. En paralelo, Mozilla,

(Hyper Text Markup Language)

un tag especí ico, y ubicado en una

Opera software y Apple comenzaron

y hace referencia al lenguaje de

posición determinada de la página.

a trabajar en conjunto en un nuevo

marcado que nos permite crear

HTML en conjunto con CSS y Javascript

estándar que permitiese a los

páginas web. Está regido por W3C

se ocupan de formatear casi todo

diferentes motores de navegación

(World Wide Web Consortium),

el contenido web, que luego será

compartir una serie de características

quien se ocupa de organizar la

procesado por el motor de render

que habilitaran a estos a mostrar

estandarización referente a escritura

de un navegador web, para ser

por igual el contenido de toda web

e interpretación de casi toda la

visualizado, por último, de forma

de forma homogénea sin importar

tecnología relacionada con la web.

comprensible por los usuarios inales.

el browser utilizado. Así nació el

HTML es considerado el lenguaje web más importante, dado que permitió desarrollar y expandir lo que todos conocemos como Web o WWW. A través de la organización

HTML5: la quinta versión independiente

proyecto conjunto de estas empresas, bautizado WHATWG, de donde devino luego el estándar HTML5.

Finalmente, todas las empresas desarrolladoras de navegadores web

segmentada en tags, nos permite

El lenguaje HTML tuvo varias

terminaron adaptando este estándar,

distinguir cada componente de

versiones a lo largo de su existencia.

ya que demostró en poco tiempo ser

una página web, para que este

Una de las últimas llevadas adelante

el más efectivo y rápido en cuanto a

se visualice de manera óptima y

fue la versión 4.0, que tiempo

evolución, desde el nacimiento de la

diferenciada del resto. A su vez, cada

después incorporó soporte a XForms

Web como tal. HTML5 era conocido

componente de una página (títulos,

(interfaces grá icas HTML basadas

también como Web Applications 1.0,

textos, imágenes, videos, audios,

en contenido XML), lo que hizo nacer

un estándar muy fuerte hoy usado por la diversidad de dispositivos que utilizan internet como motor de comunicación o visualización de contenidos. El enfoque que abordaremos de HTML en este curso será sobre HTML5.

Ante la petición de un usuario de una página o sitio web, el contenido es tomado previamente por el motor de renderizado del browser, procesado y fi nalmente mostrado de forma gráfi ca.

REDUSERS > PROGRAMADOR Full Stack

5

Entorno de Brackets Menú Archivo

Menú Edición

Menú Buscar

Permite abrir, grabar y cerrar archivos

Desde aquí accedemos a todos los

Permite buscar y reemplazar contenido

y proyectos. También permite acceder

comandos para trabajar con el código

a lo largo de los archivos de código.

a proyectos trabajados recientemente

que escribimos: selección múltiple de

y gestionar extensiones que potencien

texto, desplazamiento por las líneas

a Brackets.

de código, sangrías, comentarios, sugerencias de código, y completar paréntesis de forma automática, entre otras opciones.

Archivo > Vista previa dinámica experimental Permite visualizar en tiempo real en el navegador web los cambios que realizamos sobre los archivos editados.

Archivo > Vista previa dinámica Ejecuta la vista previa, en el navegador predeterminado en nuestro equipo, del contenido trabajado.

Área de trabajo Aquí visualizaremos en modo jerárquico todo el contenido relacionado con nuestro proyecto. A través del menú contextual podemos trabajar con archivos y carpetas, copiando, clonando, renombrando o visualizando el contenido en el editor o el navegador web.

Dividir editor de código

Líneas y columnas

A través de esta opción podemos alternar entre la visualización de un

Toda la información referente a la cantidad de

archivo en el editor de código. Las opciones son: visualización simple,

líneas y columnas escritas y utilizadas, dentro

visualización múltiple vertical, visualización múltiple horizontal.

2

de cada archivo de código que manejemos.

Clase 02 > Desarrollo frontend: HTML5

Menú Ver

Menú Navegación

Menú Desarrollo

Contiene funciones que nos permiten ver

Podemos navegar entre los distintos

Nos permite manipular el entorno

contenido específico del código escrito

documentos o archivos de código con

de desarrollo Brackets, iniciando o

en cada archivo de nuestros proyectos,

los que estemos trabajando, visualizar

reiniciando este con los complementos

manejar los tamaños de fuente, tabular,

la información de una definición, abrir

activados o desactivados. También

indentar código y ocultar o visualizar

y cerrar archivos de forma rápida, y

accedemos a las herramientas de

código, según nuestras necesidades.

acceder a la documentación rápida del

desarrollador de Google Chrome, para

documento escrito.

depurar e inspeccionar el código de las soluciones web.

Vista previa dinámica Ejecuta nuestro proyecto en curso dentro de la vista previa del navegador web predeterminado.

Gestor de extensiones Nos permite gestionar las extensiones necesarias disponibles para Brackets, que nos facilitan el desarrollo de soluciones web.

Nuevas versiones Notificador integrado que nos informa cuando una nueva versión de Brackets está disponible.

Alternar entre lenguajes Como soporte extendido, Brackets nos permite editar archivos de código relacionados a decenas de diferentes lenguajes de programación. Aquí podemos elegir rápidamente el lenguaje que queremos que el editor reconozca por defecto, cuando Editor de código

estemos editando un archivo

Aquí desarrollaremos de forma constante los

específico. Esto nos ayudará

ejemplos. El editor Brackets soporta por defecto

tanto con la sintaxis como con

los lenguajes HTML5, CSS y JavaScript.

la detección de errores.

REDUSERS > PROGRAMADOR Full Stack

3

Formatear el texto Hasta ahora hemos visto ejemplos sencillos de cómo

<em>

establecer texto a lo largo de una página web. Es

El tag <em>, también conocido como Emphasis ,

hora de que el texto comience a tener un formato algo

permite que un párrafo se vea de forma levemente

más destacado; esto logrará que el contenido de una

inclinada.

página comience a tomar vida.

Es el equivalente a cursiva, utilizado en los

Veamos a continuación qué opciones de formato

procesadores de texto. Un ejemplo de ello, a

podemos aplicar directamente con html a nuestro

c ontinuación:

texto estándar. ...

<strong>

<p>Este párrafo contendrá parte de su texto resaltado <em> con énfasis</

Este tag se utiliza por lo común para resaltar un texto

em>.</p>

con un estilo equivalente a negrita.

...

Su uso habitual se da dentro de un párrafo, en formato anidado al tag <p>. Veamos a continuación un ejemplo de ello:

<code> Este tag permite establecer parte de un texto en formato

...

código fuente. Es utilizado por lo común en portales

<p>Este párrafo contendrá parte

donde se debe representar una porción de código. El

de su texto en <strong>negrita</

texto resultante visualizado se muestra bajo un formato

strong>.</p>

de fuente tipo consola. Veamos a continuación un

...

ejemplo de su uso.

Vemos solamente cómo la palabra negrita, es destacada

...

con respecto al resto del texto de este párrafo.

<p>El formato correcto del uso de la sentencia if es:</p> <code>if a = 1 then {//haceralgo} </ code>

EL “ESTILO” DE CSS Hasta ahora visualizamos solo HTML en formato

...

plano. A través de CSS, todo este contenido

<samp>

comenzará a cobrar vida y tendrá diferentes

El tag <samp>, al igual que <code>, representan un estilo

formatos, colores, espacios y recuadros, gracias

código fuente, con la diferencia que <samp> es utilizado

a todas las opciones que el lenguaje propio de

para representar el resultado del código obtenido en una

las hojas de estilo nos permitirá aplicar.

consola o ventana de depuración. Utiliza comúnmente

Cada uno de los tags cobrará vida de forma

una fuente tipo Courier New, de ancho ijo.

individual y mantendrá un formato uniforme a lo largo de las páginas que compongan nuestro

...

sitio web.

<p>El formato correcto del uso de la sentencia if es:</p>

10

Clase 02 > Desarrollo frontend: HTML5

<code>if a = 1 then {//haceralgo} </

<sub> y <sup>

code>

Los tags <sub> y <sup> nos permiten establecer un

<p>A continuación vemos el resultado

bloque de texto en formato subíndice o superíndice.

de la sentencia <em>if</em>:</p>

Esto se utiliza por lo común para representar números

<samp>//aquí se muestra el resultado

o palabras que resalten una parte del párrafo que

de if</samp>

componen. Veamos a continuación un ejemplo de ello:

... ...

<u>

<p>Este texto contiene una palabra con el tag_subíndice.</p>

Este tag se utiliza para subrayar un texto determinado.

<p>Mientras que este otro texto

Puede aplicarse de forma anidada tanto en un párrafo

contiene una palabra con el

<p> como también dentro de un tag correspondiente a

tag^superíndice.</p>

títulos. Se implementa de la siguiente manera:

...

... <p><u>Este es un párrafo

<del> e <ins>

completamente subrayado.</u></p>

Los tags <del> e <ins> permiten establecer un texto

<h5>Y este es un título H5

tachado e insertado, respectivamente, dentro de un

<u>subrayado de forma parcial</

párrafo. Es muy común encontrarlos en blogs donde se

u><h5>

representa una opinión personal del autor, como si se

...

estuviese retractando.

Su forma de uso es la siguiente:

Realicemos a continuación un nuevo ejercicio que nos permita visualizar los tags de formateo de texto, para así

...

comprender mejor el uso y el resultado de cada uno de ellos.

<p>Creo fi rmemente que este verano

Creamos una nueva página html, llamada textoformateado.

<del>no llego a estar en forma</

html, y creamos diferentes párrafos, donde aplicamos cada

del><ins>me veré nuevamente algo

uno de los tags vistos hasta aquí. El resultado del ejercicio

excedido de peso</ins>.</p>

debe ser como la siguiente imagen:

...

Imagen 06.

El formateo de texto según nuestra necesidad será mejorado signifi cativamente cuando implementemos CSS.

REDUSERS > PROGRAMADOR Full Stack

11

Caracteres especiales Hasta ahora hemos desarrollado

acentuadas u otros caracteres

interiorizarnos y ver la diversidad

una serie de ejemplos utilizando

especiales, Brackets dispone

de opciones que disponemos.

nuestro propio vocabulario

de una ayuda contextual que

Existen otros caracteres

español, el cual difiere bastante

se activa de forma automática,

extendidos que seguramente

del inglés, que es el lenguaje

cuando escribimos el carácter & .

deberemos utilizar y que también

estándar que se utiliza para el

Probemos de escribir un párrafo

cuentan con su equivalente en

desarrollo de cualquier solución

de texto que contenga alguno de

ASCII, como por ejemplo: <> & / $ #

de software.

estos caracteres y veremos cómo

” ´ ’ * + ~ , entre otros tantos más.

Pero, si queremos que nuestras

se activa la ayuda de Brackets.

Podemos encontrarlos también en

páginas en español se vean

Naveguemos por ella para

el menú contextual de Brackets.

correctamente en todos los navegadores web de cualquier parte del mundo, sin importar el idioma del SO ni del navegador web de estos, debemos reemplazar los caracteres por tildes, diéresis, ñuf lo o caracteres con cedilla (Ç), entre otros, por sus equivalentes de la tabla de caracteres especiales. Existe mucha información en internet que nos guiará para encontrar la equivalencia ASCII ISO de la tabla de caracteres especiales, y así podamos aplicarlos en nuestras webs. Solo nos enfocaremos en las equivalencias para las vocales con tilde y para representar la letra ñ - Ñ.

Caracteres especiales en menú contextual

Sobre el apartado izquierdo, vemos el menú contextual que muestra el código ASCII para la letra a con tilde.

Durante la creación de una página html que requiera insertar contenido que referencia a palabras

12

Clase 02 > Desarrollo frontend: HTML5

LETRA

CÓDIGO EN HTML

SE ESCRIBE

RESULTADO

á

&aacute;

l&aacute;mpara

lámpara

é

&eacute;

l&eacute;xico

léxico

El porqué de los caracteres especiales

í

&iacute;

conoc&iacute;

conocí

Cuando nace la era

ó

oaacute;

frunci&oacute;

frunció

informática, la agencia

ú

uaacute;

Naranj&uacute;

Naranjú

ANSI (American National

Á

&Aacute;

-

-

Standards Institute ) creó

É

&Eacute;

-

-

una tabla de códigos,

Í

&Iacute;

-

-

llamada ASCII (American

Ó

&Oacute;

-

-

Ú

&Uacute;

-

-

ñ

&ntilde;

&ntilde;and&uacute;

ñandú

Ñ

&Ntilde;

&Ntilde;uflo

Ñuflo

Standard Code for Information Interchange ), para representar todo tipo de caracteres diferentes de las consonantes y vocales que componen el abecedario estándar occidental. Estos caracteres extendidos permiten representar de manera uniforme un carácter especial, un símbolo o una letra extendida de un idioma específico (occidental u oriental), a través de un código estandarizado, que se respetaría en todo el mundo. Al expandirse mundialmente el uso de internet, los navegadores web incorporaron la tabla de caracteres y la incluyeron dentro del desarrollo de los estándares que dieron vida al lenguaje HTML. Así, gracias a la integración de los caracteres UNICODE

Sobre el apartado derecho, el código equivalente para el símbolo %.

de todo el mundo, los navegadores pueden visualizar contenido de forma homogénea en cualquier navegador, sin importar el idioma de este ni del sistema operativo que lo ejecuta.

REDUSERS > PROGRAMADOR Full Stack

13

<EJERCICIO PRÁCTICO>

Completar nuestra web Página principal o Home Nuestra página principal sufrirá muy pocos cambios. En ella simplemente debemos agregar al botón Home, la clase active, que ya está creada en CSS, pero que dejamos de usar. Luego agregamos los hipervínculos en cada uno de los botones de la barra de navegación hacia las nuevas páginas html.

Página Empresa Aprovechamos el contenido de texto heredado de la página principal, y modificamos el mismo agregando una imagen vertical relacionada a Empresa, de unos 200 x 325 pixeles aproximados, con alineación a la izquierda de la pantalla y su propiedad width debe ser entre el 20% y 30%. Luego, entre cada elemento <p> agregamos una regla horizontal. Por último, agregamos los hipervínculos en la barra de navegación, y la clase active al botón correspondiente.

14

Clase 02 > Desarrollo frontend: HTML5

Ya tenemos los conocimientos necesarios para armar una web estática completamente funcional.

Lo que haremos es, tomar como base la página html y el archivo css de nuestro último ejercicio, y replicar la página html nombrando cada nueva página como cada sección que planificamos en este ejemplo.

Luego agregaremos contenido específico a cada página, y así volveremos completamente funcional nuestra web.

Página Noticias Esta página incluirá una tabla con estructura de dos columnas, y dos filas por cada columna. En la primera fila de cada columna insertaremos un elemento H3, y en la segunda fila de cada columna insertaremos texto que complete el contenido. Las propiedades CSS a usar en el elemento table son: padding (heredado), y border de al menos 6px, de color blanco.

Por último, agregamos también los hipervínculos en la barra de navegación, y la clase active al botón correspondiente.

Página Contacto La página de contacto deberá tener domicilio y teléfonos relacionado con la empresa, y una o más direcciones de correo electrónico, con sus respectivos hipervínculos.

La propiedad vertical-align debe ser en el extremo superior, su propiedad padding debe ser entre 60px y 80px y el formato de visualización de los párrafos debe ser table-cell. También debemos agregar los hipervínculos a la barra de navegación, y la clase active al botón Contacto.

REDUSERS > PROGRAMADOR Full Stack

15