paginas web estaticas y dinamicas

¿Qué es una página web estáticas?

una web estatica es aquella pagina enfocada principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin poder interactuar con la página web visitada.

¿Qué es una página web dinámica?

Una web dinámica es aquella que contiene aplicaciones dentro de la propia web, otorgando mayor interactividad con el navegante. Ejemplos de aplicaciones dinámicas son encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada ....

las páginas web son documentos y, como tales, suelen tener una extensión que nos da una idea sobre del tipo de contenido que posee ese documento. Las extensiones más habituales de las páginas web con las que nos podemos encontrar a la hora de navegar son:

• html, y htm: Suele ser la extensión estándar para páginas web estáticas, formadas por contenido html.
• asp (Active server pages): Son páginas dinámicas que se generan en el momento de ser visitadas. Están escritas en un lenguaje de programacón similar al Visual Basic de Microsoft.
• jsp (Java server pages): Son páginas dinámicas al igual que las anteriores pero que estan escritas con el lenguaje de programación Java de Sun.
• php (Personal Home Page): Son páginas dinámicas escritas con un lenguaje de propósito general para ser incrustado junto al codigo HTML, que no tiene nada que ver con java o visualbasic.

Si bien todos los documentos con las extensiones anteriores son páginas web, únicamente los .html o.html son páginas web estáticas, y por tanto las únicas que podremos ver directamente con el navegador. Las páginas .asp, .jsp o .php, para poder visualizarse deberán estar contenidas en un servidor web.

Recordemos una página web estática presentará:

• Absoluta opacidad a los deseos o búsquedas del visitante a la página
• El proceso de actualizacion de es lento, tedioso y escencialmente manual
• El usuario no tiene ninguna posibilidad de seleccionar, ordenar o modificar los contenidos o el diseño de la página a su gusto
• Para cambiar los contenidos de la página, es imprescindible acceder al servidor donde está alojada la página
• 
  
•  
•  una página web dinámica:

• Gran número de posibilidades en su diseño y desarrollo.
• Se puede alterar el diseño, contenidos o presentación de la página al gusto
• El proceso de actualización es sumamente sencillo, sin necesidad de entrar en el servidor.
• Emplea un grán número de funcionalidades tales como bases de datos, foros, contenido dinámico, etc 

FORMATO DE WEB

En la actualidad, las páginas web se visualizan en diversos tipos de dispositivos como tablets, smartphones, laptops, PCs, etc. No obstante, cada aparato tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria, ente otros aspectos.

En este contexto surge el diseño web adaptable, conocido por las siglas RWD (Responsive Web Design), cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para que sean visualizadas de mejor manera y no existan problemas relacionados al  tamaño, visualización y desplazamiento.

Para entender mejor esta revolución en la visualización de tus plataformas web, a continuación presentamos algunas advertencias brindadas por Jesus Hernandez Ruiz, especialista en dirección de Empresas y Marketing, quien nos indica qué tomar en cuenta al momento de emprender la creación de una página web:

+

html 5 y xhtml

                                                              html 5 y xhtml

 ¿QUÉ ES HTML5?

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML. Esta nueva versión (aún en desarrollo), y en conjunto con CSS3, define los nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas o atributos, sino que incorpora muchas características nuevas y proporciona una plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).

HTML5 está destinado a sustituir no sólo HTML 4, sino también XHTML 1 y DOM Nivel 2. Esta versión nos permite una mayor interacción entre nuestras páginas web y el contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.

Algunas de las nuevas características de HTML5 serían:

• Nuevas etiquetas semánticas para estructurar los documentos HTML, destinadas a remplazar la necesidad de tener una etiqueta <div> que identifique cada bloque de la página.
• Los nuevos elementos multimedia como <audio> y <video>.
• La integración de gráficos vectoriales escalables (SVG) en sustitución de los genéricos <object>, y un nuevo elemento <canvas> que nos permite dibujar en él.
• El cambio, redefinición o estandarización de algunos elementos, como <a>, <cite> o <menu>.
• MathML para fórmulas matemáticas.
• Almacenamiento local en el lado del cliente.
• Y otros muchos nuevos APIs que veremos a lo largo de los siguientes capítulos.

• XHTML

  XHTML (Extensible Hypertext Markup Language), a grandes rasgos, es un lenguaje de marcado que te permite editar webs. Está basado en HTML 4.01, pero sus reglas son mucho más estrictas y versátiles que HTML. XHTML es una nueva formulación de HTML que utiliza el meta lenguaje de marcado XML, lo cual es una ventaja clave en su usabilidad porque muchos formatos de datos están basados en XML y los dispositivos modernos requieren una versión estricta del lenguaje de marcado porque no pueden mostrar mal el código fuente.

• Características

  XHTML se utiliza para marcar contenido como texto, imágenes y enlaces en forma de hipervínculos para crear una cierta estructura que puede ser mostrada por los navegadores. Los documentos pueden ser estructurados con XHTML para hacerlos legibles para un analizador. El analizador interpreta los elementos de marcado especificados en las definiciones del lenguaje XHTML y reproduce el contenido de estos elementos de una manera específica.
  En última instancia, el usuario ve lo que contienen estos elementos y no la forma en que se anotan o estructuran los elementos. Este último se llama código fuente XHTML y puede ser editado con diferentes editores de texto, por ejemplo, con un editor WYSIWYG. La notación separa el contenido y el diseño. El contenido está encerrado por los elementos. La forma en que se muestra este contenido está determinada por los elementos y sólo la muestra el navegador.
  Antes de crear un documento XHTML, debe seleccionar una Definición de tipo de documento. Hay tres tipos, cada uno con ciertas ventajas y desventajas, transicional, estricto y frameset. Al mismo tiempo, la versión del lenguaje debe ser especificada, como XHTML 1.0 o 2.0. El marco básico de un archivo XHTML debe ajustarse exactamente a las reglas, de lo contrario no es WFF (fórmula bien formada), que es un código fuente válido que cumple con los requisitos de lenguaje y definiciones de documentos y que puede ser leído por un navegador.

estructura de html

                                                                     estructura de html

Estructura básica

• Cada página comienza con: < HTML > .
• A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
• Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.
• La página acabará con < /HTML > .

Cabecera

La cabecera de un documento está delimitada por las etiquetas < HEAD > y </HEAD > Sus componentes son opcionales. El más importante es <TITLE> , que permite escribir el título del documento. El título no se muestra en la página, sino en la parte superior de la ventana del visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente forma:

<HEAD>

<TITLE>Título del documento HTML</TITLE>

</HEAD>

Cuerpo

Es la parte delimitada por <BODY> y < /BODY > . Puede llevar los siguientes atributos:

• BACKGROUND="imagen": define el fondo. Más adelante veremos más sobre imágenes.

• BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o si ésta imagen no puede obtenerse.. Más adelante veremos más sobre colores. Por ahora nos basta saber que para los colores básicos se puede utilizar su nombre en inglés: white, blue, red, green ...

• TEXT="######": color del texto. Por defecto será negro.

• LINK="######": color de los links. Por defecto será azul.

• VLINK="######": color de los links visitados. Por defecto será violeta

herramientas para crear prototipos

                                                         herramientas para crear prototipos

Justinmind es una herramienta de prototipado de sitios web, aplicaciones software y aplicaciones móviles que puede trabajar tanto con Windows como con Mac o también con iOs y Android. Existe una versión gratuita con la que puedes trabajar bastante bien aunque el precio de la versión Pro no es muy elevado.

La aplicación es bastante sencilla de usar y se divide en dos partes principales, los paneles dinámicos y los eventos. Los paneles dinámicos permiten poner varios elementos en la misma área, de esta forma podremos simular botones, cambios de pestaña u otros contenidos que cambian dinámicamente. Los eventos permiten indicar acciones sobre los elementos que tenemos en nuestro diseño.

In Vision

In Vision ha supuesto una revolución no solo en el mercado de las herramientas de prototipado sino también de gestión de un proyecto en general, desde las fases de creación de los mockups hasta el final del desarrollo. El valor que la distingue de otras herramientas es que es muy intuitiva tanto para el diseñador que la está utilizando como para el cliente.

Entre algunas de sus características encontramos la de compartir y comentar un proyecto a tiempo realcon el cliente. De esta forma el feedback llega de manera más rápida y más clara y los procesos se agilizan. Además, permite gestionar las versiones de tus proyectos sincronizando tus archivos de Photoshop o Illustrator con la aplicación de modo que resulta muy fácil no perderse en el entramado de carpetas y capas de los diferentes archivos.

La versión de prueba deja probar hasta cinco proyectos. Si tu volumen de proyectos web es notable, merece la pena que te crees una cuenta de pago ya que cuando comiences a utilizarla te darás cuenta de que te aporta un valor añadido a tus proyectos.

Origami

Origami es una herramienta de creación de prototipos cuya propiedad es de Facebook y se utilizó para crear las maquetas de varias aplicaciones como Instagram, Messenger y Paper. Aunque se usa principalmente para aplicaciones de iOS gracias a su integración con Apple Quartz Composer, Origami también es compatible al desarrollo de prototipos interactivos en Android.

Esta herramienta de prototipado ofrece un par de características muy útiles para la creación de prototipos interactivos, incluyendo plugins para Sketch y Photoshop, así como una extensa biblioteca completa con foros, tutoriales en vídeo y guías. Tiene una característica para exportar el proyecto a código que permite convertir tu diseño visual en ejemplos de código escritos para iOS, Android, o la web.

Proto.io

Tanto para iOs como para Android, Proto.io es una muy buena herramienta para la creación de grandes aplicaciones. Su principal característica es que cuenta con un motor que permite crear animaciones para apps móviles a través de un timeline para poder definir cuánto durará la animación.

Fluid

Fluid es otra herramienta de prototipado compatible con Android e iOs muy eficaz para pequeñas aplicaciones. Con ella puedes diseñar el maquetado de las principales vistas de tu app, pero también puedes enlazar cada una de esas vistas a controles de otras, pudiendo así realizar una demostración interactiva muy cercana a lo que sería el resultado final. Además, en su editor cuenta con diferentes wireframes para las diversas plataformas. De forma gratuita puedes crear proyectos de hasta 10 pantallas. Luego deberás contratar alguno de los diferentes planes mensuales que ofrece.

importancia de los prototipos

                                            IMPORTANCIA DE LOS PROTOTIPOS

¿Qué es un prototipo?

Un prototipo es un modelo representativo o simulación del sistema final.

El desarrollo de prototipos en la fase de diseño de algún producto o servicio es de suma importancia para evitar problemas posteriores de tiempo, esfuerzo y dinero.

Un buen ejemplo de la importancia del diseño de  prototipos es la industria automotriz donde cada año las empresas gastan miles de millones de dólares en mejorar las versiones actuales de sus vehículos, razón por la cual se tienen que llevar a cabo prototipos que aseguren la viabilidad técnica y comercial de cada producto desarrollado.

Prototipos en la industria del software

En la industria del software, el realizar un prototipo en la fase de diseño es crucial para asegurar que el sistema se apega a las necesidades del cliente, ya que esta herramienta nos permite experimentar el diseño final del sistema.  Sin embargo algunos clientes o managers que no están familiarizados con el término, a menudo lo ven como una tarea que aporta poco o nada de beneficio en el proceso total. Falso. A medida que algún sistema aumenta su complejidad la importancia de desarrollar un prototipo aumenta exponencialmente. Los beneficios de diseñar prototipos supera por mucho el costo inicial de incluirlos.

prototipo