HTML5 Y CCS3
GUSTAVO HILARD HUERTAS CENTENO
CORPORACIÓN UNIVERSITARIA REMINGTON
INGENIERÍA DE SISTEMAS
LENGUAJE DE PROGRAMACIÓN AVANZADO 2
TUMACO – NARIÑO
18/02/2019
HTML5 Y CCS3
GUSTAVO HILARD HUERTAS CENTENO
CARLOS ENRIQUE NAVIA TORRES
INGENIERO DE SISTEMAS.
ESPECIALISTA TECNOLÓGICO EN GESTIÓN Y SEGURIDAD DE BASES DE DATOS.
TECNÓLOGO EN ANÁLISIS Y DESARROLLO DE SISTEMAS DE INFORMACIÓN.
CORPORACION UNIVERSITARIA REMINGTON
INGENIERIA DE SISTEMAS
LENGUAJE DE PROGRAMACIÓN AVANZADO 2
TUMACO - NARIÑO
18/02/2019
INTRODUCCIÓN:
SE DARÁ A CONOCER TODA EL ÁMBITO TEMÁTICO SOBRE HTML5 Y CSS3. PARTIENDO DESDE EL CONCEPTO BÁSICO HASTA LO MÁS DIFÍCIL.
La integridad es la base sobre la que todos los otros valores están construidos (Brian Tracy)
HTML5 es la última evolución del estándar que define HTML . El término representa dos conceptos diferentes. Es una nueva versión del lenguaje HTML, con nuevos elementos, atributos y comportamientos, y un conjunto más amplio
de tecnologías que permite la construcción de sitios web y aplicaciones más diversos y potentes. Este conjunto a veces se llama HTML5 y amigos y, a menudo, se reduce a solo HTML5. Diseñada para ser utilizada por todos los desarrolladores de Open Web, esta página de referencia enlaza con numerosos recursos sobre tecnologías HTML5, clasificadas en varios grupos según su función.
Tabla periódica de HTML La tabla periódica se ha ido hace mucho, reemplazada por una nueva versión móvil.
● ● ● ●
Semántica : le permite describir con más precisión cuál es su contenido. Conectividad : le permite comunicarse con el servidor de formas nuevas e innovadoras. Sin conexión y almacenamiento : permite que las páginas web almacenen datos en el lado del cliente localmente y operen fuera de línea de manera más eficiente. Multimedia : hacer ciudadanos de primera clase de video y audio en la Web abierta. Gráficos y efectos 2D / 3D : permiten una gama mucho más diversa de opciones de presentación.
● ● ●
Rendimiento e integración : proporciona una mayor optimización de la velocidad y un mejor uso del hardware de la computadora. Acceso a dispositivos : permite el uso de varios dispositivos de entrada y salida. Estilo : dejar que los autores escriban temas más sofisticados.
SECCION SEMANTICA Secciones y esquemas en HTML5. Un vistazo a la nueva esquematización y los elementos de seccionamiento en HTML5: <section>, <article>,
, , y . Usando audio y video HTML5 Los elementos y los incrustan y permiten la manipulación de nuevos contenidos multimedia. Mejoras de formularios Una mirada a la API de validación de restricciones , varios atributos nuevos, nuevos valores para el elemento. Nuevos elementos semanticos. Al lado de las secciones, los medios y elementos de formularios, existen numerosos elementos nuevos, como <mark>, , , , , , <progress>, o <meter>y <main>, aumentar el número de elementos HTML5 válidos . Mejora en <iframe> Usando los atributos sandboxy srcdoc, los autores ahora pueden ser precisos sobre el nivel de seguridad y la representación deseada de un <iframe>elemento.y los incrustan y permiten la manipulación de nuevos contenidos multimedia. WebRTC Esta tecnología, donde RTC significa comunicación en tiempo real, permite conectarse a otras personas y controlar las videoconferencias directamente en el navegador, sin la necesidad de un complemento o una aplicación externa. Usando la API de la cámara Permite usar, manipular y almacenar una imagen de la cámara de la computadora. Track y WebVTT El elemento permite subtítulos y capítulos. WebVTT es un formato de pista de texto.elemento y cómo dibujar gráficos y otros objetos en Firefox. HTML5 Text API para elementos La API de texto HTML5 ahora es compatible con elementos. WebGL WebGL trae gráficos en 3D a la Web al introducir una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede usar en elementos HTML5 . SVG Un formato basado en XML de imágenes vectoriales que se puede incrustar directamente en el HTML.<br />
<br />
Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.<br />
<br />
<base><br />
<br />
Define la URL base para las URLs relativas en la página.<br />
<br />
<link><br />
<br />
Usada para enlazar JavaScript y CSS externos con el documento HTML actual.<br />
<br />
<meta><br />
<br />
Define los metadatos que no pueden ser definidos usando otro elemento HTML.<br />
<br />
<style><br />
<br />
Etiqueta de estilo usada para escribir CSS en línea.<br />
<br />
Scripting Sección Elemento Descripción <script><br />
<br />
Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript<br />
<br />
<noscript><br />
<br />
Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.<br />
<br />
Secciones Sección Elemento<br />
<br />
Descripción<br />
<br />
<body><br />
<br />
Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.<br />
<br />
<section><br />
<br />
Define una sección en un documento.<br />
<br />
<nav><br />
<br />
Define una sección que solamente contiene enlaces de navegación<br />
<br />
<article><br />
<br />
Define contenido autónomo que podría existir independientemente del resto del contenido.<br />
<br />
<aside rel="nofollow"><br />
<br />
Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido<br />
<br />
Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> <h1>,<h2>,<h3>,<h4>,<h5>,<h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.<br />
<br />
<header><br />
<br />
Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.<br />
<br />
<footer><br />
<br />
Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.<br />
<br />
<address rel="nofollow"><br />
<br />
Define una sección que contiene información de contacto.<br />
<br />
<main><br />
<br />
Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.<br />
<br />
Agrupación de Contenido Sección Elemento<br />
<br />
Descripción<br />
<br />
<p><br />
<br />
Define una parte que debe mostrarse como un párrafo.<br />
<br />
<hr><br />
<br />
Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.<br />
<br />
<pre><br />
<br />
Indica que su contenido esta preformateado y que este formato debe ser preservado.<br />
<br />
<blockquote><br />
<br />
Representa una contenido citado desde otra fuente.<br />
<br />
<ol><br />
<br />
Define una lista ordenada de artículos.<br />
<br />
<ul><br />
<br />
Define una lista de artículos sin orden.<br />
<br />
<li><br />
<br />
Define un artículo de una lista ennumerada.<br />
<br />
<dl><br />
<br />
Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.<br />
<br />
<dt><br />
<br />
Representa un término definido por el siguiente <dd>.<br />
<br />
<dd><br />
<br />
Representa la definición de los terminos listados antes que él.<br />
<br />
<figure><br />
<br />
Representa una figura ilustrada como parte del documento.<br />
<br />
<figcaption><br />
<br />
Representa la leyenda de una figura.<br />
<br />
<div><br />
<br />
Representa un contenedor genérico sin ningún significado especial.<br />
<br />
Semántica a nivel de Texto Sección<br />
<br />
Elemento Descripción <a><br />
<br />
Representa un hiperenlace, enlazando a otro recurso.<br />
<br />
<em><br />
<br />
Representa un texto enfatizado, como un acento de intensidad.<br />
<br />
<strong><br />
<br />
Representa un texto especialmente importante.<br />
<br />
<small><br />
<br />
Representa un comentario aparte, es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.<br />
<br />
<s><br />
<br />
Representa contenido que ya no es exacto o relevante.<br />
<br />
<cite><br />
<br />
Representa el título de una obra.<br />
<br />
<q><br />
<br />
Representa una cita textual inline.<br />
<br />
<dfn><br />
<br />
Representa un término cuya definición está contenida en su contenido ancestro más próximo.<br />
<br />
<abbr rel="nofollow"><br />
<br />
Representa una abreviación o un acrónimo; la expansión de la abreviatura puede ser representada por el atributo title.<br />
<br />
<data><br />
<br />
Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).<br />
<br />
<time><br />
<br />
Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.<br />
<br />
<code><br />
<br />
Representa un código de ordenador.<br />
<br />
<var><br />
<br />
Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un<br />
<br />
parámetro de una función o un marcador de posición en prosa. <samp><br />
<br />
Representa la salida de un programa o un ordenador.<br />
<br />
<kbd><br />
<br />
Representa la entrada de usuario, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.<br />
<br />
<sub>,<sup><br />
<br />
Representan un subíndice y un superíndice, respectivamente.<br />
<br />
<i><br />
<br />
Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.<br />
<br />
<b><br />
<br />
Representa un texto hacia el cual se llama la atención para propósitos utilitaros. No confiere ninguna importancia adicional y no implica una voz alterna.<br />
<br />
<u><br />
<br />
Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.<br />
<br />
<mark><br />
<br />
Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.<br />
<br />
<ruby><br />
<br />
Representa contenidos a ser marcados con anotaciones ruby, recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.<br />
<br />
<rt><br />
<br />
<rp><br />
<br />
<bdi><br />
<br />
Representa el texto de una anotación ruby . Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones. Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto. Permite incrustar un fragmento de texto con una<br />
<br />
<bdo><br />
<br />
<span><br />
<br />
<br> <wbr><br />
<br />
direccionalidad diferente o desconocida. Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode. Representa texto sin un significado específico. Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir. Representa un salto de línea. Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.<br />
<br />
Ediciones Sección Elemento Descripción <ins><br />
<br />
Define una adición en el documento.<br />
<br />
<del><br />
<br />
Define una remoción del documento.<br />
<br />
Contenido incrustado Sección Elemento Descripción <img><br />
<br />
Representa una imagen.<br />
<br />
<iframe><br />
<br />
Representa un contexto anidado de navegación, es decir, un documento HTML embebido.<br />
<br />
<embed><br />
<br />
Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.<br />
<br />
<object><br />
<br />
Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.<br />
<br />
<param><br />
<br />
Define parámetros para el uso por los plugins invocados por los elementos <object>.<br />
<br />
<video><br />
<br />
Representa un video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos.<br />
<br />
<audio rel="nofollow"><br />
<br />
Representa un sonido o stream de audio.<br />
<br />
<source><br />
<br />
Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio rel="nofollow">.<br />
<br />
<track><br />
<br />
Permite a autores especificar una pista de texto temporizado para elementos multimedia como <video> o <audio rel="nofollow">.<br />
<br />
<canvas><br />
<br />
Representa un área de mapa de bits en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.<br />
<br />
<map><br />
<br />
En conjunto con <area>, define un mapa de imagen.<br />
<br />
<area><br />
<br />
En conjunto con<br />
<br />
<svg><br />
<br />
Define una imagen vectorial embebida.<br />
<br />
<math><br />
<br />
Define una fórmula matemática.<br />
<br />
<map>,<br />
<br />
define un mapa de imagen.<br />
<br />
Datos tabulares Sección Elemento Descripción <table><br />
<br />
Representa datos con más de una dimensión.<br />
<br />
<caption><br />
<br />
Representa el título de una tabla.<br />
<br />
<colgroup><br />
<br />
Representa un conjunto de una o más columnas de una tabla.<br />
<br />
<col><br />
<br />
Representa una columna de una tabla.<br />
<br />
<tbody><br />
<br />
Representa el bloque de filas que describen los datos contretos de una tabla.<br />
<br />
<thead><br />
<br />
Representa el bloque de filas que describen las etiquetas de columna de una tabla.<br />
<br />
<tfoot><br />
<br />
Representa los bloques de filas que describen los resúmenes de columna de una tabla.<br />
<br />
<tr><br />
<br />
Representa una fila de celdas en una tabla.<br />
<br />
<td><br />
<br />
Representa una celda de datos en una tabla.<br />
<br />
<th><br />
<br />
Representa una celda encabezado en una tabla.<br />
<br />
Formularios Sección Elemento Descripción <form><br />
<br />
Representa un formulario, consistiendo de controles que puede ser enviado a un servidor para procesamiento.<br />
<br />
<fieldset><br />
<br />
Representa un conjunto de controles.<br />
<br />
<legend><br />
<br />
Representa el título de un <fieldset>.<br />
<br />
<label><br />
<br />
Representa el título de un control de formulario.<br />
<br />
<input><br />
<br />
Representa un campo de datos escrito que permite al usuario editar los datos.<br />
<br />
<button><br />
<br />
Representa un botón .<br />
<br />
<select><br />
<br />
Representa un control que permite la selección entre un conjunto de opciones.<br />
<br />
<datalist><br />
<br />
Representa un conjunto de opciones predefiniddas para otros controles.<br />
<br />
<optgroup><br />
<br />
Representa un conjunto de opciones, agrupadas lógicamente.<br />
<br />
<option><br />
<br />
Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.<br />
<br />
<textarea><br />
<br />
Representa un control de edición de texto multi-línea.<br />
<br />
<keygen><br />
<br />
Representa un control de par generador de llaves.<br />
<br />
<output><br />
<br />
Representa el resultado de un cálculo.<br />
<br />
<progress><br />
<br />
Representa el progreso de finalización de una tarea.<br />
<br />
<meter><br />
<br />
Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.<br />
<br />
Elementos interactivos Sección Elemento Descripción <details><br />
<br />
Representa un widget desde el que un usuario puede obtener información o controles adicionales.<br />
<br />
<summary><br />
<br />
Representa un resumen, título o leyenda para un elemento <details> dado.<br />
<br />
<command><br />
<br />
Representa un comando que un usuario puede invocar.<br />
<br />
<menu><br />
<br />
HTML + CSS dan mucho juego por Aarón García Hervás | 01/10/2018 CSS nos permite construir cosas extremadamente complejas con un puñado de caracteres. El lenguaje ha crecido mucho con los años y el abanico de posibilidades que nos brinda es enorme. Haciendo uso de algunas técnicas<br />
<br />
conocidas, y otras no tanto, vamos a construir un juego únicamente con HTML y CSS. ¿Lo conseguiremos sin JavaScript? Spoiler: sí.<br />
<br />
¿Qué vamos a hacer? Vamos a construir un juego en el que dispararemos a dianas móviles haciendo uso únicamente de HTML y CSS. No vamos a hacer uso de preprocesadores ni de sistemas de nomenclatura CSS como BEM. Con ello pretendemos que el proceso sea más entendible. Sí haremos uso de Custom properties (aka CSS Variables), por lo que si no estáis familiarizados con ellas os recomiendo una lectura rápida en MDN. El resultado final será este:<br />
<br />
Nota: el juego será compatible con casi todos los navegadores, excepto Internet Explorer y Opera Mini. Si no usáramos Custom properties el juego sería compatible incluso con Internet Explorer 9. Lo primero que veremos en el juego es la pantalla de inicio que evita que el juego empiece hasta que hagamos clic. Una vez hagamos clic unas dianas caerán del cielo y deberemos ser certeros con nuestros disparos para alcanzar cuantas más mejor. Un contador irá sumando nuestros aciertos; 1 punto por cada diana. Además, incluiremos una diana especial que sumará 3 puntos. Cuando hayan caído todas las dianas, se mostrará en grande el marcador final. Si eres un desarrollador de los que no toca CSS ni con un palo, estarás flipando, pero no hay trazas de JavaScript en el juego que vamos a construir. Palabra de honor.<br />
<br />
Vamos a ir explicando paso a paso el proceso para hacerlo más entendible. En cada paso veremos sólo el código relevante para ese paso e incluiremos un enlace a CodePen donde se podrá ver y probar el juego en cada una de las fases. ¡Comenzamos!<br />
<br />
1. Contador de puntos<br />
<br />
Lo primero que vamos a hacer es el contador de puntos. Aunque no muy usados, existen los CSS counters. Como su nombre indica, nos permite incrementar o decrementar cierto contador definido en nuestro CSS. Su uso es muy sencillo: o<br />
<br />
o<br />
<br />
o<br />
<br />
Con la propiedad counter-reset: points [value] definimos o reiniciamos nuestro contador con nombre points. Podemos pasarle un segundo valor opcional que define el valor inicial del contador. En este caso no se lo vamos a pasar ya que queremos que sea 0. Construyendo el juego he comprobado que esta propiedad no es necesaria para definir el contador a 0, pero lo vamos a hacer por si algún navegador se queja. La propiedad counter-increment: points [value] incrementa o decrementa el contador points. Por defecto suma 1, pero le podemos pasar opcionalmente un segundo valor que puede ser cualquier número entero positivo o negativo. La función counter() pinta el valor del contador. Tiene una limitación muy grande y es que sólo puede ser usada en la propiedad content de los pseudo elementos :before y :after. A nosotros nos vale.<br />
<br />
El principal uso que se nos viene a la cabeza para los contadores CSS son las listas ordenadas. En nuestro caso cada diana será un checkbox con un label asociado y el contador nos va a servir para contar el número de aciertos, o lo que es lo mismo, el número de checkbox con su estado :checked. El HTML es muy sencillo. Tenemos 8 checkbox (.bullseye-input) con sus respectivos labels asociados (.bullseye) y un párrafo que es el marcador encargado de mostrar la puntuación (#score), todo ello englobado en un div (#stage). Al último checkbox y su respectivo label le añadimos la clase special para poder darle estilos diferentes y asignarle un número de puntos distinto. <div id="stage"> <input class="bullseye-input" id="b1" type="checkbox"> <label class="bullseye" for="b1">Shoot me!</label> ...<br />
<br />
<input class="bullseye-input special" id="b8" type="checkbox"> <label class="bullseye special" for="b8"></label> <p id="score"> points</p> </div><br />
<br />
Nota: no envolvemos el input con el label (con lo que nos ahorraríamos los atributos id y for) ya que después debemos hacer uso del adjacent sibling combinator (+) y para ello input y label deben estar al mismo nivel. En cuanto al CSS para el contador, primero definimos las variables con los puntos que sumará cada diana así como los puntos de las dianas especiales. :root { /* Variables encargadas de sumar y mostrar los puntos de las dianas normales y especiales. */ --bullseye-points: 1; --bullseye-points-str: '1'; --bullseye-special-points: 3; --bullseye-special-points-str: '3'; /* Inicializamos el contador de puntos a 0. */ counter-reset: points; }<br />
<br />
Nota: el selector :root equivale al elemento html. Definimos una variable con el valor de tipo numérico (–bullseye-points) y otra variable con el valor de tipo string (–bullseye-points-str). Esto es debido a que no hay conversión de tipos en CSS, por lo que si necesitamos mostrar el valor de una variable en un pseudo elemento mediante la propiedad content, que sólo acepta variables de tipo string, no podemos hacerlo con una variable de tipo numérico. Vamos a definir el funcionamiento de los contadores. Se incrementará el contador points cuando el jugador haga clic sobre un label que al estar asociado a un checkbox, lo marcará como :checked. /* Incrementamos el valor del contador en tantos puntos como hayamos definido * en nuestra variable cuando el checkbox está marcado. */ .bullseye-input:checked { --points: var(--bullseye-points); counter-increment: points var(--points); } /* Cuando la diana es especial, sobreescribimos el número puntos a sumar en el contador. */ .bullseye-input.special:checked { --points: var(--bullseye-special-points); }<br />
<br />
Mostramos el número de puntos en cada diana. Este es el “+1” que aparece al acertar una diana. Más adelante le daremos estilos ya que por defecto deberá estar oculto. /* Mostramos el número de puntos en el :after de la diana. */ .bullseye:after { --points-str: var(--bullseye-points-str); content: '+' var(--points-str);<br />
<br />
} /* Cuando la diana es especial, sobreescribimos los puntos a mostrar en el :after de la diana. */ .bullseye.special:after { --points-str: var(--bullseye-special-points-str); }<br />
<br />
Por último, mostramos en el pseudo elemento :before del marcador los puntos acumulados por el jugador. /* Mostramos el número de puntos en el marcador. */ #score:before { content: counter(points); }<br />
<br />
Y con esto, ya tenemos nuestro contador de puntos<br />
<br />
.<br />
<br />
Prueba y mira el código del paso 1 en CodePen<br />
<br />
2. Estilos generales<br />
<br />
Vamos a añadir unos cuantos estilos para darle un estilo retro al juego. La fuente seleccionada es la Press Start 2P con efecto pixelado. Ponemos un color de fondo azul y añadimos estilos para el contador posicionándolo en la parte baja del viewport. Añadimos los colores como variables para que sea más fácil la personalización del juego. Podemos usar este bloque de definición de variables a modo de configuración del juego si nos apetece cambiar cualquier cosa rápidamente sin tener que indagar en el código<br />
<br />
.<br />
<br />
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P') :root { ... -bg-color: blue; --text-color: white; --accent-color: lime; ... } body { /* Evitamos que las dianas provoquen la aparición de la barra de scroll cuando están fuera del viewport. */<br />
<br />
overflow: hidden; /* Nuestra querida fuente retro. */ font-family: 'Press Start 2P', sans-serif; color: var(--text-color); background-color: var(--bg-color); /* Evitamos que el usuario seleccione partes de la web sin querer mientras hace clic con el ratón. */ user-select: none; } #score { /* Posicionamos el marcador en la parte baja del viewport. */ position: absolute; bottom: 2rem; left: 0; right: 0; color: var(--accent-color); /* Añadimos una sombra retro. */ text-shadow: 2px 2px 0px red; /* Permitimos que el jugador pueda hacer clic sobre una diana que está pasando por debajo del contador. */ pointer-events: none; }<br />
<br />
Nota: pointer-events nos permite cancelar/habilitar los eventos de punteros sobre elementos HTML y SVG. Es muy potente. Prueba y mira el código del paso 2 en CodePen<br />
<br />
3. Estilo de las dianas<br />
<br />
Vamos a darle un aspecto clásico a nuestras dianas con círculos concéntricos rojos y blancos. En el caso de las dianas especiales, el rojo lo sustituimos por un dorado. Lo hacemos con el maravilloso radial-gradient. Definimos unas cuantas variables con el tamaño de las dianas, tamaño de su sombra y los colores de las mismas.<br />
<br />
:root { ... --bullseye-size: 7rem; --bullseye-shadow-size: 1rem; --bullseye-total-size: calc(var(--bullseye-size) + var(--bullseye-shadow-size) * 2); --bullseye-color: red; --bullseye-special-color: gold; ... }<br />
<br />
Ocultamos los checkbox y damos estilo a la diana en sí, que es el pseudo elemento :before de .bullseye. Cuando el jugador acierta a darle a la diana, cambiamos el color de rojo (o dorado en caso de las dianas especiales) a gris y le añadimos una animación para que desaparezca quitándole la opacidad. /* Ocultamos los checkbox. */ .bullseye-input { ... opacity: 0; } .bullseye { ... /* Cambiamos el position para posicionar absolutamente los pseudo elementos. */ position: relative; } .bullseye-input:checked + .bullseye { /* Cuando una diana se ha marcado, ya no permitimos que se desmarque. */ pointer-events: none; } /* El pseudo elemento :before es la diana. */ .bullseye:before { /* Definimos la variable que dará el color al radial-gradient. */ --color: var(--bullseye-color); content: ''; /* Definimos el tamaño de las dianas */ width: var(--bullseye-size); height: var(--bullseye-size); /* Hacemos la diana circular. */ border-radius: 50%; /* Definimos el radial-gradient con el color que le hemos especificado. */ background-image: radial-gradient(closest-side, var(--color) 20%, white 0, white 40%, var(-color) 0, var(--color) 60%, white 0, white 80%, var(--color) 0); box-shadow: 4px 4px var(--bullseye-shadow-size) rgba(0, 0, 0, 0.4); } .bullseye.special:before {<br />
<br />
/* En las dianas especiales sobreescribimos el color que se usa en el radial-gradient. */ --color: var(--bullseye-special-color); } /* Cuando hemos acertado sobre una diana, cambiamos el color del radial-gradient * a grey, hacemos que desaparezca con opacity y disminuimos un poco su tamaño * con una animación. */ .bullseye-input:checked + .bullseye:before { --color: grey; animation: bullseye-fadeout 0.8s ease-in-out forwards; }<br />
<br />
La técnica de ocultar el checkbox y dar estilos al label data del 2010 y más tarde se bautizó como Checkbox Hack. En el post original Ryan Seddon explica cómo aplicar reglas CSS dependiendo de si un checkbox está marcado o no. Para saber si un checkbox está marcado mediante CSS, hacemos uso del pseudo selector :checked y si lo combinamos con selectores como + (adjacent sibling combinator) o ~ (general sibling combinator) podemos aplicar estilos a otros elementos que compartan padre con nuestro input. Posibilidades infinitas. Si estamos jugando, casi todo vale; si vamos a hacer cosas serias y queremos cuidar la accesibilidad, el Checkbox hack quizás no sea la mejor opción. Ahora damos estilos al “+1” que aparece cuando el usuario acierta sobre una diana, que es el pseudo elemento :after de .bullseye. Por defecto el :after está oculto y se muestra cuando el usuario acierta sobre la diana. /* El pseudo elemento :after es el "+1" que aparece cuando acertamos en una diana. */ .bullseye:after { /* Creamos una variable con los puntos a mostrar. */ --points-str: var(--bullseye-points-str); /* Mostramos el número de puntos que corresponden a esta diana. */ content: '+' var(--points); /* Posicionamos el elemento en el centro de la diana. */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Le añadimos una sombra molona. */ text-shadow: 2px 2px 0px var(--accent-color); } /* Cuando es una diana especial sobreescribimos los puntos a mostrar. */ .bullseye.special:after { --points-str: var(--bullseye-special-points-str); } /* Cuando el jugador acierta sobre una diana, le añadimos una animación para que aparezca el<br />
<br />
"+1". */ .bullseye-input:checked + .bullseye:after { animation: points-up 1.5s forwards; }<br />
<br />
Ya tenemos nuestras dianas molonas<br />
<br />
.<br />
<br />
Prueba y mira el código del paso 3 en CodePen<br />
<br />
4. Animación de las dianas Cuando el juego empiece, las dianas deben empezar a caer una detrás de otra. Para ello necesitamos posicionar las dianas fuera del viewport por arriba y añadirles una animación para que caigan cruzando el viewport hasta desaparecer por abajo. Cada diana debe tener un retraso con respecto a la anterior. Una vez hayan caído todas las dianas, animaremos el marcador de puntos hasta el centro de la pantalla para que el jugador sepa que la partida ha terminado. Definimos 3 variables: o o o<br />
<br />
El número de dianas (8). Si cambiamos este valor debemos cambiar el número de dianas en el HTML. La duración de la animación de caída de las dianas. El delay o retraso que deberemos aplicar a las dianas. Esto es multiplicar el número de dianas por la duración de la animación de las dianas.<br />
<br />
:root { --total-bullseye: 8; --bullseye-animation-duration: 2.7s; --score-delay: calc(var(--bullseye-animation-duration) * var(--total-bullseye)); }<br />
<br />
Posicionamos las dianas fuera del viewport por la parte de arriba. Y le añadimos la animación. .bullseye { ... position: absolute; top: calc(-1 * var(--bullseye-total-size)); /* He preferido poner las propiedades de animation por separado para mayor claridad. */ animation-name: bullseye-movement; animation-timing-function: ease-out; animation-duration: var(--bullseye-animation-duration); /* Añadimos un delay a la animación de cada diana correspondiente a su índice multiplicado * por la duración de la animación de caída. *<br />
<br />
*/ animation-delay: calc(var(--bullseye-animation-duration) * (var(--index) - 1)); } /* Definimos la variable índice de cada diana y le asignamos una posición arbitraria * para dar una sensación de aleatoriedad. */ .bullseye:nth-of-type(1) { --index: 1; left: 70%; } ... .bullseye:nth-of-type(8) { --index: 8; left: 85%; } /* Cuando el jugador acierte en la diana, paramos la animación de caída manera que se * quede parada. Esto sumado al afecto fadeout que le hemos añadido antes dá un efecto molón. */ .bullseye-input:checked + .bullseye { animation-play-state: paused; ... } /* Añadimos la animación al marcador. Nótese el delay que hemos calculado * en el bloque de variables. Importante añadir forwards para que la animación * se quede en su estado final al acabar. */ #score { ... animation: score-end 0.4s ease-in-out var(--score-delay) forwards; }<br />
<br />
Ya tenemos nuestro juego casi terminado. Un par de detalles más y lo tenemos.<br />
<br />
Prueba y mira el código del paso 4 en CodePen<br />
<br />
5. Cursor personalizado<br />
<br />
Como todo buen juego de disparos, no podemos dejar de tener nuestra arma con mira telescópica. Para ello, vamos a definir la propiedad cursor con un SVG como data URI. Ni siquiera hace falta codificarlo en base 64, tan sólo necesitamos sustituir algunos<br />
<br />
caracteres especiales como “#” por “%23” y listo. Tener el SVG inline nos permite cambiar el color desde el mismo código CSS sin tener que generar una nueva imagen. Awesome. El centro del cursor por defecto está en la posición 0 0. Si no cambiamos esto, queda muy raro ya que nuestra mira de sniper está descentrada . Por suerte la propiedad cursor nos permite indicar indicar el centro de nuestro cursor personalizado. Como nuestro SVG tiene unas dimensiones de 42×42 píxeles, en nuestro caso el centro corresponden a las coordenadas 21 21. Además añadimos como fallback el cursor crosshair, bastante apropiado por si algún navegador no soporta SVG como data URI. :root { ... /* Definimos nuestro cursor apuntando a una imagen con la función url(), tal y como * haríamos en background-image. Antes del SVG añadimos "data:image/svg+xml;utf8," * para que el navegador sepa que se trata de una imagen de tipo SVG. */ cursor: url('data:image/svg+xml;utf8,<svg ... fill="%2353FF45"/></svg>') 21 21, crosshair; } *, *:before, *:after { /* Hacemos que todos los elementos hereden el cursor que hemos definido. * Si no lo hiciéramos, los <label> seguirían teniendo el cursor por defecto. */ cursor: inherit; }<br />
<br />
Prueba y mira el código del paso 5 en CodePen<br />
<br />
6. Pantalla de inicio<br />
<br />
Para evitar que el juego empiece nada más cargar, vamos a añadir una pantalla de inicio. El juego comenzará cuando el usuario haga clic sobre esta pantalla.<br />
<br />
Añadimos un enlace con el atributo href=”#stage”. “stage” es el id que tiene el div que engloba todo el HTML del juego. El resto del HTML continúa igual. <div id="stage"> ... <a id="start" href="#stage" rel="nofollow"> <span class="start-text"> insert coin<span class="start-emoji">💰</span> </span> </a> </div><br />
<br />
Ahora hacemos que #start ocupe toda la pantalla y le añadimos un color de fondo para que no se vea que hay detrás. Para conseguir que la animación de las dianas no empiece hasta que el usuario haga clic, vamos a hacer uso de la pseudo clase :target. Es uno de esas pseudo clases poco usadas y muy útiles. Nos permite añadir estilos al elemento que tiene el id que coincide con el hash de la URL del navegador. Por ejemplo, si estamos en una página http://www.example.com/index.html y tenemos el siguiente código: <div id="search"></div> #search { background-color: red; } #search:target { background-color: blue; }<br />
<br />
El elemento #search tendrá el color de fondo azul cuando la URL sea http://www.example.com/index.html#search. Esta pseudo clase nos da posibilidades casi infinitas. Podríamos hacer diferentes pantallas haciendo uso de esta técnica, de manera que cada pantalla se activara cuando se hiciera clic en el enlace correspondiente<br />
<br />
. Pero vamos a simplificar, que se nos alarga.<br />
<br />
Las animaciones de las dianas y del marcador las vamos a hacer dependientes de si el usuario ha hecho clic en #start, como se ve a continuación. /* El enlace de empezar partida hacemos que ocupe toda la pantalla. */ #start { position: fixed; top: 0; right: 0; bottom: 0; left: 0; ... color: var(--text-color); text-shadow: 2px 2px 0 red; background-color: var(--bg-color); }<br />
<br />
/* Cuando el jugador hace clic en el enlace ocultamos el enlace para mostrar el juego. */ #stage:target #start { display: none; } /* Animamos el texto de #start con un efecto de pulso. */ .start-text { animation: pulse 1.2s ease-out infinite; } /* Activamos la animación de las dianas cuando el jugador ha hecho clic en #start. Empieza el juego. */ #stage:target .bullseye { animation-name: bullseye-movement; } /* Activamos la animación del marcador cuando el jugador ha hecho clic en #start. */ #stage:target #score { animation: score-end 0.4s ease-in-out var(--score-delay) forwards; }<br />
<br />
Nota: podríamos conseguir lo mismo usando un checkbox con su label asociado en vez de un enlace y la pseudo clase :target pero de esta manera aprendemos una técnica más. ¡Y con esto damos por finalizado nuestro juego!<br />
<br />
Prueba y mira el código final en CodePen<br />
<br />
Conclusión El juego lo podríamos complicar todo lo que quisiéramos: o o o o o<br />
<br />
Que las dianas aparecieran por diferentes partes del viewport, no sólo desde arriba. Añadir diferentes pantallas o niveles y que las dianas fueran cada vez más rápido. Que cada diana tuviera una velocidad o easing diferente. Añadir un botón de reiniciar partida. Añadir música con un elemento <audio rel="nofollow">.<br />
<br />
Esto nos da una idea de las cosas que podemos llegar a hacer “únicamente” con HTML y CSS. Respect. Hacer este tipo de juegos a modo de ejercicio abre la mente, despierta la creatividad y ayuda a asentar conceptos. Este juego hace uso de: Custom properties, CSS Counters, Checkbox hack, cursor personalizado, animaciones, radial-gradient, :target, etc.<br />
<br />
Aunque esto es un juego, no es ninguna broma CSS Grid layout contiente funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML. Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.<br />
<br />
Ejemplo sencilloSección El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas con un mínimo de 100 píxeles y un máximo automático. Los elementos se han colocado en el grid utilizando posicionamiento en línea.<br />
<br />
HTMLSección <div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div><br />
<br />
CSSSección .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .one { grid-column: 1 / 3; grid-row: 1; } .two { grid-column: 2 / 4; grid-row: 1 / 3; } .three { grid-column: 1; grid-row: 2 / 5; }<br />
<br />
.four { grid-column: 3; grid-row: 3; } .five { grid-column: 2; grid-row: 4; } .six { grid-column: 3; grid-row: 4; }<br />
<br />
Abrir en CodePenAbrir en JSFiddle<br />
<br />
CONCLUSION:<br />
<br />
HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un término de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript. La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery, jQuery UI, Sproutcore, entre otros. Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores. </div>
</div>
<hr />
<h4>Related Documents</h4>
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/examen-html5-y-cssdocx-l3gjjnygp73p" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/l3gjjnygp73p.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/examen-html5-y-cssdocx-l3gjjnygp73p" class="text-dark">Examen Html5 Y Css.docx</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 4</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html5-y-css3docx-d3788gkw58zx" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/d3788gkw58zx.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html5-y-css3docx-d3788gkw58zx" class="text-dark">Html5 Y Css3.docx</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 8</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html5doc-qzmrrejpmq30" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/qzmrrejpmq30.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html5doc-qzmrrejpmq30" class="text-dark">Html5.doc</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> April 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 15</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html5-presentation-4vz0qdwkrw38" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/4vz0qdwkrw38.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html5-presentation-4vz0qdwkrw38" class="text-dark">Html5 Presentation</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 6</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html5-css3pdf-v3r77knrp5ze" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/v3r77knrp5ze.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html5-css3pdf-v3r77knrp5ze" class="text-dark">Html5-css3.pdf</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 4</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/learning-html5-game-programmingpdf-63y99jxmvjom" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/63y99jxmvjom.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/learning-html5-game-programmingpdf-63y99jxmvjom" class="text-dark">Learning Html5 Game Programming.pdf</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 2</small>
<div class="clearfix"></div>
</div>
</div>
</div> </div>
<hr/>
<h4>More Documents from "ayyub bhoraniya"</h4>
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/concepto-de-filosofia-empresarialdocx-63y997ymyvom" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/63y997ymyvom.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/concepto-de-filosofia-empresarialdocx-63y997ymyvom" class="text-dark">Concepto De Filosofia Empresarial.docx</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 5</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html5-y-css3docx-d3788gkw58zx" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/d3788gkw58zx.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html5-y-css3docx-d3788gkw58zx" class="text-dark">Html5 Y Css3.docx</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 8</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/pdfcoke-0ox991el16o6" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/0ox991el16o6.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-0ox991el16o6" class="text-dark"></a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 12</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/pdfcoke-6zp11kw1n8zp" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/6zp11kw1n8zp.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-6zp11kw1n8zp" class="text-dark"></a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 3</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/pdfcoke-0ox99vqg2vo6" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/0ox99vqg2vo6.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-0ox99vqg2vo6" class="text-dark"></a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> October 2019</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 9</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/pdfcoke-poldd9pmkp3x" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/poldd9pmkp3x.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-poldd9pmkp3x" class="text-dark"></a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 5</small>
<div class="clearfix"></div>
</div>
</div>
</div> </div>
</div>
</div>
</div>
</div>
<footer class="footer pt-5 pb-0 pb-md-5 bg-primary text-white">
<div class="container">
<div class="row">
<div class="col-md-3 mb-3 mb-sm-0">
<h5 class="text-white font-weight-bold mb-4">Our Company</h5>
<ul class="list-unstyled">
<li><i class="fas fa-location-arrow"></i> 3486 Boone Street, Corpus Christi, TX 78476</li>
<li><i class="fas fa-phone"></i> +1361-285-4971</li>
<li><i class="fas fa-envelope"></i> <a href="mailto:info@pdfcoke.com" class="text-white">info@pdfcoke.com</a></li>
</ul>
</div>
<div class="col-md-3 mb-3 mb-sm-0">
<h5 class="text-white font-weight-bold mb-4">Quick Links</h5>
<ul class="list-unstyled">
<li><a href="https://pdfcoke.com/about" class="text-white">About</a></li>
<li><a href="https://pdfcoke.com/contact" class="text-white">Contact</a></li>
<li><a href="https://pdfcoke.com/help" class="text-white">Help / FAQ</a></li>
<li><a href="https://pdfcoke.com/account" class="text-white">Account</a></li>
</ul>
</div>
<div class="col-md-3 mb-3 mb-sm-0">
<h5 class="text-white font-weight-bold mb-4">Legal</h5>
<ul class="list-unstyled">
<li><a href="https://pdfcoke.com/tos" class="text-white">Terms of Service</a></li>
<li><a href="https://pdfcoke.com/privacy-policy" class="text-white">Privacy Policy</a></li>
<li><a href="https://pdfcoke.com/cookie-policy" class="text-white">Cookie Policy</a></li>
<li><a href="https://pdfcoke.com/disclaimer" class="text-white">Disclaimer</a></li>
</ul>
</div>
<div class="col-md-3 mb-3 mb-sm-0">
<h5 class="text-white font-weight-bold mb-4">Follow Us</h5>
<ul class="list-unstyled list-inline list-social">
<li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i
class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i
class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i
class="fab fa-linkedin"></i></a></li>
<li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i
class="fab fa-instagram"></i></a></li>
</ul>
<h5 class="text-white font-weight-bold mb-4">Mobile Apps</h5>
<ul class="list-unstyled ">
<li><a href="#" class="bb-alert" data-msg="IOS app is not available yet! Please try again later!"><img src="https://pdfcoke.com/static/images/app-store-badge.svg" height="45" /></a></li>
<li><a href="#" class="bb-alert" data-msg="ANDROID app is not available yet! Please try again later!"><img style="margin-left: -10px;" src="https://pdfcoke.com/static/images/google-play-badge.png" height="60" /></a></li>
</ul>
</div>
</div>
</div>
</footer>
<div class="footer-copyright border-top pt-4 pb-2 bg-primary text-white">
<div class="container">
<p>Copyright © 2024 PDFCOKE.</p>
</div>
</div>
<script src="https://pdfcoke.com/static/javascripts/jquery.min.js"></script>
<script src="https://pdfcoke.com/static/javascripts/popper.min.js"></script>
<script src="https://pdfcoke.com/static/javascripts/bootstrap.min.js"></script>
<script src="https://pdfcoke.com/static/javascripts/bootbox.all.min.js"></script>
<script src="https://pdfcoke.com/static/javascripts/filepond.js"></script>
<script src="https://pdfcoke.com/static/javascripts/main.js?v=1732430217"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144986120-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-144986120-1');
</script>
</body>
</html>