Para crear una página web necesitas comprender tres sencillas tecnologías muy fáciles de aprender; HTML, CSS and Javascript.
Juntas permiten crear aplicaciones sofisticadas, ejemplo de ellas son instagram, twitter y facebook, a continuación veamos que son estas tecnologías.
HTML
HTML permite crear el contenido de nuestra página o aplicación de manera organizada y estructurada, sin HTML no podrías ver tus fotos en facebook o reproducir videos en youtube.
CSS
CSS se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el diseño, colores, tamaño de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y demás características de diseño. Sin CSS sería muy difícil de entender tu muro de facebook, todo estaría muy revuelto.
Javascript
Javascript te permite interactuar dinámicamente con la aplicación, claro ejemplo del uso de Javascript son las notificaciones de facebook, el chat de este mismo, cuando damos me gusta, creamos una publicación o escribimos un comentario.
Desde mi punto de vista lo ideal es aprender primero HTML, luego CSS y JavaScript.
Página web solo usando HTML
El siguiente ejemplo muestra como crear tu primera página web, si lo quieres probar en tu computadora, crea un archivo llamado index.html, después copia y pega el código de este ejemplo. Luego para ver tu página recién generada solo realiza un doble clic sobre index.html desde tu explorador de archivos.
A continuación vamos a explicar cada una de las partes de nuestro código.
DOCTYPE
Lo primero que existe en nuestro código es <!DOCTYPE html>, esto indica al navegador las sintaxis y reglas que formaran a nuestra página web. Antiguamente, se utilizaba una definición de doctype mucho más extensa, algo como lo siguiente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Pero actualmente la versión corta es más que suficiente, solo no olvides agregarla, porque de otro modo tu contenido será renderizado como una versión antigua de HTML.
Etiqueta HTML
Luego tenemos la etiqueta <html>, indica el inicio de nuestra página web, todas las demás etiquetas deben estar dentro de esta, el final de la etiqueta se marcacon casi el mismo código, pero con una diagonal después del signo <, así </html>. Además, la etiqueta <html> tiene solo dos etiquetas hijas, <head> and <body>, las cuales explicaremos un poco más abajo.
<html>
<head></head>
<body></body>
</html>
Etiquetas
Pero ¿Qué es una etiqueta?, una etiqueta es la unidad principal con la que se crea el contenido de una página o aplicación web.
Partes de una etiqueta HTML
Casi todas las etiquetas tiene su etiqueta de cierre </nombre-etiqueta>, digo casi todas porque la etiqueta DOCTYPE no tiene cierre. No te preocupes, son pocas las que no se cierran. Además, los nombres de etiquetas no son sensibles a mayúsculas y minúsculas, puedes escribir la etiqueta html así <HtmL></HtmL>
Atributo lang en la etiqueta html
Algo que destacar en la etiqueta es que tiene este atributo lang<html lang="es">, el cual quiere decir language y su worth significa spanish.
El atributo lang ayuda al navegador web a seleccionar texto, revisar la ortografía, traducir tu página y convertir el texto en audio para personas con problemas visuales.
Etiqueta head
The label <head> puede contener lo que se le llama metadatos y demás información que no es visible para el usuario. Es el lugar donde se definen o importan estilos (archivos CSS), código Javascript, y demás datos para que el navegador web pinte la página web.
También sirve para describir la página web a motores de búsqueda, por ejemplo usando metadatos sobre quien es el autor, el título y una descripción corta sobre la página web. El título que mencionamos es el de la página web, el que aparece en la pestaña de tu navegador web.
Adicional, la etiqueta head sirve para agregar metas de terceros como el open graph data creado por facebook y twitter cards creado por twitter.
En nuestro ejemplo, dentro de la etiqueta <head> podemos ver dos etiquetas <meta> descritos a continuación ( meta viene de meta information).
<head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Mi primera página web</title></head>
Codificación de caracteres utf-8
En el meta<meta charset="utf-8"> usa un atributo charset con worth utf-8, esto indica la codificación de caracteres de la página y nos permite tener caracteres raros de otros idiomas que de otra manera no se visualizarían correctamente. Ejemplos concretos serian la ñ and vocales con acentos para el idioma español, caracteres en chinos o koreano.
Actualmente, los navegadores web como firefox, chrome y brave corrigen este problema automáticamente cuando se carga la página web. Pero se recomienda usar este meta en caso de que se cargue la página web en un navegador antiguo o alguno navegador web que no corrija esta codificación de caracteres automáticamente
He meta <meta name="viewport" content="width=device-width,initial-scale=1"> es muy útil cuando nuestra página es visualizada en dispositivos móviles, width=device-width permite tomar todo el ancho de nuestra pantalla móvil como el ancho de la página, initial-scale=1 evita que ciertos dispositivos le apliquen algún tipo de escaldo inicial a nuestra página. Con este meta obtenemos un diseño congruente en los dispositivos móviles. De otra forma veríamos una página con un escaldo muy pequeño debido a que el navegador trata de encajar el contenido como si lo estuviéramos viendo en una pantalla más grande de computadora.
Una nota importante es que las etiquetas <meta> and <!DOCTYPE html> no tienen su correspondiente cierre o final de etiqueta, esto es así porque estas etiquetas realmente no tienen contenido visible del elemento como pasa con la etiqueta <html></html>, <body></body> o el encabezado <h1></h1>.
Etiqueta body y etiquetas dentro de body
The label <body> contiene toda la información visible que deseas mostrar al usuario. Todo el contenido que puedas ver en una página web o aplicación está dentro de la etiqueta <body>.
Etiquetas de encabezados
Después tenemos a la etiqueta <body>, la cual contiene todo el demás contenido visible de nuestra página, dentro tenemos 6 etiquetas, <h1> to <h6>, la h significa Heading (encabezado), se ocupan para mostrar títulos o encabezados, <h1> es el de mayor relevancia y <h6> es el de menor.
Etiqueta para crear párrafos
Más abajo tenemos nuestro primer párrafo, para crear un párrafo se utiliza la etiqueta <p>, p significa Paragraph (parrafo). Luego tenemos dos listas de elementos ordenados y desordenados.
<p> El desarrollo web o programación web utiliza tres principales tecnologías;<strong>HTML, CSS y Javascript</strong>. Juntas permiten crear aplicaciones sofisticadas, facebook es el ejemplo más conocido, también mercadolibre e instagram.</p>
Etiqueta strong
The label <strong> permite marcar palabras o frases que son importantes, normalmente son palabras que cuando hablamos les damos un énfasis fuerte, con un tono más alto y a menor velocidad porque queremos ser más claros en la comunicación. Es por eso que los screen readers leen el contenido de esta etiqueta con un tono de voz diferente.
<p> El desarrollo web o programación web utiliza tres principales tecnologías;<strong>HTML, CSS y Javascript</strong>. Juntas permiten crear aplicaciones sofisticadas, facebook es el ejemplo más conocido, también mercadolibre e instagram.</p>
<p>Este medicamente debe almacenarse <strong>fuera del alcance de los niños<strong>.</p>
Los navegadores web marcan el contenido en negritas, pero esta etiqueta no debe usarse con el objetivo visual de remarcar un texto en negritas. Para poner texto en negritas por razones solo de diseño puedes utilizar un <span> en conjunto con alguna regla de estilos (CSS).
Etiqueta em
The label <em> es parecida a la etiqueta <strong> en el sentido de que se usa para enfatizar partes del texto y que los screen readers los lean en diferente tono de voz. Pero no tiene la misma importancia que un texto marcado con la etiqueta <strong>. Se utiliza para que el texto tenga más énfasis que el texto normal.
<p>Recuarda que <em>tienes</em> que apurarte para que te des un poco mas de tiempo<p>
Etiqueta para crear listas de elementos
Para crear una lista de elementos desordenados utilizamos la etiqueta <ul>, ul (Unorder List). Para crear una lista ordenada usamos <ol>, ol (Order List). Estas dos listas contiene tres etiquetas <li>, li significa List Item (Elemento de Lista).
Como vemos, no es difícil crear contenido para nuestra página, lo único que necesitamos saber son los nombres de las etiquetas y para qué nos sirven, aquí puedes encontrarlas. No tienes que memorizarlas, pero si comprender como se usan, así cada vez que necesites de alguna siempre puedes consultar en el anterior enlace.
En futuras publicaciones profundizaremos como funciona nuestro contenido HTML con CSS (Cascade Style Sheet, Hojas de Estilo en Cascada), para terminar incluyendo también Javascript en una tercera publicacion.
El patrón de diseño iterador either iterator proporciona una manera de acceder a elementos de un objeto (que contiene algún tipo de datos agregados como un arreglo o una lista) secuencialmente sin exponer su estructura interna.
Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation.
Este patrón de diseño también es conocido como cursor, si has usado cursores para recorrer los elementos obtenidos de una base de datos, ¿Que crees?, ahí estas utilizando el patrón de diseño iterador.
El objetivo de este patrón es poder recorrer y obtener elementos de un objeto sin necesidad de saber como estos datos están estructurados. Además de que la responsabilidad de recorrer los elementos no está en el objeto sino en el iterador.
Un iterador se compone normalmente de los siguientes métodos:
iterador.hasNext() either iterador.hayMas()
iterador.next() either iterador.siguiente()
iterador.current() either iterador.elementoActual()
iterador.rewind() either iterador.rebobinar(), que nos permite posicionar el “cursor” en el primer elemento.
Aquí te dejo como implementarlo en un navegador web:
Podemos notar que el siguiente elemento está determinado por la función iterador.next() el cual suma 2 a la variable index y es por eso que obtenemos los valores 1,3,5,7,9 del arreglo data.
Al final rebobinamos al inicio de data e imprimimos el elemento actual, es decir 1, con el método iterador.current().
MongoDB es una base de datos basada en documentos en formato BJSON que es la forma binaria de JSON, en MongoShell se puede ver el uso de este patrón de diseño:
En este ejemplo se obtienen los documentos de la colección users que tengan una propiedad type equal to 2, luego se recorren uno por uno a través de los métodos cursor.hasNext()and cursor.next().
En contraparte con las expresiones de plantillasque se usan en las interpolaciones y Property Binding, una Expresiónof Enlazado de eventos (Event Binding)tiene un efecto colateral, este efecto sin embargo, es deseado, es el objetivo de un evento, modificar el estado de la aplicación a través de las acciones del usuario.
Por la explicación anterior, se les llama también expresiones de estado, En el siguiente ejemplo podemos ver la invocación a un método, la sintaxis para Event Bindingis (evento)="expresión":
La sintaxis para las expresiones en Enlazado de eventos como las expresiones de plantillases parecida a las expresiones de Javascript normales, pero tiene ciertas limitaciones. No está permitido:
The operator new
Los operadores ++and --
Los operadores de asignacion (+=,-=, *=, etc), OJO: el operador =SI está permitido.
Los operadores a nivel de bits |and &
Los operadores de expresiones de plantillas: Operador de Tuberia |Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, ?.Operador para vereficar referencia NO Nulla, !
A diferencia de las expresiones de plantillas que se utilizan en interpolación y Property Binding, las expresiones de estado aceptan:
Aquí esta un ejemplo en acción, revisa el archivo src/app/app.component.ts, puedes dar click en los botones azules botheither previewpara ver el código en acción.
¿De dónde se obtienen los valores de las expresiones de enlazado de eventos?
Al igual que las expresiones de plantillas, las expresiones de estado normalmente obtienen sus valores de los miembros de la clase del componente. Por ejemplo, las propiedades nameand resultadoen el ejemplo anterior.
Y al igual que las expresiones de plantilla, se pueden usar las propiedades o variables de plantillasen el contexto de la plantilla misma.
Variables de input y de referencia
<p *ngfor="let persona of gente">
<input #nombre [value]="persona.nombre" (input)="persona.nombre = $event.target.value"/>
{{persona.nombre}}
<button (click)="eliminar(nombre.value, $event)">Eliminar</button>
</p>
Aquí se utiliza la variable de input personque es un objeto y se accede a su propiedad nameen la Expresión de Estado (input)="persona.nombre = $event.target.value"
También tenemos la variable de referencia #nombrela cual se utiliza en la expresión de estado (click)="eliminar(nombre.value, $event)".
En ambos casos vemos la propiedad de plantilla $event, la cual contiene la referencia al evento y elemento relacionado. Se accedió al valor de los input a través de $event.target.value.
También mandamos todo el objeto $eventen la expresión de estado para eliminar a una persona (click)="eliminar(nombre.value, $event)", y el método eliminar de la clase del componente imprime el tipo de evento en un alerta.
Property Binding is a quick and easy way to define a property to a component of an Angular application and update this property if a change in the origin of the information is detected.
One of the simplest examples is property binding src, in the section Secure contentFrom this post you can see the example in action with plunker:
<img [src]="persona.photoURL">
The label imgalso has an attribute src, but here it is worth pointing out that the properties and attributes of an element are not the same. Property Binding applies to the properties themselves, not the attributes.
Attributes are sometimes used to reflect the state of an element or component, but an attribute is useful for declaring initial element information in HTML code, a property is part of the element instance.
To prove that they are different, if you want to obtain the value of an attribute, use element.getAttribute(attributeName), to obtain the value of a property we use element.property.
To define an attribute, use element.setAttribute(attributeName, value), to define a property we use element.property = value.
Attributes are stored in a property element.attributesof the element or component instance. To understand this about attributes and properties, I recommend the section synchronization of attributes and properties.
Now let's see how we can enable and disable a <input>through property disabled:
<input [disabled]="isDisabled" value="Hola"/>
There is another notation to link properties, bind-property="expression":
<input bind-disabled="isDisabled" value="Hola"/>
Another interesting example is defining the value classof an element through the directive ngClass:
<p [ngclass]="clases"></p>
Here the question is, How does angular know that ngClassIs it a directive and not a property?
In another publication we will see how to create a directive, for the moment just take into account that the way in which directives are created allows Angular to check whether it is a directive or not. Angular before trying to do a property binding checks if a property exists ngClassin the directive or in the element that is being applied. In the above case, the native elements do not have the property ngClass, html elements have the property classNameand classList, but in this case we can say that [ngClass]It is a directive.
Secure content
Angular does its job in keeping your code secure, here is an example using property binding:
caution: string = ' ';
Communication between components
The binding of properties is very useful in the communication from Parent to child of components, let's see a concrete example, we have the parent component pb-person-list, which contains a list of child components of type pb-person.
The parent component contains an array of people, this array is bound through the directive *ngForand Property Bindingwith the property personof the child component.
Here is something very important, so that the child component can perform the Property Linking, the property is defined personwith the decorator @Input('alias'), to himself the property personinside the component it is used as person, but from the outside it is bound with [person]="expression"', this is because of the alias that we defined in @Input('person) person: Object. The alias is optional, if it does not have it, then it is bound with [person]="expression"
Es importante saber que son las expresiones de plantillas, estas se utilizan en las interpolaciones y en el Enlazado de propiedades (Property Binding).
Cuando creas un componente, se utiliza HTML para crear su plantilla, esto es bueno, no tienes que aprender mucho de otra sintaxis para plantillas, aun así angular incorpora una pequeña sintaxis, que, aunque pueda ser nueva, es de gran utilidad y en esta publicación veremos expresiones de Javascript, interpolación y property binding en las plantillas de angular.
En las plantillas de angular cualquier elemento HTML es valido, a excepción de elementos como <html>, <head>, <base>, los cuales no tiene que estar en una plantilla de angular porque las plantillas de angular se “dibujan”dentro de la etiqueta <body>.
Otra excepción de suma importancia es la etiqueta <script>, esta etiqueta no se debe usar en las plantillas por el riesgo que se corre a ataques de XSS. Afortunadamente Angular previene XSS a través de sanitización, esta técnica convierte texto potencialmente ejecutable (código no deseado) a texto totalmente seguro.
¿Qué son las expresiones de plantillas?
Las expresiones de plantillas no son más que expresiones de Javascript normales con ciertas limitaciones. Veamos dos ejemplos:
En Interpolación se utiliza la sintaxis {{expresion}}:
<h3>2 + 2 es igual a {{2 + 2}}</h3>
El resultado es:
<h3>2 + 2 es igual a 4</h3>
En enlazado de propiedades se utiliza la sintaxis [propiedad]="expresion":
<h2 [hidden]="oculto">Ejemplo Enlazadoof propiedades</h2><input [hidden]="oculto" value="Este es un input oculto">
En el ejemplo, debido que la propiedad ocultoes un boleano igual a true, el h2y el inputpermanecen ocultos. El mismo resultado se obtiene si usamos el comparador de igualdad:
<h2 [hidden]="oculto === true">Ejemplo Enlazadoof propiedades</h2><input [hidden]="oculto === true" value="Este es un input oculto">
Vemos que dentro de la sintaxis de doble llaves existe una operación de suma y usamos el operador de igualdad en oculto === true, es decir, podemos utilizar Expresiones de Javascripten nuestras plantillas, aunque podemos utilizar expresiones de Javascript, no todo está permitido.
Las expresiones Javascript que producen efectos colaterales no se deben utilizar y NO están permitidas:
Las asignaciones (=,+=,-=, *=, etc)
El operator new
Las Expresiones consecutivas con ;either ,. Ejemplo {{1+1;2+2}}
Los operadores ++and --
Los operadores a nivel de bits |and &
Una característica importante en las expresiones de plantillas y que es distinta de las expresiones Javascript normales es que se pueden utilizar los siguientes operadores, pero ojo, no son operadores a nivel de bits:
Operador de Tuberia |
Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, ?.
Operador para vereficar referencia NO Nulla, !
Estos tres últimos operadores los veremos a detalle en otra publicación.
Interpolación
La interpolación nos permite obtener información en una aplicación, genera un enlacecon el origen de la información, es decir, si los datos de origen cambian, la interpolación actualiza ese cambio en la vista. En otras palabras, reacciona al cambio de datos.
Ejemplo, contenido de src/app/app.component.html:
<div><h2>Hola {{name}}</h2><h2>{{"cadena".split('').reverse().join('')}}</h2> <h2>{{false ? 'SI':'NO'}}</h2><imgsrc="{{logo}}"><h3>2 + 2 es igual a {{2 + 2}}</h3><h2 [hidden]="oculto">Ejemplo Enlazadoof propiedades</h2> <input [hidden]="oculto" value="Este es un input oculto"><h2 [hidden]="oculto === true">Ejemplo Enlazadoof propiedades</h2> <input [hidden]="oculto === true" value="Este es un input oculto"><button (click)="cambiarNombre()">Voltear nombre</button></div>
Ejemplo en acción, revisa el archivo src/app/app.component.ts:
En el ejemplo tenemos un componente llamado my-appdefinido en el archivo src/app/app.component.ts, la plantilla del componente está definida en la propiedad templateUrldel decorador @component, carga un arhivo html externo.
Podemos ver que cuando damos clic en el botón Voltear textola propiedad namees cambiada invirtiendo los caracteres, se invierte los caracteres a través del método cambiarNombre. Y la reacción a este cambio esta enlazado con la interpolación {{nombre}}.
También se puede utilizar interpolación en atributos, en el ejemplo anterior para mostrar la imagen se utilizó:
<imgsrc="{{logo}}">
Otro ejemplo:
<h3>2 + 2 es igual a {{2 + 2}}</h3>
¿De dónde se obtienen los valores de las expresiones de plantilla?
Normalmente los valores estan definidos en el componente como vimos en el anterior ejemplo, nameand logoestán definidos como miembros de la clase y en el constructor se les define su valor.
Pero también se puede definir propiedades en el contexto de la plantilla llamadas variables de plantillas, existen dos tipos de estas variables:
En este otro caso se ocupa el carácter #y luego el nombre de la variable de referencia que deseas crear. Con esto se puede utilizar la variable en interpolación como se ve en {{varReferencia.value}}.
La jerarquía o prioridad del valor final obtenido en las expresiones de plantillas es así:
Variables en plantilla, input y de referencia.
Directivas
Componentes
Para ilustrar la prioridad, veamos el ejemplo, en la parte donde se utiliza la directiva *ngForpara recorrer el arreglo gente, ahí se define una variable de input person, y después se accede a la propiedad nombre de cada persona, podemos notar que debido a la jerarquía arriba listada se tomo primero en cuenta la variable de plantilla personantes que el miembro persondel componente. El miembro persones un string “soy otra persona”y nunca se imprime dentro de la lista de personas.
Cuando uses una expresión de plantilla, sigue estos consejos:
Tu expresión debe ser rápida de ejecutar porque no va a ser la única en toda tu plantilla. Si es necesario, considera guardar los resultados de las expresiones que se van a utilizar varias veces en la plantilla y asi la expresion no se ejecuta varias veces.
Utiliza el principio de mantener todo estúpidamente simple, no uses complejas expresiones porque genera mucho ruido en la plantilla, para expresiones más complejas utiliza la clase del componente, y aún ahí considera el principio KISS (Keep It Simple, Stupid).
Investiga el funcionamiento de detección de cambios de angular para mantener tus expresiones lo más eficientes posibles, en una futura publicación explicaré la detección de cambios y como nos ayuda a mejorar el rendimiento de nuestro aplicación.