Interactividad en web

No es nuestra intención introducirnos en los lenguajes Python, HTML, CSS, JavaScript... así que vamos a facilitar todo lo necesario para nuestras presentaciones de 3DNP.

Cuando decimos "integración en web" nos referimos exclusivamente a visualizar nuestra virtualización con un navegador como Firefox, Internet Explorer o Safari.

Hemos preparado una plantilla HTML para visualizar en el centro de la pantalla virtualizaciones de 450x450px. 

Icono de iDevice

El código de la plantilla

Sólo hay que Copiar/pegar este código en un editor de texto y guardarlo con el siguiente nombre y extensión 3DNP_plantilla_450px.html. El directorio de destino será la carpeta HTML de 3DNP.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<title>3DNP_plantilla_450px</title>

<style type="text/css"></style><link rel="stylesheet" href="3DNP.css" type="text/css">

</head>

<body>

<div id="iframe" style="text-align: center; margin-top: 65px;">

<iframe style="border-style: none;" src="3DNP.html" name="3dnp" align="middle" frameborder="yes" height="450" scrolling="no" width="450"></iframe>

</div>

</body>

</html>

3dnp_17

Una vez hecho esto, basta con ejecutar 3DNP_plantilla_450px.html para interactuar con nuestra virtualización. Tal y como hemos dicho debe ejecutarse con un explorador del tipo Firefox, Safari, Internet Explorer...

3dnp_18
Icono de iDevice

3DNP_plantilla_450px

No hace falta tener ningún conocimiento de HTML para poder adaptar la plantilla a cualquier otro tamaño de renders. Sólo hay que acceder al código del archivo 3DNP_plantilla_450.html con un editor de textos como hicimos con el javascript y cambiar los valores de height (alto) y width (ancho) ajustándolos a los de los renders que hayamos hecho.

3dnp_19

Con algunos conocimientos de diseño web se puede mejorar su aspecto con imágenes de fondo, título...


Icono de iDevice

Analiza y estudia el ZIP

Usa este .zip para compararlo con tu resultado una vez que hayas realizado toda la práctica. Te servirá de referencia para autoevaluarte.

descarga_3dnp_camara_oscura

NOTA: descomprime y ejecuta el archivo 3DNP_plantilla_450px.html


Obra colocada bajo licencia Creative Commons Attribution Share Alike 3.0 License