• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Geekebrains

Para programadores, maker y geeks en general

  • Inicio
  • Zona Coders!
  • Zona Makers!
You are here: Home / Zona Coders! / HTML5 [Guía rápida]

23 mayo, 2019 Por admin8049 Leave a Comment

HTML5 [Guía rápida]

Nace en 2014 con nuevas etiquetas:

  • Incorpora etiquetas (canvas 2D y 3D, audio, vídeo) con codecs para mostrar los contenidos multimedia.
  • Etiquetas para permitir generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.
  • Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.
  • Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.
  • Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

Web Semántica

  • Añade etiquetas para manejar la Web semántica (Web 3.0): header, footer, article, nav, time (fecha del contenido), link rel=‘’ (tipo de contenido que se enlaza).
  • Permite incorporar a las páginas ficheros RDF / OWL (con meta información) para describir relaciones entre los términos utilizados.

Nuevas APIs y Javascript

  • API para hacer Drag & Drop. Mediante eventos.
  • API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.
  • API de Geolocalización para dispositivos que lo soporten.
  • API Storage. Facilidad de almacenamiento persistente en local. Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.
  • WebSockets. API de comunicación bidireccional entre páginas.
  • WebWorkers. Hilos de ejecución en paralelo.
  • Estándar futuro. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, memoria, puertos USB, cámaras, micrófonos…

<svg>

Permite crear gráficos vectoriales escalables.

Se declara con: <!DOCTYPE html>, el encoding por defecto es UTF-8.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

Filed Under: Zona Coders!

Previous Post: « git [Guía rápida]
Next Post: ReactJs [Guía Rápida] »

Reader Interactions

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Primary Sidebar

Categorías

  • Cómo …?
  • Experimentos
  • GeekeBlocks
  • Noticias Geek
  • Proyectos
  • Qué es …?
  • Quién es …?
  • Zona Coders!
  • Zona Junior!
  • Zona makers!

Etiquetas

Antipatrones de diseño de software Arduino Arquitectura de software base64 Bases de Datos cer cert Certificados Digitales Clean Code Code Smells DBeaver Diseño de Software docker docker-compose Domain Drive Design Edición de video https IDE Java javascript jest lenguajes de programación Librerías de JavaScript lsoft MongoDb MySQL NodeJS NoSQL odoo openssl Oracle package.json Patrones de Diseño de Software pem plugins Postgres Prettier ReactJS Refactoring shell SQL Developer de Oracle SSL TypeScript utilidades de software Visual Studio Code

Entradas recientes

  • Lenguaje ubicuo en Domain-Driven Design (DDD)
  • NestJs
  • Docker-compose y mongoDB: Failed to start up WiredTiger under any compatibility version?
  • Ponerle nombre a las cosas: camelCase, snake_case, kebab-case, PascalCase, MACRO_CASE y Train_Case
  • OBS – Open Broadcaster Software
  • Duck typing
  • Patrón de arquitectura: Backend for Frontend – BFF
  • SaaS, PaaS y IaaS
  • Notion
  • GitHub Actions
Jesús A. Carballo Santaclara

Empezé trasteando en los 80' con un ZX espectrum, después pasé al potente "PC 8086" (jeje...). He trabajado haciendo software para la administración pública, para Hospitales, el sector de la Automoción, el sector Bancario, en algún e-Commerce de alguna multinacional y he emprendido en robótica educativa y en buscadores web.
Trabajo de forma profesional en esto de los ordenadores desde hace mas de 25 años espero poder contarte alguna cosa interesante.

Footer

Copyright © 2023 · GeekeZonia · Aviso Legal · Política de Cookies · Política de Privacidad · Log in