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>subíndice</sub>.</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<sup>superíndice</sup>.</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