Saltar a contenido

Desarrollo

  • en Desarrollo
  • 5 minutos de lectura

Curso de Python - Tipos de operadores e introducción con módulos

En esta entrega vamos a ver cómo trabajar con los diferentes operadores que tenemos disponibles en Python, ¡que no son pocos! y además lo justo para trabajar con módulos.

Tipos de operadores

En Python tenemos varios tipos de oepradores para hacer comparaciones, cálculos, valorar expresiones lógicas.... * Aritmético * Asignación * Comparación * Lógico * Bit a bit (bitwise) * Identidad * Membresía

Aritméticos

Se utiliza para realizar operaciones matemáticas y se utilizando dos operandos para llevarlas a cabo.

Operador Descripción
+ Se utiliza para realizar operaciones de adicción (suma)
- Operaciones de sustracción (resta)
* Multiplicación
/ División (cociente)
% Módulo (resto de una división)

Adicción

>>> 2 + 3
5

Sustracción

>>> 1 - 2
-1

Multiplicación

>>> 2 * 1
2

División (cociente)

>>> 4 / 2
0

Módulo, (resto de una división)

>>> 4 % 2
2.0

Operadores de asignación

Estos operadores permiten asignar valores, por norma general a variables, pero no olvidemos que podemos involucrar otros tipos de identificadores como pueden ser listas, tuplas...

Operador Descripción
= Asigna un valor
+= Suma un valor al valor actual y guardar el nuevo valor
-= Resta un valor al valor actual y guardar el nuevo valor
*= Multiplica un valor al valor actual y guardar el nuevo valor

Igual (=)

>>> variable = 10
>>> print(variable)
10

Más e igual (+=)

>>> variable = 1
>>> variable += 2
>>> print(variable)
3

Menos e igual (-=)

>>> variable = 1
>>> variable -= 2
>>> print(variable)
-1

Multiplicar e igual (*=)

>>> variable = 2
>>> variable *= 2
>>> print(variable)
4

Operadores de comparación

Estos operadores te permiten realizar una comparación entre dos valores, son muy utilizados en los condicionales o en validaciones como pueden ser bucles...etc. Además, los valores comparados devuelven un True o un False (booleano) si la comparación se cumple o no.

Operador Descripción
< Menor que
> Mayor que
<= Menor o igual que
>= Mayor o igual que
!= Distinto de

Menor que

>>> 1 < 2
True

Mayor que

>>> 1 > 2
False

Menor igual que

>>> 1 <= 2
True

Mayor igual que

>>> 1 >= 2
False

Distinto de

>>> 1 != 2
True

Operadores lógicos

Estos permiten realizar operaciones lógicas y devuelven True o False según el resultado.

Operador Descripción
and Deben cumplirse las condiciones sí o sí
or Debe cumplir al menos una de las condiciones evaluadas
not Devuelve False si el resultado es verdadero

and

>>> 1<2 and 2<3
True
>>> x = 100 < 20 and 2>3
>>>print(x)
False

or

>>> 1<2 and 100>100
True

not

>>> not(2 != 100 and 90<200)
False

Operadores bitwise

Operadores Descripción
& Convierte el primer y segundo nº decimal en nº binarios, compara ambos nº. Cuando se encuentra 1 bit en el primer nº, y en el segundo también, se establece 1. Cuando se encuentra 1 bit en el primer nº y un 0 en el segundo también se establece un 0.
| Convierte el primer y segundo nº decimal en nº binarios, compara ambos nº. Cuando se encuentra 1 bit en el primer nº, y en el segundo también, se establece 1. Cuando se encuentra 1 bit en el primer nº y un 0 en el segundo también se establece un 1.
>> Convierte el primer y segundo nº decimal en nº binarios, compara ambos nº. Cuando se encuentra 1 bit en el segundo nº, y se desplaza el bit en el segundo también, se establece 1. Cuando se encuentra 1 bit en el primer nº y un 0 en el segundo también se establece un 1.
<< Lo anterior pero desde la izquierda
~ Devuelve el complemento del nº menos el nº que obtenemos cambiado cada 1 por un 0 y un 0 por un 1. Es lo mismo que -nº-1

Ampersan (&)

>>> 7 & 2
2

¿Por qué nos devuelve 2? Si nosotros pasamos a binario ambos números:

7 = 0 0 0 0 0 1 1 1
2 = 0 0 0 0 0 0 1 0

Cuando coincida el 1 del primer valor, con el 1 del segundo quedará como 1. Si el primer valor hay un 0 y en el segundo hay 1, se quedará el 0 por encima del 1 quedando tal que así:

0 0 0 0 0 1 1 1
0 0 0 0 0 0 1 0
---------------------
0 0 0 0 0 0 1 0

Si conviertes este número binario a decimal te dará 2.

Tubería o pipe

>>> 190 | 9
191

¿Por qué nos devuelve 191? Si nosotros pasamos a binario ambos números:

190 = 1 0 1 1 1 1 1 0
9 = 0 0 0 0 1 0 0 1

Cuando coincida el 1 del primer valor, con el 1 del segundo quedará como 1. Si el primer valor hay un 0 y en el segundo hay 1, se quedará el 1 por encima del 0 quedando tal que así:

1 0 1 1 1 1 1 0
0 0 0 1 0 0 0 1
---------------------
1 0 1 1 1 1 1 1

Si conviertes este número binario a decimal te dará 191. PENDIENTE DE REVISAR

Desplazamiento hacia la derecha o (shift-to-right)

>>> 10 >> 2
2

¿Por qué nos devuelve 2?

Si pasas el nº 10 a binario:

10 = 0 0 0 0 1 0 1 0

Desplazas 2 posiciones añadiendo dos ceros hacia la derecha, y te quedaría:

0 0 0 0 0 0 1 0

Si conviertes este número binario a decimal te dará 2.

Desplazamiento hacia la izquierda o (shift-to-left)

Este procedimiento es el mismo que el anterior, pero hacia el otro lado.

>>> 10 << 2
40

¿Por qué devuelve 2?

Si pasas a binario el nº 10:

10 = 0 0 0 0 1 0 1 0

Desplazas 2 posiciones añadiendo dos ceros hacia la izquierda, y te quedaría:

0 0 1 0 1 0 0 0

Si conviertes este número binario a decimal te dará 40.

Inversión bitwise

>>> ~100
-101

¿Por qué devuelve -101?

Devuelve el complemento del nº menos el nº que obtenemos cambiado cada 1 por un 0 y un 0 por un 1. Es lo mismo que -nº-1

Operador de identidad

Prueba si dos operandos comparten una identidad. Aquí hay dos tipos de operadores is e is not.

is

Por ejemplo, comparamos si un valor almacenado en x es igual a su valor.

>>> x = 10
>>> x is 10
True

is not

Aquí utilizamos el ejemplo anterior pero a la inversa.

>>> x = 10
>>> x is not 10
False

Operadores de membresía

Estos operadores permiten verificar si hay un str en otro str, lista, diccionario, tupla... (estos 3 últimos los verás más adelante). Se utiliza in para buscar y devolver True si encuentra dicho str, o, not in para verificar que no está.

in

>>> "echemos" in "echemos un bitstazo"
True

not in

>>> ".es" not in "echemos un bitstazo"
True

Módulos

¿Qué son los módulos? Los módulos son fragmentos de código que contienen librerías... que elaboran otros usuarios o que ya vienen integradas con Python. Hay muchos módulos que vienen ya pre-instalados en el sistema como pueden ser os que permite interactuar con el sistema operativo; subprocess que permite ejecutar comandos de shell; json con el que podremos trabajar con archivos o salidas JSON...

¿Cómo cargar este código?

El código de los módulos puede cargarse utilizando la palabra import, como en el siguiente ejemplo:

>>> import json

También podemos cargar parte del código de los módulos como por ejemplo random es un módulo que contiene métodos y propiedades. Podemos cargar solo uno de los métodos que tienes como es .random() y asignarle un alias para trabajar con él como en le siguiente ejemplo:

>>> from random import random as GenerarAleatorio
>>> GenerarAleatorio()
0.9037083824066462

¿Qué pasa si no me sé las propiedades o métodos de un módulo?

No pasa nada, puedes revisar siempre la documentación de Python pulsando aquí.

Espero que os haya gustado esta entrega, para la próxima, trabajaremos con listas, tuplas, sets y diccionarios.

  • en Desarrollo
  • 3 minutos de lectura

Curso de Python - Tuplas, listas, diccionarios y sets

A continuación vamos a ver algunos de los tipos de datos clave en Python junto con alguno de sus métodos, de los cuáles nos serán útiles para empezar.

Tuplas tuple

Conjunto de valores que no cambian dentro del flujo de la ejecución del programa. Pueden contener como valor todo tipo de dato incluyendo otra tupla.

Más info en la doc oficial de Python

>>> nacionalidad = ( 'Español', 'Turco', 'Italiano')
>>> paises = ( 'España', nacionalidad, 'Turquía', 'Italia' )
>>> print(paises)
('España', ('Español', 'Turco', 'Italiano'), 'Turquía', 'Italia')

Añadir elementos a la tupla:

>>> nacionalidad = ( 'Español', 'Turco', 'Italiano')
>>> paises = ( 'España', nacionalidad, 'Turquía', 'Italia' )
>>> paises += ('Francia', 'Munich')
>>> print(paises)
('España', ('Español', 'Turco', 'Italiano'), 'Turquía', 'Italia', 'Francia', 'Munich')

Duplicar el str o caracter que obtengamos por un nº de veces:

>>> nacionalidad = ( 'Español', 'Turco', 'Italiano')
>>> nacionalidad * 2
('Español', 'Turco', 'Italiano', 'Español', 'Turco', 'Italiano')

Muestra el str que esté ubicada en una posición:

>>> nacionalidad = ( 'Español', 'Turco', 'Italiano')
>>> print(nacionalidad[2])
'Italiano'

Mostrar un conjunto de valores específicos de la tupla haciendo uso de su posición:

>>> paises = ( 'España', nacionalidad, 'Turquía', 'Italia','Francia', 'Munich')
>>> print(paises[3:5])
('Italia', 'Francia')

Listas

Grupo de valores representados dentro de unos [], se pueden cambiar de forma simple y sencilla. Más info en la doc oficial de Python

Declarando una lista:

>>> animales = [ 'gato', 'perro', 'búho' ]

Añadir valores en la última posición de la lista, (similar a la tupla):

>>> animales = [ 'gato', 'perro', 'búho' ]
>>> animales += [ 'lagartija', 'pez' ]
>>> print(animales)
['gato', 'perro', 'búho', 'lagartija', 'pez']

También podemos utilizar .extend():

>>> animales = [ 'gato', 'perro', 'búho' ]
>>> animales.extend([ 'lagartija', 'pez' ])
>>> print(animales)
['gato', 'perro', 'búho', 'lagartija', 'pez']

Por otro lado podemos añadir un valor a partir de una posición específica dentro de la lista .insert()

>>> animales = [ 'gato', 'perro', 'búho' ]
>>> animales.insert(0, 'lagartija')
>>> print(animales)
['lagartija', 'gato', 'perro', 'búho']

Eliminar un valor de la lista:

>>> animales = [ 'gato', 'perro', 'búho' ]
>>> animales.remove('gato')
>>> print(animales)
[ 'perro', 'búho' ]

Multiplicar el nº veces los valores de la lista:

>>> animales = [ 'gato', 'perro', 'búho' ]
>>> animales * 2
['gato', 'perro', 'búho', 'gato', 'perro', 'búho']

Mostrar valores específicos utilizando la posición de dichos valores en la lista:

>>> animales = [ 'gato', 'perro', 'búho' ]
>>> print(animales[0:2])
['gato', 'perro']

Diccionarios

Son un conjunto de valores que se almacenan en modo clave:valor, separados los valores por comas, y todas las claves y sus valores van encerrados en {} como JSON. Las claves no pueden contener tuplas, diccionarios, sets... solo str o int. Más info en la doc oficial de Python

>>> ciudades = { 'Andalucía': 'Sevilla', 'País Vasco': 'Bilbao', 'Baleares':'Palma' }

Accediendo a un valor del diccionario:

>>> ciudades = { 'Andalucía': 'Sevilla', 'País Vasco': 'Bilbao', 'Baleares':'Palma' }
>>> print(ciudades['Andalucía'])
Sevilla

Obtener el nº de posiciones de una lista:

>>> ciudades = { 'Andalucía': 'Sevilla', 'País Vasco': 'Bilbao', 'Baleares':'Palma' }
>>> len(ciudades)
3

Obtener las claves de un diccionario:

>>> ciudades = { 'Andalucía': 'Sevilla', 'País Vasco': 'Bilbao', 'Baleares':'Palma' }
>>> ciudades.keys()
dict_keys(['Andalucía', 'País Vasco', 'Baleares'])

Obtener los valores de un diccionario:

>>> ciudades = { 'Andalucía': 'Sevilla', 'País Vasco': 'Bilbao', 'Baleares':'Palma' }
>>> ciudades.values()
dict_values(['Sevilla', 'Bilbao', 'Palma'])

Obtener un valor de una clave del diccionario:

>>> print(ciudades.get('Baleares'))

Eliminar un valor de una clave del diccionario:

del ciudades['Baleares']

# Esto de volverá None.
print(ciudades.get('Baleares'))

Cambiar el valor de una clave del diccionario:

ciudades['Baleares'] = 'Menorca'

# Esto de volverá Menorca.
print(ciudades.get('Baleares'))

Sets

Son un conjunto sin orden de valores encerrados en {} que se ordenan cuando se imprimen: Más info en la doc oficial de Python

>>> marcas_coche = { 'Opel', 'Citröen', 'Tesla' }
>>> print(marcas_coche)
{'Citröen', 'Opel', 'Tesla'}

Comparar 2 sets y mostrar los valores no duplicados de ambas listas

>>> marcas_coche = { 'Opel', 'Citröen', 'Tesla' }
>>> marcas_moto = { 'Suzuki', 'Citröen', 'Tesla', 'Yamaha' }
>>> marcas_coche | marcas_moto
{'Citröen', 'Opel', 'Suzuki', 'Tesla', 'Yamaha'}

Comparar 2 sets y mostrar los valores duplicados de ambas listas como sin repetirlos.

>>> marcas_coche = { 'Opel', 'Citröen', 'Tesla' }
>>> marcas_moto = { 'Suzuki', 'Citröen', 'Tesla', 'Yamaha' }
>>> marcas_coche & marcas_moto
{'Citröen', 'Tesla'}

Comparar 2 sets y mostrar diferencias:

>>> marcas_coche = { 'Opel', 'Citröen', 'Tesla' }
>>> marcas_moto = { 'Suzuki', 'Citröen', 'Tesla', 'Yamaha' }
>>> marcas_coche - marcas_moto
{'Opel'}
>>> marcas_moto - marcas_coche
{'Suzuki', 'Yamaha'}

Añadir un conjunto de valores a un set y que queden en primer lugar.

marcas_coche.update([["2","3","4"])
print(marcas_coche)
{2, 3, 4, 'Opel', 'Citröen', 'Tesla'}

Añadir un valor al set

marcas_coche.add("Valor")
print(marcas_coche)
{2, 3, 4, 'Opel', 'Citröen', 'Tesla', 'Valor'}

Eliminar un valor del set

marcas_coche.remove("Opel")
print(marcas_coche)
{2, 3, 4, 'Citröen', 'Tesla', 'Valor'}

Imprimir dos sets en uno:

setA = {1,2,3,4,5}
setB = {6,7,8,9,10}
print(setA|setB)
{1, 2, 3, 4, 5, 6, 7, 8, 9, 10}

¡Ya sabemos trabajar mínimamente con estos tipos de datos en Python! En los próximos cursos veremos como trabajar con el control de flujo, es decir, añadiendo condicionales para encausar las decisiones imperativas de nuestro script o programa, y también como iterar diferentes tipos de valores mediante el uso de los bucles.

  • en Desarrollo
  • 5 minutos de lectura

Flask - Creando una mini aplicación

En este tutorial aprenderás a utilizar Flask. Flask es un web framework elaborado en Python que te permite crear aplicaciones web bastante sencillas, pero potentes ya que el potencial se lo das tu elaborando tu propio sistema de validación, tus propios métodos de conexión a bases de datos... etc porque no olvidemos que es un microframework y no tiene muchas cosas como quizás tendría un framework como Django que contiene muchas más herramientas y desarrrollo.

Este tutorial lo he hecho basándome en la documentación oficial, pero con toques personales, así evito reproducir contenido una y otra vez.

¿Qué necesito?

  • Tener Python 3.5 o superior instalado y PyPy
  • Aunque soporte 2.7, no es recomendable utilizar esta versión porque el 31 de diciembre del año pasado se dejó de mantener la rama 2.x
  • Una o varias tazas de café

¿Cómo empezar?

A mi modo de ver las cosas y para no mezclar, siempre es mejor que utilices un entorno virtual que no el propio entorno del sistema, es decir, para instalar Flask hay que descargar una serie de códigos que se instalarán en tu sistema. Sin embargo, con un entorno virtual, puedes instalar, eliminar... o lo que quieras hacer sin dañar la instalación de Python del sistema base, ya sea Fedora, CentOS...etc

Creando un entorno virtual

$ python3 -m venv proyecto_flask

Cuando se haya creado, entonces ejecutamos:

$ flask/bin/activate

Este script carga variables de entorno y rutas para que puedas trabajar con tu proyecto, si te fijas, en el prompt de la terminal ya no está mostrándose como "$", si no, "(proyecto_flask) $"

Instalando Flask

Para instalar Flask, con el entorno virtual activo:

(proyecto_flask) $ pip install flask

Esto es todo, ya lo tendremos instalado.

Creando la mini aplicación

Utilizamos de ejemplo este directorio: /home/sincorchetes/proyecto_flask, si utilizas otro, que me imagino que sí, adáptalo al que utilices, y crea un subdirectorio llamado app.

Crea un archivo vacio y llámalo core.py (puedes llamarlo como quieras si luego defines que cargue el nombre correcto) y añades el siguiente contenido.

app/core.py
from flask import Flask
proyecto = Flask(_name_)

@proyecto.route('/')
def hola_mundo():
  return 'Hola Mundo'
  • La primera línea, importará el módulo Flask.
  • La segunda, inicializamos un objeto llamado proyecto que tiene una clase Flask y que hace referencia a sí mismo.
  • En la tercera línea, @proyecto.route('/') estamos diciendo que cuando el visitante acceda a: http://pepitodelospalotes.es verá lo que se haya definido en la función de abajo.
  • En las últimas líneas, desarrollamos la lógica de la aplicación, con la función hola_mundo(), le decimos que cuando el visitante acceda a la página verá lo que hay dentro del return, que en este caso es Hola Mundo.

Guarda el archivo, abre una terminal y sitúate en el directorio de la aplicación.

export FLASK_APP=/home/sincorchetes/proyecto_flask/app/core.py && \
export FLASK_DEBUG=1 && \
flask run

La variables FLASK_APP, defines el core de la aplicación, FLASK_DEBUG permite activar el modo depuración que viene con ayuda para que nos muestre de dónde puede provenir los errores...etc y flask run levanta un servidor de desarrollo para que puedas ver los cambios sin tener que utilizar un servidor web como Nginx o Apache.

Una vez levantada la aplicación, si accedemos a http://localhost:5000 verás el Hola Mundo que has definido en el archivo core.py.

¿Cómo creo una página?

Como he dicho anteriormente, Flask permite crear aplicaciones web, esto no solo incluye la parte de backend que es dónde definimos la lógica de la aplicación, si no que también puedes crear la parte frontend, la parte de visible con la que el usuario interactuará.

Hay que crear el directoriotemplates para añadir las páginas .html

Una vez hecho esto, creas el archivo app/templates/index.html y le añades el siguiente contenido:

index.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Ejemplo de aplicación hecha en Flask</title>
  </head>
  <body>
    <div class="contenedor">
      <div class="titulo">
        <h1>¡Bienvenidos a mi página Web!</h1>
      </div>
      <div class="tareas">
        <p>¿Te gustan los perros y los coches? Esta es tú página ideal.</p>
      </div>
    </div>
  </body>
</html>

Actualiza el fichero core.py de tal modo que se quede así:

app/core.py
from flask import Flask, render_template
proyecto = Flask(_name_)

@proyecto.route('/')
def hola_mundo():
  return render_template('index.html')

He añadido render_template que permite renderizar contenido .html en el proceso de importar módulos y en la última línea llamamos al método cuyo valor es el archivo que has creado.

Verás una página como esta:

¿Cómo añado hojas de estilo o código JavaScript?

Hay crear un directorio llamado static tal que así:

(proyecto_flask) $ mkdir /home/sincorchetes/proyecto_flask/app/static

Dentro de él, añade todo el contenido CSS o JS que cargará la página, lo que suelo hacer, es crear un subdirectorio css y para las hojas de estilo y js para la lógica de eventos para el usuario.

Para llamarlo, bastará con importar el módulo url_for y luego referenciarlo en el index.html. core.py

from flask import Flask,render_template,url_for
app/templates/index.html
<head>
  <link rel="stylesheet" href="{{ url_for('static',filename='css/nombre_archivo.css) }}">
</head>
<body>
  <script src="url_for('static',filename='js/nombre_archivo.js) }}></script>
</body>

Con esto bastará, creamos un archivo en app/static/css/ejemplo.css y añade el siguiente código:

app/static/css/ejemplo.css
.body{
  font-family: Arial;
}
.contenedor {
  border-radius: 30px;
  padding:20px;
  background-color: #D3D7CF;
}
.titulo {
  text-align:center;
}
.tareas {
  background-color: white;
  border-radius: 30px;
  padding:10px;
}
.date {
    font-size: 0.4em;
    text-align: right;
    padding-left:40%;
}

Creamos un archivo llamado ejemplo.js que mostrará un cuadro de diálogo:

app/static/js/ejemplo.js
alert("Bienvenido usuario")
index.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Ejemplo de aplicación hecha en Flask</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ejemplo.css') }}">
  </head>
  <body>
    <div class="contenedor">
      <div class="titulo">
        <h1>¡Bienvenidos a mi página Web!</h1>
        <hr>
      </div>
      <div class="tareas">
        <h2>Flask es un microframework web - <span class="date">Editado 19-09-2020 09:20:00 am</span></h2> 
        <p>En el siguiente artículo hablaré de las maravillas de Flask....</p>
      </div>
    </div>
    <script src="{{ url_for('static', filename='js/ejemplo.js') }}"></script>
  </body>
</html>

Cuando accedas a http://localhost:5000 vas a ver una página como esta:

No es que digas ¡como mola esta página!, simplemente es para que veas cómo se pueden crear rutas, cómo renderizar contenido .html desde el backend y cargar archivos css y js para la parte frontend de la aplicación.

En las próximas entregas, verás como trabajar con variables, listas...etc que se renderizarán en la página y con un toque más profesional en el diseño con Bootstrap.

  • en Desarrollo
  • 6 minutos de lectura

Mastering CSS - Primeros pasos

CSS proviene del inglés Cascade Style Sheet traducido al español como hoja de estilos en cascada que como su nombre propio indica, le atribuye estilo como colores, formas, bordes, dimensiones a determinados elementos o un conjunto de elementos de una página elaborada con lenguaje de etiquetado HTML.

¿Por qué CSS y no CSS3?

CSS ha tenido varias versiones a lo largo de los años, CSS2 según el portal de documentación Mozilla Developer, necesitó de 9 años para su estandarización desde agosto del 2002 hasta junio del 2011. Con lo que hace lento su normalización. Sin embargo, adaptaremos el contenido para la última pre-versión.

Reglas

En el CSS tenemos lo que se llaman reglas con las que estilizar los elementos del documento Web. Estas reglas están formadas por un selector que es un elemento Web como puede ser un anclaje (<a>); un párrafo (<p>), una tabla (<table>)... una propiedad que puede ser común para muchos elementos como color para un texto, anclaje... y un valor que suele determinarse según lo que tengamos que declarar en la propiedad, ya sean píxels, porcentajes, números y texto...etc Tanto la propiedad como el valor, van incluídos dentro de llaves {}

| Selector |
  --------           Valor
     |           | -------- |
     body {            |
        font-family: Sans;
        -----------
             |
         Propiedad

     }

NOTA: Se pueden añadir tantas propiedades como uno quiera, o el selector lo permita.

Prioridad

Cuando nosotros declaramos una regla a un elemento padre que engloba a muchos hijos tipo body. Todos los elementos heredarán las propiedades junto con el valor y se representarán como tal (siempre que el elemento lo permita). Sin embargo, cuando hacemos reglas específicas, siempre prevalecerán las específicas sobre las general. Por ejemplo, si tenemos un body con un color de fondo en negro, y párrafos con un fondo rojo. Los párrafos utilizarán de fondo el color rojo que se interpreta aquí como un subrayado.

Maneras de introducir CSS

Existen 3 formas de enmaquetación Web con las hojas de estilo que pueden alternarse entre sí, pero es preferible escoger 1, y a ser posible la última de todas estas. Más que nada por legibilidad del código y la propia separación de los demás lenguajes de marcas como es HTML del de programación Web como Javascript entre otros. 1. Etiqueta <style> 2. Atributo style="" 3. Fichero separado .css

Etiqueta <style>

Esta etiqueta se añade al elemento <head></head> la etiqueta <style></style> en la cuál, declararemos nuestro código CSS.

Ejemplo:

<head>
    <style>
        body {
            background-color: black;
            color: green;
            font-family: Sans;
        }
    </style>
</head>

Atributo style=""

Se le puede designar a un elemento un estilo más específico como un atributo.

Por ejemplo:

<body>
    <h1>Cuando éramos jóvenes</h1>
    <p style="color:brown"> Correteábamos en la playa con un cubito que llenábamos de agua del mar para hacer nuestros castillos más fuertes, mientras que otros en otras zonas de la península....</p>
</body>

Fichero separado .css

Sin duda alguna, esta es la mejor forma de enmaquetar una paǵina Web. Tener un directorio en nuestro proyecto llamado css/ al que añadir todas nuestras hojas de estilo personalizadas sin tener que buscar dentro de 1000 líneas de css.

Para incluirna en nuestra Web, bastará con añadir la siguiente etiqueta en <head></head>

<link rel="stylesheet" href="css/example.css">

Pongámos un ejemplo:

/var/www/html/mi_pagina
|
|-- doc.html
|-- css/
     |
     |-- example.css

doc.html

<!DOCTYPE html>
<html>
    <head>
        <title>Mi primera página Web</title>
        <meta author="Álvaro Castillo">
        <meta keywords="web, html5, css">
        <link rel="stylesheet" href="css/example.css">
    </head>
    <body>
        <h1>Cuando éramos jóvenes</h1>
        <p> Correteábamos en la playa con un cubito que llenábamos de agua del mar para hacer nuestros castillos más fuertes, mientras que otros en otras zonas de la península....</p>
    </body>

example.css

body {
    background-color: yellow;
    font-size: 20px;
}
p {
    font-family: Sans;
    color: cyan;
}

El resultado: * Fondo en todo el body de color amarillo. * Tamaño fuente general para todos los elementos de la página a tamaño 20 * Tipo de familia de la tipografía que utilizarán los párrafos es Sans. * Color de las letras de todos los párrafos utilizará el color Azul Cian.

Enmaquetación básica

A continuación veremos algunas propiedades con las que podremos jugar con diferentes elementos.

Fuentes

Las fuentes son muy importantes para el diseño de nuestro proyecto. No solo porque le otorgamos un cierto caracter y estilo, sino porque también ayudaremos al lector a poder comprenderlo y sobre todo qué sencación de seguridad podemos darle. Recordemos que las fuentes influyen en el punto de vista del lector que pueden determinar insconcientemente algunos sentimientos como bien se recoge en algunos artículos de la psicología de la tipografía.

Tamaño de letra

Cuando queremos modificar el tamaño de las fuentes de nuestro documento, nos encontramos con una propiedad clave como font-size. Esta nos permite asignar un valor que se puede declarar como %, unidades de longitud, una cadena como valor y/o em.

  • Los porcentajes tienden muchas veces a fallarnos y a no comportarse como uno quiere ya que los navegadores no los interpretan igual, mencionar que está disponible para utilizarse pero que no son recomendados.
  • Por otro lado, tenemos diferentes medidas de longitud como los píxeles (px), centímetros (cm)...
    • Una medida interesante es el em, es un tamaño relativo de fuente. Si utilizamos 2 ems quiere decir que equivale 2 veces el tamaño de la fuente actual. Suele utilizarse mucho en diseños "responsive"
  • medium, xx-small, small, large, x-large, xx-large, initial, inherit...: Son valores no numéricos que predefinen el tamaño de una fuente.
Colores

Los colores pueden mostrase de diversas formas y diferentes esquemas del color: * Palabras clave * Esquema RGB * Esquema HSL * Canales alfa

Palabras clave

Éstas contienen un código hexadecimal que ya interpreta el navegador directamente a pesar de ser un código hexadecimal encubierto no requiere más que utilizar la palabra clave para su uso. * cyan: Azul Cian * pink: Rosa * yellow: Amarillo * brown: Marrón * blue: Azul

Y así un sin fin más, podemos ver una lista completa a través de la página de la w3.

RGB

Red Green Blue es un modelo de color que trabaja con los colores primarios, y que a su vez, la mezcla de estos generan diferentes colores aplicando una intensidad de color diferente en cada uno de estos 3 colores. Este modo de color pueden llegar a crear 16.7 millones de colores solo haciendo uso de estos 3 colores. Para poder darle un valor, se utiliza numeración decimal que va desde el 255 (saturación máxima de colores) hasta el 0 (ausencia total de color), o bien, mediante representación hexadecimal completa o abreviada.

Color Valor decimal Valor hexadecimal Hexadecimal abreviado
Rojo 255 0 0 ##FF0000 #FF0
Verde 0 255 0 ##00FF00 #0F0
Azul 0 0 255 ##0000FF #00F

NOTA: En el artículo anterior, explicamos como pasar de decimal a hexadecimal o viceversa. La representación abreviada del hexadecimal, solo puede hacerse si coinciden las 3 primeras cifras de cada color. F= Rojo, F=Verde, F=Azul

HSL

HSL o Hue, Saturation, Lightness es un modo de color basado en matriz, saturación y luminosidad. La matriz comprende un valor entre 0 y/o 360 refiriéndose a los grados en los que rotará en el espectro de colores. Mientras que la saturación y el brillo tiene una relación en porcentajes comprendidos entre 0 y 100.

Canales alfa

El canal alfa se añadió en CSS3 como una mejora para añadir cierto efecto a las fuentes añdiendo un grado de transparencia tanto para el modo de color RGB como para el HSL, eso sí, no podemos declararlo en valores hexadecimales.

Propiedades

Aquí dejamos una lista con algunas propiedades y sus valores para trabajar con el texto:

  • font-size: px|%|small,large...: Permite establecer el tamaño de la fuente mediante:
    • Unidad de longitud (px, cm, em...)
    • Porcentaje
    • Palabras clave como medium, small, large...
  • font-family; a,b,c,d...: Permite definir que tipografía utilizar, y sobre todo, en caso de que no la tenga el sistema o no se descargue bien de un CDN, mostrar la siguiente fuente especificada.
  • font-style; normal|italic|oblique: Muestra como se verá la fuente:
    • normal: Formato limpio
    • italic: Tipo itálica, en HTML sería lo equivalente a -> <em></em>
    • oblique: Parecido a itálica, pero con otro estilo
  • font-weight: normal|bold: Permite añadir negrita o no
  • color: valor:: Establece un valor para la fuente:
    • RGB => Hexadecimal: #000000
    • RGB => Hexadecimal abreviado: #000
    • RGB => Decimal: rgb(rrr,ggg,bbb)
    • RGB => Decimal con canal alfa: rgba(rrr,ggg,bbb,A)
    • HSL => hsl(grados,%,%)
    • HSL => Con canal alfa: hsla(grados,%,%,A)
  • background-color:: Establece un subrayado en la fuente parecido al que utilizamos para recalcar lo importante en los libros, se pueden declarar los mimos valores de la propiedad color.

Finalizando

En las siguientes entregas hablaremos sobre la teoría de las cajas, modificar vistas en relación a la resolución de pantalla, jugar con los selectores y frameworks más utilizados.

¡Un saludo!

Fuentes

Wikipedia W3 Mozilla Developer Portal LenguajeCSS CSS3 banner

  • en Desarrollo
  • 14 minutos de lectura

Mastering HTML5

HTML proviene de las siglas en inglés HyperText Markup Language, traducido al español "Lenguaje de etiquetas de Hipertexto". Es un lenguaje (no de programación) interpretado que principalmente se caracteriza por el uso de unas "etiquetas". Estas permiten generar y organizador una serie de elementos que se representarán dentro de una página Web.

Funcionamiento

El código que se escribe será interpretado por un navegador Web como es el caso de Google Chrome, Mozilla Firefox, Opera, Microsoft Edge. Estos exploradores leerán lo que se ha escrito, lo interpretará y lo representará dentro de nuestro documento Web en cuestión de milisegundos.

Sintaxis

El 95% de las etiquetas empiezan siempre empiezan y acaban con elemento que queramos representar en el documento Web.

<h1>Ejemplo de encabezado</h1>, esto representará un encabezado con un tamaño de fuente superior al resto de encabezados y con un sombreado añadido.

Sin embargo, existen etiquetas que contienen el nombre del elemento junto con una serie de atributos pero sin mencionar el nombre del elemento en el cierre. <input type="button">, esta etiqueta por ejemplo generará un tipo de elemento de información de entrada en modo botón.

   Atributo     Contenido
   ________     _________
     |              |
<p attr="valor">Texto ej</p>
---      -----           ---
 |                        |
 |      Etiquetas         |
 __________________________

Además, veremos cómo las etiquetas configuran un árbol de familias padre-hijo ya que pueden anidarse indefinidamente.

Tipos de atributo

Existen una serie de atributos globales estandarizados para los elementos de nuestro documento que nos permiten definir eventos como cuando pulsemos un clic que haga una determinada acción (esto es en relación con JavaScript que veremos más adelante), identificación de un elemento como único como es el caso del atributo id... podemos encontrar una lista de estos atributos aquí

Por otro lado, también existen tributos sin valor como podemos destacar placeholder, controls... de los cuáles hablaremos de ellos más tarde.

Etiquetas

<!DOCTYPE html> Nos permite definir que lenguaje de etiquetas debe interpretar el navegador. En este caso comunicamos al explorador que debe interpetar la versión 5 de HTML.

<html></html> Constituye el comienzo y final del documento, si el contenido junto con los elementos se encuentran fuera de estas etiquetas, nos arriesgamos a que los navegadores no logren interpretarlo.

Nota: El atributo lang="" permite definir el idioma del documento, si es español deberá llevar como valor "es", si es Francés, "fr" y viceversa. Más información en la página de la w3

<head></head> Permite definir una cabecera en nuestro documento en el cual, le otorgamos cierta información descriptiva al mismo con el uso de las siguientes etiquetas: <title></title>: Define el título del documento, este lo veremos representado en el título de la pestaña y de la ventana del explorador Web.

Las etiquetas <meta> Estas permiten definir la información tanto del autor como palabras clave, descripción, codificación...

<meta author="Nombre del autor"> <meta keywords="Palabras, clave``<meta description="Descripción del documento"> <meta charset="utf-8">

Etiquetas opcionales <link>: Es una etiqueta muy utilizada cuando se quiere vincular una hoja de estilos elaborada con CSS3. Las hojas de estilos permiten añadir determinados diseños personalizados para cada elemento de nuestro documento Web. Tienen una sintaxis propia que explicaremos más adelante.

<body> La etiqueta <body></body> permite definir el cuerpo de nuestro documento Web. Aquí añdiremos todos los elementos con los que el usuario interactuará como es el caso de los párrafos, imágenes, videos, enlaces...etc

<footer></footer> Este elemento es el último dentro del documento Web que estemos redactando, permite añadir un pie de página al documento con la información que nosotr@s estimemos oportuna.

Comentarios

Los comentarios nos permiten puntualizar determinadas partes del código para explicar que sirve, anotar cómo hemos llegado hasta ahí o simplemente salvarnos de una metedura de pata. Muchas personas no hacen uso de los comentarios arriesgandose sobre todo en un proyecto en el que hay más personas involucradas frene productivamente su desarrollo.

Para comentar simplemente tendremos que utilizar estos caracteres <!-- para la apertura y --> para el cierre.

<!-- -->

Estilizando

Todos los elementos poseen una serie de atributos por defecto sobre su estilo que pueden modificarse aplicando una serie palabras clave que se basan en un lenguaje de estilos llamado CSS que veremos en los siguientes posts.

Con él, podemos definir un fondo de pantalla mucho más vistoso, modificar el tamaño y familia de la tipografía que queremos utilizar, modificar la posición de los elementos...

Para poder modificar los estilos se pueden hacer de 3 maneras. * Etiqueta * Añadiendo la etiqueta <style></style> dentro del elemento <head></head> * Atributo de un elemento * <div style="background-color:black"></div> * Hoja referenciada * Adjuntando en <head></head> un enlace a una hoja de estilos de la siguiente manera: <link rel="stylesheet" href="ruta_absoluta_o_relativa_de_la_hoja_de_estilos.css">

La norma de un buen desarrollador es, nunca mezclarás. Con esto queremos decir, que debemos escoger siempre la 3 opción ya que es más legible para los demás y para uno mismo, ya que si no funciona determinado estilo y tenemos todos ellos desperdigados por los elementos, nos volveríamos loc@s para encontrarlos.

Encabezados

Los encabezados nos permiten pre-formatear un texto con un sombreado y un tamaño específico. Nos permiten describir el contenido que vamos a comentar. Un ejemplo sencillo son los titulares de un periódico.

Otorgando estilo al texto

Existen hasta 6 tipos de encabezados:

Encabezado

<h1>Encabezado 1</h1>

Encabezado 2

<h2>Encabezado 2</h2>

Encabezado 3

<h3>Encabezado 3</h3>

Encabezado 4

<h4>Encabezado 4</h4>

Encabezado 5

<h5>Encabezado 5</h5>

Encabezado 6

<h6>Encabezado 6</h6>

Párrafo

Nos permiten representar el contenido en forma de párrafos. Esto genera un salto de línea cada vez que lo definimos. <p></p>

Énfasis dentro de un párrafo

Si queremos destacar un determinado contenido dentro de un párrafo, utilizaremos la etiqueta <span></span>.

Separadores de contenido

Cuando queremos representar un contenido debidamente estructurado y organizado no lo podemos representar solamente con etiquetas que den formato al contenido. Necesitaremos unas etiquetas que nos permitan representar el contenido como queramos.

Para esto se inventaron los div's. La palabra proviene del inglés "division" o lo que es lo mismo, un contenedor que divide la página en secciones. Estas secciones son muy útiles para agrupar elementos en un documento HTML.

Con la llegada de HTML5 los divs cobran un significado semántico y ahora tenemos las siguientes etiquetas: * <header></header>: Dónde especificamos qué añadir en la cabecera de la página, el equivalente en el viejo estándar es <div class="header"></div> Divs en HTML5{.right} * <nav></nav>: Utilizado para generar una barra de navegación, en el viejo estándar sería <div class="menu"></div>

  • <section></section>: Representa una sección general dentro de un documento. Antes se hacía uso de <div class="content"></div>

  • <article></article>: Se utiliza para representar un artículo, que si se anidan, quiere decir que todos los artículos estarán relacionados con el artículo padre. Antes se utilizaba, <div class="article"></div>

  • <aside></aside>: Se considera un elemento independiente del contenido ya que se suele utilizar para elaborar barras laterales, elementos publicitarios...

  • <footer></footer>: Añadimos un pie de págin al documento. <div id="footer"></div>

Matizando el contenido

Se puede añadir ciertos matices al contenido mediante las siguientes etiquetas: * <em>: Permite mostrar el texto en cursiva * <strong>: Añade un énfasis en negrita * <u></u>: Subrayado de texto * <strike></strike>: Tacha el texto * <sup></sup>: Crear un texto con formato de exponente * <sub></sub>: Crea un texto con formato de texto más bajo y más pequeño.

Salto de línea

Si queremos añadir un espacio entre elementos, se puede llevar a cabo haciendo uso de <br>. También podemos añadirlo dentro de un párrafo y dividirlo sin afectar la posición completa del mismo con respecto al resto de elementos.

<p>Esto es un ejemplo de un párrafo que dividiremos en dos. <br> Se visualizará un salto de línea dentro de este párrafo</p>

Listas

En HTML tenemos a disposición 2 tipos de listas, una lista ordenada con la que tendremos ítems organizados por números y por otro lado, una lista sin ordenar con otros tipos de símbolos para representar a los ítems de la lista.

Lista sin orden

Para elaborarla utilizamos <ul> "unordered list" </ul> junto con los ítems <li></li> "list items".

Por ejemplo, categoría de Frutas con algunas de ellas:

<ul>
    <li>Pomelo</li>
    <li>Fresa</li>
    <li>Melocotón</li>
</ul>
  • Pomelo
  • Fresa
  • Melocotón

Lista ordenada

Para construirla utilizamos la etiqueta <ol></ol> además de <li></li> para definir los ítems.

ToDo, tareas que hacer

<ol>
    <li>Hacer la comida</li>
    <li>Desfragentar Windows</li>
    <li>Instalar Antivirus Windows</li>
</ol>
  1. Hacer la comida
  2. Desfragentar Windows
  3. Instalar Antivirus Windows

Vínculos

Los vínculos permiten conectar una página con otra, pueden utilizarse rutas relativas o absolutas siempre y cuando el fichero exista. <a href="https://www.echemosunbitstazo.es">Echemos un bitstazo</a>

<a> proviene del inglés "anchor" que en español quiere decir "ancla".

Hay un atributo que es bastante útil y muy utilizado para definir el comportamiento del enlace. Este atributo recibe el nombre de target. Es muy útil sobre todo para los visitantes que quieran consultar una información enlazada en el documento sin tener que perderlo de vista. Para abrir el enlace en una nueva ventana, se hace uso del atributo target="_blank". Tambien tenemos los valores: * _self: Acción por defecto, se abre la página en la misma página * _parent: Se abre el documento a cuerpo completo en una ventana * framename: Se abre el documento en un frame

Creando un anclaje

Podemos enlazar varios contenidos en el mismo documento. Una de las utilidades es la construcción de un índice a partir de los encabezados de título.

Especificamos en un encabezado el id, y mediante una lista, generamos un enlace que apunte hacia ese id seguido de almohadilla.

<body>
    <ol>
        <li><a href="#intro">Introducción</a></li>
        <li><a href="#howto">¿Cómo hacerlo?</a></li>
        <li><a href="#resources">Fuentes</a></li>
    </ol>
    <h1 id="intro">Introducción</h1>
    <p>Lorem Ipsum</p>
    <h1 id="howto">¿Cómo hacerlo?</h1>
    <p> Ipsum Lorem</p>
    <h1 id="resources">Fuentes</h1>
    <p>LoIpSum</p>
</body>

Botón

Se puede añadir un botón. <button>Texto a mostrar</button>

Nos puede servir cuando desarrollemos en JavaScript que cada vez que pulsemos el botón ocurra algo como en el siguiente ejemplo:

Imágenes

Para añadir imágenes tipo .jpeg, .png, .jpg, .gif... tenemos que utilizar la etiqueta <img src="ubicación.img" />. El valor que recibirá el atributo SRC es la URL de la imagen que puede añadirse desde una rula relativa o absoluta.

Hay un atributo específico que se utiliza para aquellas personas que tengan dificultades en la visión o no puedan ver directamente, existen "lectores de pantalla" que leen el texto generando un audio para que puedan escuchar cuál es el contenido del documento.

¿Pero cómo lee una imagen un "lector de pantalla"?

No la lee, básicamente toma el valor del atributo, que en este caso suele ser una descripción y se lo comunica a la persona que accedió al documento.

<img src="ubicación.img" alt="Paseo de Gracia"/> Problema con la imagen

En caso de que falle la carga de la imagen, también podemos leer la descripción, o si situamos el cursor encima de ella.

Por otro lado permite mejorar el SEO (Search Engine Optimization) ya que los motores de búsqueda como Google no pueden indexar las imágenes, no las lee directamente y utilizan este atributo para tener una descripción y así posicionar mejor tu sitio.

Añadiendo un video

Antaño, para añadir un video al sitio Web, necesitamos tener un reproductor que estaba elaborado en Adobe Flash Player y rezar porque funcionase. Sin embargo, con el tiempo, esto se ha solucionado implementando la etiqueta <video></video>

Esta etiqueta requiere del atributo src que apunte a la fuente del video. Se puede forzar la resolución del video utilizando los atributos: * width: Para el ancho en píxeles * height: Para la altura también en píxeles

Para especificar el MIME-type del video, se utiliza el atributo type="x/y". type="video/mp4". Un MIME-type es básicamente informar al documento del tipo de contenido que se quiere mostrar. Aquí tienes una lista con multitud de tipos

Por último el atributo controls que no posee un valor alguno, permite mostrar los controles del reproductor.

Está muy bien añadir como contenido dentro de la etiqueta video (que como hemos visto queda vacía) un texto que comente "Video no soportado", para que aquella persona que espere a ver el video comprenda que su navegador no lo soporta.

Añadiendo un audio

Exactamente se añade igual como el video solo que cambia la etiqueta <video> por <audio> y que por obligación, hay que especificar el atributo controls, si no, no funcionará a pesar de haberlo encontrado en su ruta.

Tablas

Si queremos organizar la información en tablas, simplemente tendremos que utilizar las siguientes etiquetas:

  • <table></table>: Construye una tabla.
  • <thead></thead>: Define el encabezado de la tabla.
  • <th></th>: Se incluye dentro de la etiqueta <thead></thead> para definir el nombre de las columnas
  • <tbody></tbody>: Define el contenido que irá en la tabla
  • <tfoot></tfoot>: Pie de la tabla
  • <tr></tr>: Define una nueva fila, requerido para thead,tbody, tfoot
  • <td></td>: Se utiliza para definir el contenido de las celdas que van dentro de <tbody> y <tfoot>

Un ejemplo más sencillo:

Cabecera tabla C1 Cabecera tabla C2 Cabecera tabla C3
Celda F1:C1 Celda F1:C2/td> Celda F1:C3
Celda F2:C1 Celda F2:C2/td> Celda F2:C3
Pie de tabla C1 Pie de tabla C2 Pie de tabla C3

Y representada en forma de código:

<table>
    <thead>
        <tr>
            <th>Cabecera tabla #1</th>
            <th>Cabecera tabla #2</th>
            <th>Cabecera tabla #3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Celda F1:C1</td>
            <td>Celda F1:C2</td>
            <td>Celda F1:C3</td>
        </tr>
        <tr>
            <td>Celda F2:C1</td>
            <td>Celda F2:C2</td>
            <td>Celda F2:C3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Pie de tabla</td>
            <td>Pie de tabla</td>
            <td>Pie de tabla</td>
        </tr>
    </tfoot>
</table>

Añadiendo espacio

Se puede añadir un espacio en las columnas cuando no hay contenido que representar mediante el atributo colspan="x" en un <td> ó <th>, donde X es un número entero.

No obstante, también podemos hacerlo en las filas con el atributo rowspan="y", dónde y es un valor entero.

Formularios

En HTML se nos permite generar formularios para recoger datos.

NOTA: No mostraremos en esta misma página los inputs, porque dan lugar conflictos con estilo y JS, sin embargo, hemos añadido el mismo código con la descripción en el servicio "JSFiddle" que puedes acceder desde aquí. Solo hay que pulsar en RUN y en la parte inferior derecha aparecerá una pequeña ventana con el código resultante.

<form></form>: Creamos los formularios y los cerramos de la siguiente forma. Esta etiqueta posee una serie de atributos muy especiales como es method="" y action="". * method="": Especificamos el encabezado HTTP que queramos utilizar, existen 5, pero comentaremos los 3 más utilizados: * GET: Los datos que se envían se pueden ver a través del campo URL del explorador. Se suele utilizar para obtener información de un servidor de un recurso específico. * POST: Los datos se envían como si fuera un modelo de caja negra, no se ven. Este método se suele utilizar para enviar información al servidor y que este sea recepcionado por un lenguaje o sistema de fondo. * PUT: Muy común para subir archivos.

  • action="": Define a qué ruta enviar la información, si hay un fichero que lo trata del lado del servidor elaborado con PHP, Ruby on Rails.. o que sea procesado con JS mediante un AJAX... mil posibilidades.

Etiqueta

Esta etiqueta se utiliza para asociar un control de un formulario y se vincula con un input, este provee de una breve descripción. Este hace uso de un atributo llamado for cuyo valor es el id del input.

Por ejemplo:

Elementos del formulario

Un formulario no es un formulario solo por tener una etiqueta que lo defina, si no tenemos una serie de elementos que nos permitan interactuar con la persona que se encuentra detrás de la pantalla, poco podemos hacer con él.

Información tipeada

Los siguientes elementos nos permiten recoger información escrita por el usuario.

  • Permite recoger texto en una sola línea. <input type="text">
  • Recuadro ajustable de texto en el que se puede visualizar lo escrito en múltiples líneas. <textarea></textarea>
  • Campo tipo input que tiene una validación que no permite al usuario enviar la información si no inserta una dirección mail válida. <input type="email">
  • Elemento del formulario que permite verificar si la URL introducida es correcta, sin embargo, en aquellos navegadores que no soporten este campo se tornará en un input tipo texto. <input type="url">
  • Campo tipo text con opciones adicionales como un icono con el que se puede eliminar lo previamente escrito además de soportar (según el navegador) un pequeño historial de búsqueda realizada. <input type="search">
  • Elemento del formulario en un navegador de escritorio no se aprecia la diferencia, pero si utilizamos un smartphone o un dispositivo móvil. A la hora de escribir, el teclado se alternará mostrando únicamente el "dial pad". <input type="tel">

Fecha y hora

Si queremos recoger campos de fecha y de hora, utilizaremos:

  • Permite establecer una fecha. <input type="date">
  • Permite escoger un mes del año y muestra el año del mes seleccionado. <input type="month">
  • Muestra la semana seleccionada y muestra el año de la semana seleccionada. <input type="week">
  • Permite seleccionado una fecha (MM/DD/YYYY) y además, hora (HH:MM:SS)<input type="datetime-local">
  • Muestra la hora en formato 12H y la hora asignada. <input type="time">

Opciones y/o elecciones

Los siguientes elementos a nuestra disposición para seguir recolectando datos de usuario:

  • Representa una casilla para marcar múltiples opciones, muy útil para representar las famosas casillas de "Acepto..." o múltiples subscripciones. <input type="checkbox">
  • Opción única dentro de un conjunto de opciones múltiples. <input type="radio">
  • Permite seleccionar un valor representado en una barra y que devuelve un número entero. <input type="range">

Select

Los select son inputs que agrupan opciones que se muestran a través de una lista desplegable cuando se quiere escoger una opción.

Su sintaxis es:

<select>
    <option></option>
</select>

Una de las diferencias importantes del select es que el atributo value no se asigna en <select></select>, si no que se asigna en cada una de las opciones.

También se puede definir una opción por defecto utilizando un atributo sin valor llamado default.

<select name="select">
    <option value="1">Opción #1</option>
    <option value="2">Opción #2</option>
    <option value="3" selected>Opción #3</option>
</select>

Otros input

Estos inputs son especiales ya que el usuario no marca casillas, elige opciones, o escribe en recuadros de texto.

  • Envía un fichero para su posterior procesamiento. <input type="file">
  • Permite seleccionar una imagen. <input type="image">
  • Lo que se conoce como "Color picker" o selector de color, permite seleccionar un color y obtener un código hexadecimal (RGB). <input type="color">
  • Añade un input con un valor X oculto en el formulario: <input type="hidden">
  • Suprime toda información contenida en los campos del formulario: <input type="reset">

Enviando datos

Para poder enviar los datos del formulario necesitaremos un input que actúe de botón y los pueda enviar. También se pueden utilizar otros elementos y hacer el envío mediante JS, pero eso se verá en otros posts.

  • <input type="submit"> Enviando datos:

Se puede modificar el mensaje de "Submit" utilizando el atributo value: <input type="submit" value="Enviar">

Atributos adicionales

Podemos añadir ciertos atributos que nos pueden ser útiles a la hora de verificar que el usuario realmente va a enviar información y no la envía vacia, también podemos añadir una pequeña descripción dentro del input para que el usuario se percate que tipear. Algunos de estos atributos son característicos porque no es necesario que se le asigne un valor.

  • Evitar que el usuario envíe información vacía required.
  • Añadir una descripción placeholder="Descripción"
  • Deshabilitar la edición del input readonly
  • Deshabilitar un input disabled
  • Especificar tamañado del input size=X
  • Definir el límite de caracteres permitido maxlength=X
  • Establecer el primer input al que introducir información autofocus
  • Establecer valores máximos y mínimos max=X y min=Y

Hay muchos más atributos aquí

Fuentes:

  • en Desarrollo
  • 4 minutos de lectura

¿Qué es PHP y cómo funciona?

Bienvenido a mi primera entrega de PHP, en esta entrega podrás conocer los conceptos básicos para saber qué es PHP y cómo trabaja. También verás ejemplos de un código PHP programado para una Web y también ejecutado directamente en una consola PHP en tu sistema operativo.

Una vez que acabes de leer esta entrada podrás:

¿Qué es PHP?

PHP viene de las siglas un tanto recursivas en inglés PHP: Hypertext Preprocessor.Es uno de los lenguajes de programación de código abierto más populares que existen en el desarrollo de páginas Web cuyo contenido sea dinámico como puede ser un blog como es el caso de Wordpress; una herramienta de administración de monitorización como puede ser Nconf... por lo que los desarrolladores lo conocerán como un lenguaje que se ejecuta en el lado del servidor y no en el lado del cliente como es el caso de Javascript.

Además de poder trabajar con él generando páginas Web cuyo contenido sea dinámico, también se pueden crear scripts y rutinas conjuntamente con el sistema operativo, ya que posee una consola con la que poder interactuar con él.

Esto permite a PHP ser un lenguaje versátil con el que puedes programar procesos o rutinas que se ejecuten en el sistema mediante metodología de scripting, o bien, programar procesos que trabajen con un servidor Web, un sistema gestor de base de datos... que puedan generar contenido dinámico.

¿Cómo funciona?

A nivel de sistema operativo, cuando tienes una consola, los comandos que se ejecuten en ella, directamente se ejecutará y devolverá un resultado. Esto es válido también para el desarrollo de scripts junto con el sistema operativo. Se pueden crear rutinas y ejecutar código bash a través de una shell de PHP.

Sin embargo, también se puede ejecutar código PHP y que inserte el resultado en una página web con contenido HTML siempre y cuando su extensión sea .php. Además, se puede controlar qué código HTML dependiendo de un resultado como por ejemplo, que quieres que se muestre si estás logueado o no, o si incorporas un sistema con mecanismos de control.

Aquí tienes una explicación simple del funcionamiento de un servidor Web con PHP.

Programando con PHP en terminal

Para abrir una terminal y empezar a trabajar con PHP directamente hay que ejecutar:

php -a
Interactive shell

php >

Verás que el prompt del sistema a cambiado a php >

Se puede ejecutar el código desde un fichero:

Contenido del archivo ejemplo.php
$foo = "Hello world";
echo $foo;

Ejecutamos:
php -f ejemplo.php
Hello world $
  • NOTA: No necesariamente hay que utilizar la extensión .php para que ejecute el código PHP que haya dentro de un archivo.

Trabajando con PHP con un servidor Web

Para trabajar con un servidor Web como NGINX, Apache, Lighthttpd, Cherokee... habrá que respetar la extensión .php en tus archivos. y añadir una etiqueta de apertura para que el servidor interpete el código PHP como código PHP y no código HTML.

Por ejemplo:

/var/www/html/index.php en un servidor X existe el siguiente código:

<?php

    echo "Hello World!" # Contenido de ejemplo que muestra la frase Hello world
?>

Si el servidor Web y el PHP están correctamente instalados, devolverá el siguiente mensaje:

Hello world!

Automáticamente, se traduce en HTML como un párrafo <p>Hello world!</p>

Se puede mezclar código HTML y PHP siempre y cuando tenga la extensión .php tu archivo:

En /var/www/html/foo.php de un servidor Y:

<!DOCTYPE html>
<html>
    <head>
<title><?php echo$titulo; ?> </title>

<meta charset=”utf-8”>

</head>

<body>

<?php $titulo = “Esto es untitulo”; ?>


<?php $texto= “Esto es unalínea de código”; ?>

<p><?php echo $texto;?></p>

</body>
</html>

Esto va a generar una página con el siguiente resultado, que será interpretado por el navegador como dos párrafos:

<p>Esto es un título</p>
<p>Esto es una línea de código</p>

Si queremos saber toda la información que tiene la versión que tienes instalada de PHP bastará con:

<?php

    phpinfo():

?>

En la siguiente entrega te encontrarás con: * ¿Cómo instalar PHP? * ¿Cómo configurarlo?

Referencias

  • en Desarrollo
  • 1 minuto de lectura

Share Your Doc una versión minimalista de Pastebin

Hace unos días acabé una pequeña herramienta Web llamada Share Your Doc, que permite compartir código fuente, mensajes, scripts...etc via Web como si fuese un típico servicio de Pastebin, Fpaste como seguramente conocerás.

Sin embargo, lo bueno que tiene este, es que trabaja conjuntamente con el sistema operativo, no requiere de ningún método para validarse de usuarios, ni tampoco hace uso de conexiones FTP. Simplemente, añades tu código, creas el token y a correr.

Es una herramienta pensada para trabajos de grupo con desarrolladores, administradores de sistemas... aunque puedes darle el uso que quieras. Lo único que necesitas para tenerla instalada, es tener PHP, un servidor Apache, y si acaso, tocar algún que otro permiso en Linux.

Para obtenerla solo te tendrás que clonar el repositorio alojado tanto en Github como en Gitlab.

git clone https://gitlab.com/sincorchetes/shareyourdoc.git
git clone https://github.com/sincorchetes/shareyourdoc.git

O si deseas, también puedes descargar el SRC desde la página del repositorio.

NOTA: Si usas SELinux, asegúrate de tener etiquetados todos los archivos bajo: unconfined_u:object_r:httpd_sys_content_t:s0

¡Espero que os guste, saludos!

  • en Desarrollo
  • 3 minutos de lectura

Twister, gestiona tus frameworks frontend más populares desde Bash

Buenas tardes compañer@s, siento no poder llegar a los plazos de las entregas, pero tenemos un ritmo frenético de trabajo, no obstante, tenemos muchas ideas para entregar y sobre todo queremos acabar nuestro Mastering en Bash para/con vosotr@s.

Hemos ideado un script llamado ¡Twister!, ¡Sí!, porque mezclar frameworks es divertido e incrementa las funcionalidades de nuestros sitios Web por menos tiempo!

Twister nos permite crear nuestros proyectos basados en frameworks conocidos del lado del "front-end". Para quiénes no lo sepan, cuando se elabora un desarrollo Web, suelen haber (no siempre) diversos compañer@s que se encargan de diversas capas del proyecto. * Desarrolladores front-end, son aquellas personas que se dedican a elaborar el diseño de la página Web como la plantilla, las ventanas de diálogo, efectos... * Programadores back-end, encargad@s de elaborar todo el contenido que será procesado por servidores, como consultas a sistemas gestores de bases de datos...etc * Redactores de documentación, se encargan de elaborar los manuales de usuari@, de continuación de desarrollo...

Pero.. ¿Qué es un framework?

Ahora bien, ¿Qué es un framework? Un framework o bifurcación en español, es una extensión de un software, aplicación...etc que ya existe, y potenciarlo bajo otro nombre. Ya sea porque el software que está es viejo, ya no se mantiene, y se pretende darle otro aire; por motivos prácticos como pasó cuando Oracle paró el desarrollo de OpenOffice y así nació LibreOffice; enriquecimiento personal...

Sin embargo, en los desarrollos Web es común ver como hay una multitud de frameworks que permiten facilitarnos la vida a tod@s aquell@s que diseñan o elaboran un sitio Web. Ya que, una persona o un conjunto de personas han elaborado otra forma de hacer las cosas, y que, si lo hiciésemos nosotr@s desde 0 tardaríamos meses de trabajo tedioso como es la traducción de mensajes a otros idiomas de cada diálogo que elaboremos, un sistema de login de usuari@s...

Ahora bien, este script permite descargar y crear entorno de trabajo con algunos frameworks más utilizados como es el caso de jQuery, un framework de JavaScript que lleva vigente desde el 26 de agosto del 2006 con el propósito de facilitar la gestión de eventos, efectos y muchas cosas con las que tardaríamos la vida si lo hiciéramos con JavaScript puro.

Bootstrap liderado por Twitter desde agosto de 2011 que consiste en un conjunto de código CSS (hojas de estilo) y JS (JavaScript) apoyado en jQuery que permite obtener una interfaz profesional con poco código utilizado.

Y por último, VUE.js, elaborado en febrero de 2014 por Evan , un desarrollador de Google contribuyó mucho en un framework de JavaScript muy conocido como es AngularJS. Este extrajo algunas partes que consideraba buenas y creó otro framework para desarrollar y facilitar así la programación de eventos, interfaz... así como crear una aplicación Web del lado del cliente. (En otros post explicaremos todo con más detalle).

Más adelante, iremos actualizando el script añadiendo mejoras como, instalar frameworks que se ejecuten en el lado del servidor (backend); menú gráfico; más frameworks interesantes...etc

El Script está elaborado en Bash, licenciado bajo los términos GNU GPL 2.0, y se puede obtener desde GitLab

git clone https://gitlab.com/sincorchetes/Twister.git

¡Un saludo internautas!

Vivaldi un navegador Web impresionante

Vivaldi es un navegador gratuito desarrollado por la empresa Vivaldi Technologies, cuya compañía fue fundada por el cofundador y ex-CEO de Opera Jon Stephenson von Tetzchner, y Tatsuki Tomita quiénes quedaron bastante descontentos por varias decisiones que tomó la empresa Opera Software hace bastante tiempo como el cierre del portal comunitario My Opera y dejando atrás las opiniones de las personas que ayudaban a su desarrollo y mejora. categories: ["Administración de sistemas", "Desarrollo Web"]

Vivaldi es un navegador gratuito desarrollado por la empresa Vivaldi Technologies, cuya compañía fue fundada por el cofundador y ex-CEO de Opera Jon Stephenson von Tetzchner, y Tatsuki Tomita quiénes quedaron bastante descontentos por varias decisiones que tomó la empresa Opera Software hace bastante tiempo como el cierre del portal comunitario My Opera y dejando atrás las opiniones de las personas que ayudaban a su desarrollo y mejora.

¿Qué nos aporta Vivaldi?

Vivaldi es muy poco conocido pero que daría mucho del qué hablar. Tiene una apariencia parecida a Opera y contiene multitud de características y ventajas por doquier.

[owl-carousel items=1 margin=1 loop=true autoplay=true autoplayHoverPause=true nav=true] [/owl-carousel]

Disponible para varios sistemas operativos

Actualmente dispone de paquete estables x86/x86_64 tanto para sistemas que usen paquetería .deb como .rpm. También hay un paquete considerado inestable enfocado a ARM 32 y solo disponible en formato .deb. Por otro lado soporta Windows y Mac.

Memoria RAM

Vivaldi es capaz de consumir una cuarta parte de lo que consumiría Google Chrome o Firefox a pesar de tener multitud de pestañas abiertas, con lo que podemos navegar de una forma fluida y trabajar con nuestro equipo sin tener que estar prescindiendo de determinados programas, páginas con contenido interactivo...etc

Soporte extensiones de Chrome

Si no puedes vivir sin las extensiones de Google Chrome con Vivaldi podrás tenerlas sin ningún problema y sin tener que instalar complementos o extensiones adicionales. Con tan solo acceder a la página Chrome Store podrás instalar cualquier extensión sin problemas.

Utiliza Blink para interpretar todos los elementos del diseño y el contenido Web a una velocidad de vértigo. Por defecto es el motor de renderizado que utiliza Google Chrome y Opera Software.

Sencillo y potente

Se pueden utilizar gestos para abrir páginas Web, pestañas, cerrarlas y configurar tus propios gestos para que se apliquen determinadas configuraciones, con lo que más de alguna ocasión agradecerás poder cerrar una simple ventana haciendo un dibujo con el ratón, o con el dedo en caso de ser pantalla táctil.

Soporte de captura de pantalla

El navegador incluye un botón con el que capturas la página y te permite seleccionar un determinado área, o la página completa y guardarla en formato .png, .jpg o copiarla directamente al portapapeles. Esto nos evita tener que utilizar herramientas externas cada vez que queramos compartir alguna información interesante o dibujos que no puedan escribirse.

Permite cargar o no animaciones, imágenes...

Con esto nos olvidamos de consumir tanto ancho de banda y espacio en disco ya que al desactivarlo no se ejecutan. Es muy interesante ya que también reduce el costo de CPU y de memoria al no reproducirse.

Acciones de página

Dispone de una lista enorme de efectos que se pueden aplicar a la página como filtros para alterar los colores como blanco y negro, escala de grises, inversión del color, intensificar... También tiene otras características como depurador de CSS, suprimir o forzar efectos de transiciones, utilizar tipografía "Monospace"...

Editor de apariencia

Vivaldi incluye un editor mínimo de colores de la apariencia del navegador, además de poder incorporar un fondo determinado. Pero eso no es todo, ¡también puede editarse a nivel de CSS y personalizarle a tu antojo!

Gestor de notas

Incorpora un pequeño editor de notas para tomar apuntes de cualquier tipo, capturas, archivos adjuntos, e incluso posee un visor de Markdown, que además es de fácil acceso ya que se abre en el panel lateral izquierdo y permite tomar las notas de una forma fácil y rápida.

Speed Dial múltiple

Un pequeño mural que permite ver las últimas páginas visitadas o también existe la posibilidad de añadir páginas como las que tenemos en favoritos. No obstante, se pueden tener varios "Speed dial" para determinadas páginas y ponerles un nombre. Nos evita tener que ir buscando en la típica barra de marcadores página por página.

Barra de pestañas

Se pueden desplazar las barras de pestañas a cualquier lateral del navegador, arriba, abajo, izquierda, derecha. Así podemos aumentar nuestra productividad.

Gestor de tareas

¡Incluye un gestor de tareas! Con el puedes ver cuánto está consumiendo cada página en relación CPU y M.RAM y cerrarlas cuando ¡quieras! Nos olvidamos de aquellas páginas o aplicaciones Web que no paran de consumir y que muchas veces, o al menos en Chrome, se quedan colgadas sin respuesta teniendo que reiniciar la conexión.

Gestor de sesiones

Si estás navegando, y quieres dedicarte a mirar otras Webs pero sin tener que perder las páginas que visitas, entonces, puedes almacenar la sesión y volver abrirla cuando te plazca.

Gestión de historial

No solo podrás ver las páginas que has visitado ordenadas por día, mes y/o año sino que también el ancho de banda que consumiste representado en una gráfica.

Configuración de comandos

También se pueden buscar páginas web o abrir páginas de marcadores utilizando la tecla F2. Este botón accionará una ventana en el centro de la pantalla del navegador esperando a que le introduzcas lo que quieres buscar.

Gestión de opciones via Web

Se pueden modificar las opciones mediante via URL y también visualizar registros, llevar a cabo pruebas y depuraciones con según que cosas: * vivaldi://settings -> Gestiona la configuración del navegador * vivaldi://bookmarks -> Gestión de marcadores * vivaldi://downloads -> Descargas vivaldi://accessibility -> Opciones de accesibilidad * vivaldi://net-internals -> Opción muy interesante que engloba todo lo que tiene que ver con la red * vivaldi://media-internals -> Reproductores de audio y video * vivaldi://cache -> Lista toda la caché almacenada (URL) * vivaldi://components -> Componentes adicionales * vivaldi://appcache-internals -> Caché de aplicaciones Web utilizadas * vivaldi://indexeddb-internals -> Apps, extensiones... que hacen uso de IndexedDB
* vivaldi://omnibox -> Permite buscar en el historial parámetros que hayan sido utilizados por las URLs tipo name,user... * vivaldi://user-actions -> Depura las acciones del usuario nada más empezar, cambiar de pestaña, abirir ventanas...etc * vivaldi://password-manager-internals -> En teoría son logs de contraseñas almacenadas * vivaldi://quota-internals -> Datos utilizados * vivaldi://webrtc-internals -> Depuración de uso del protocolo WebRTC * vivaldi://terms -> Licencia * vivaldi://sandbox -> Estado de caja de arena (aislar un contenido Web) * vivaldi://device-log -> Registro de eventos con dispositivos ¡USB, Bluetooth...! * vivaldi://flags -> Opciones experimentales o en fase beta * vivaldi://about -> Información acerca del navegador * vivaldi://blob-internals -> Información sobre blobs

Comunidad

Vivaldi tiene una comunidad viva y grandísima con muchos posts publicados cada día, el inglés es el idioma por defecto, pero hay subforos con otros idiomas como el nuestro.

Cuenta de correo electrónico gratuito

Si te haces usuari@ de Vivaldi, automáticamente posees un correo electrónico gratuito sin publicidad. Utilizan la plataforma RoundCube para webmail sin ningún tipo de publicidad añadida.

Soporte idiomático

Vivaldi actualmente soportada un total de hasta 40 idiomas como el Ruso, Español, Inglés, Persa, Francés, Chino...

Descargar

Los siguientes enlaces nos permitirán descargar Vivaldi para nuestro sistema y arquitectura de CPU.

Linux

64 bits * Vivaldi 1.15 - .DEB * Vivaldi 1.15 - .RPM

32 bits * Vivaldi 1.15 - .DEB * Vivaldi 1.15 - .RPM

ARM 32 bits * Vivaldi 1.15 - .DEB

Windows

Versión 7+ 32 bits * Vivaldi 1.15 - .EXE

Versión 7+ 64 bits * Vivaldi 1.15 - .EXE ¡Yo ya he optado por Vivaldi! ¿Y tú?

Versión Vista/XP (no está más soportado) 32 bits * Vivaldi 1.0 - .EXE

Mac OS X

Versión para sistemas superiores 10.9+ * Vivaldi 1.15 - .DMG

¡Yo ya he optado por Vivaldi! ¿Y tú?