Diseño y Desarrollo Web

martes, 19 de mayo de 2015

Adobe Dreamweaver

es una aplicaciòn programa de estudio (basada en la forma de estudio de Adobe Flass) que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones WEB basados en estándares. Creado inicialmente por macromedia (actualmente producido por Adobe Systems) es uno de los programas más utilizados en el sector del diseño y la programación web por sus funcionalidades, su integración con otras herramientas como Adobe Flass y, recientemente, por su soporte de los estándares del World Wide web Consontriun

Sus principales competidores son Microsoft Exp Microsoft Expression Web y BlueGriffon (que es de código abierto) y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.

Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de Macromedia por parte de Adobe. Las letras CS significan Creative Suite

La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización, puesto que en este programa sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que sea un programa muy fluido y todo ello permite que programadores y editores web hagan extensiones para su programa y lo pongan a su gusto.

Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.

Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.

Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.

Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).

No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.

Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.

Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.

Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.

También podría decirse que, para un diseño más rápido y a la vez fácil, podría complementarse con Fireworks en donde se podría diseñar un menú u otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola en donde ya llevará los vínculos para dicho sitio.

Índice

1 Resaltado de sintaxis
2 Historial de versiones
3 Requisitos del Sistema
4 Véase también

Resaltado de sintaxis

A partir de la versión 5, Dreamweaver admite el resaltado de sintaxis para los siguientes lenguajes por defecto:

ActionScript
Active Server Pages (ASP).
ASP.NET (no se admiten en la versión CS4 - http://kb2.adobe.com/cps/402/kb402489.html)
C#
Cascading Style Sheets (CSS)
ColdFusion
Extensible HyperText Markup Language (XHTML)
Extensible Markup Language (XML)
Extensible Stylesheet Language Transformations (XSLT)

Elemento de lista numerada
Elemento de lista numerada

Historial de versiones

Proveedor	Versión mayor	Versión menor/nombre alternativo	Fecha de publicación	Notas
Macromedia	1.0	1.0	Diciembre de 1997	Primer lanzamiento, sólo para Mac OS.
	1.0	1.2	Marzo de 1998	Primera versión para Windows.
	2.0	2.0	Diciembre dRRe 1998
	3.0	4.2	Diciembre de 1999
	3.0	UltraDev 1.0	Junio de 2000
	4.0	4.0	Diciembre de 2000
	4.0	UltraDev 4.0	Diciembre de 2000
	6.0	MX	29 de mayo de 2002
	7.0	MX 2004	10 de septiembre de 2003
	8.0	8.0	13 de septiembre de 2005
Adobe	9.0	CS3	16 de abril de 2007	Sustituye a Adobe GoLive en la serie Creative Suite
	10.0	CS4	23 de septiembre de 2008
	11.0	CS5	12 de abril de 2010
	11.5	CS5.5	12 de abril de 2011
	12.0	CS6	21 de abril de 2012
	13.0	CC	Abril de 2013

Color	Significado
Rojo	Versión antigua
Amarillo	Versión antigua; soportada aún
Verde	Versión actual

Requisitos del Sistema

Windows

Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits
Microsoft® Windows® XP con Service Pack 2 (se recomienda Service Pack 3); Windows Vista® Home Premium, Business, Ultimate o Enterprise con Service Pack 1; o Windows 7
512 MB de RAM
1 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre adicional durante la instalación (no se puede instalar en dispositivos de almacenamiento flash extraíbles)
Resolución de 1580 × 800 con tarjeta de vídeo de 16 bits
Java™ Runtime Environment 1.6 (incluido)
Unidad de DVD-ROM
Se necesita el software QuickTime 7.6.6 para la reproducción de contenido multimedia HTML5
Este software no funcionará si no se activa. Es necesario disponer de conexión a Internet de banda ancha y registrarse para poder activar el software, validar suscripciones y acceder a servicios online.* No está disponible la activación por teléfono.
Procesador Intel multinúcleo
Mac OS X v10.6.8 o v10.7. Adobe Creative Suite 5, 5.5 y las aplicaciones de CS6 son compatibles con Mac OS X Mountain Lion (v10.8) si se instalan en sistemas basados en Intel.**
512 MB de RAM
1,8 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre adicional durante la instalación (no se puede instalar en un volumen que utilice un sistema de distinción entre mayúsculas y minúsculas en archivos, ni en dispositivos de almacenamiento flash extraíbles)
Resolución de 1280 × 800 con tarjeta de vídeo de 16 bits
Java Runtime Environment 1.6
Unidad de DVD
Se necesita el software QuickTime 7.6.6 para la reproducción de contenido multimedia HTML5
Este software no funcionará si no se activa. Es necesario disponer de conexión a Internet de banda ancha y registrarse para poder activar el software, validar suscripciones y acceder a servicios online.* No está disponible la activación por teléfono

Redes sociales Guias Android Juegos Empresas Paginas Web Crear cuenta Adobe Dreamweaver: ¿qué es y para qué sirve? (descargable) Adobe Dreamweaver: ¿qué es y para qué sirve? (descargable) Es un software de edición en forma de un estudio (basado en la forma de Adobe Flash) su propósito es construir, desarrollar, diseñar y editar sitios, vídeos y aplicaciones web. Inicialmente fue creado por Macromedia pero actualmente es desarrollado por Adobe Systems. Adobe Dreamweaver se ha convertido en el programa más utilizado para el diseño y la pro...

Fuente: www.crearcrear.com/adobe-dreamweaver-descargable/ © crear crear

Es un software de edición en forma de un estudio (basado en la forma de Adobe Flash) su propósito es construir, desarrollar, diseñar y editar sitios, vídeos y aplicaciones web. Inicialmente fue creado por Macromedia pero actualmente es desarrollado por Adobe Systems. Adobe Dreamweaver se ha convertido en el programa más utilizado para el diseño y la programación web, esto gracias a las funciones que posee, su fácil integración a otros programas como Adobe Flash y recientemente por su soporte para estándares del World Wide Web Consortium. Entre los principales competidores que tiene en el m...

Fuente: www.crearcrear.com/adobe-dreamweaver-descargable/ © crear crear

Es un software de edición en forma de un estudio (basado en la forma de Adobe Flash) su propósito es construir, desarrollar, diseñar y editar sitios, vídeos y aplicaciones web. Inicialmente fue creado por Macromedia pero actualmente es desarrollado por Adobe Systems. Adobe Dreamweaver se ha convertido en el programa más utilizado para el diseño y la programación web, esto gracias a las funciones que posee, su fácil integración a otros programas como Adobe Flash y recientemente por su soporte para estándares del World Wide Web Consortium. Entre los principales competidores que tiene en el ...

Fuente: www.crearcrear.com/adobe-dreamweaver-descargable/ © crear crear

martes, 12 de mayo de 2015

CÓMO USAR LAS CLASES (CLASS) E ID's (ID) EN CSS

Todos hemos escuchado alguna vez aquello de que los ids o clases no pueden comenzar con un número. Y todos, estoy seguro, damos la sentencia por buena

Sin embargo, el aceptar esta afirmación dicha de forma tan simple y ambigua da lugar a errores, pues así expresada es de todo punto errónea por inexacta.

Lo primero que debemos hacer, es tener claro que hay que diferenciar el lenguaje Html del lenguaje Css, lo que le es propio a cada uno de ellos y lo que uno u otro permite o prohíbe. Esto es, utilizar la terminología y sintaxis de cada uno de ellos con propiedad.

La mezcla de conceptos distintos, el asumir que lo que es válido en uno lo es en otro o no distinguir cuándo se referencia a uno u otro da lugar a errores típicos como hablar de atributos o elementos en el ámbito de Css o la afirmación que nos ocupa. Incluso

Aclarando la cuestión del inicio por un número de ids o clases

Así que antes de seguir tienes que tener muy claro que una cosa son los elementos del html y sus partesd y otra muy distinta los selectores de Css. Pese a la íntima relación que existe entre ellos no hay que confundir el valor del atributo de id o clase en el marcado html con el selector de clase o de id en las hojas de estilos.

Una cosa son los elementos del Html
y otra muy distinta los selectores de Css.

Una cosa es el atributo (de clase o de id) y su valor en el lenguaje Html
y otra cosa muy distinta los selectores de ids o de clases en Css.

En el lenguaje html

Nada impide que en el marcado del documento html el valor del atributo id o del atributo clase comience por un número. Es totalmente lícito y funcional. Es más, en según qué circunstancias, será lo correcto y la única manera de hacerlo.

El código Html anterior es totalmente válido y si lo pasas por el validador verás que no marca ni error ni advertencia porque el valor de los atributos class e id comienzan por números. Además el enlace cuyo atributo href es un número también funcionará perfectamente.

En el lenguaje Css

Es exclusivamente en el ámbito del lenguaje Css donde es cierta la afirmación que dice que el nombre de un selector Css no puede comenzar por un número:

los identificadores (incluyendo los nombres de los elementos, clases e ID de los selectores) pueden contener sólo caracteres [A-Za-z0-9] y los caracteres 161 en adelante en ISO 10646, más el guión (-); no pueden comenzar con un guión o un número. También pueden contener caracteres con escape y cualquier carácter de ISO 10646 en forma de código numérico (ver el siguiente ítem). Por ejemplo, el identificador "B&W?" puede escribirse como "B\&W\?" o "B\26 W\3F".

O siendo más precisos, la especificación dice:

que el nombre de un selector Css de clase o de id no puede tener un número inmediatamente a continuación del símbolo '.' o '#' que identifica el tipo de selector que es.
que inmediatamente tras el indicador del tipo de selector '.' o '#' tampoco puede ir alguno de los carácteres no permitidos.
que hay una serie de carácteres que no pueden formar parte del nombre de los selectores, con independencia del lugar que ocupen dentro de él. Como @ >, étc.

Y hago esta última puntualización porque a un elemento del html con cierto valor en su atributo class o id podemos referenciarlo en la hoja de estilos utilizando distintos selectores: con el selector de id o clase y con el selector de atributo, por ejemplo, o haciendo uso de los selectores de pseudoclase o con los combinadores >, ~, /ref/ étc).

Permitiendo iniciar selectores Css con un número

Llegados a este punto en el que tenemos un valor que en html es válido y funcional y que las especificaciones de Css no permiten utilizar la cuestión es cómo resolver la colisión.

La respuesta tradicional y más popular es recomendar no usar en html valores para esos atributos que comiencen por números. Repito, no porque no lo permita el propio html, que sí lo admite.

Pero ¿y si ya te lo encuentras y tienes la necesidad de utilizar ese valor y no tienes acceso al html o al archivo que lo genera?

Tienes dos vías para lograrlo. La primera es utilizar en el Css el selector de atributo. Ese que se conforma con corchetes [ ].

Pero anterior a la llegada de este tipo de selector por valor de atributo la especificación Css ya proveyó una forma de poder utilizar un selector de clase o id que comience por un número o cualquier otro carácter de los no permitidos por la especificación.

Para ello definió la barra invertida \ como carácter de "escape Css". Aspecto que sigue siendo válido e incluido en la última recomendación selector level 3.

Así, en el caso de querer o necesitar que un selector de clase o id comience en la hoja de estilos, o dentro del elemento <style> en el html, por un número o cualquier otro carácter no permitido en Css sólo hay que "escaparlo":

lunes, 4 de mayo de 2015

COLORES HEXADECIMALES

Todos los colores parten de una mezcla de colores primarios: rojo, azul y verde. Para representar los colores en web o html se utilizan los números hexadecimales.

Los números hexadecimales puede utilizar 16 valores diferentes utilizando letras y números. Los colores web son 216 colores seguros y se deben ver igual en todo tipo de equipo y navegador.

Los colores se representan con 6 letras empezando con el # los primeros 2 dígitos representan el rojo, los siguientes 2 el verde y los últimos 2 l azul. es por ello que se le llama RGB (Red, Green, Blue) al modelo.

Si deseas construir colores hexadecimales en tu diseño puedes consultar esta pagina web
colorhexa.com donde tenemos una explicación fundamentada de como se crea el color, sus valores y como utilizarlos.

Aunque es el método más complicado para indicar los colores, se trata del método más utilizado con mucha diferencia. De hecho, prácticamente todos los sitios web reales utilizan exclusivamente este método.

Para entender el modelo RGB hexadecimal, en primer lugar es preciso introducir un concepto matemático llamado sistema numérico hexadecimal. Cuando realizamos operaciones matemáticas, siempre utilizamos 10 símbolos para representar los números (del 0 al 9). Por este motivo, se dice que utilizamos un sistema numérico decimal.

No obstante, el sistema decimal es solamente uno de los muchos sistemas numéricos que se han definido. Entre los sistemas numéricos alternativos más utilizados se encuentra el sistema hexadecimal, que utiliza 16 símbolos para representar sus números.

Como sólo conocemos 10 símbolos numéricos, el sistema hexadecimal utiliza también seis letras (de la A a la F) para representar los números. De esta forma, en el sistema hexadecimal, después del 9 no va el 10, sino la A. La letra B equivale al número 11, la C al 12, la D al 13, la E al 14 y la F al número 15.

Definir un color en CSS con el método RGB hexadecimal requiere realizar los siguientes pasos: - Determinar las componentes RGB decimales del color original, por ejemplo: R = 71, G = 98, B = 176 - Transformar el valor decimal de cada componente al sistema numérico hexadecimal. Se trata de una operación exclusivamente matemática, por lo que puedes utilizar una calculadora. En el ejemplo anterior, el valor hexadecimal de cada componente es: R = 47, G = 62, B = B0 - Para obtener el color completo en formato RGB hexadecimal, se concatenan los valores hexadecimales de las componentes RGB en ese orden y se les añade el prefijo #. De esta forma, el color del ejemplo anterior es #4762B0 en formato RGB hexadecimal.

Siguiendo el mismo ejemplo de las secciones anteriores, el color del párrafo se indica de la siguiente forma utilizando el formato RGB hexadecimal:

p { color: #4762B0; }

Recuerda que aunque es el método más complicado para definir un color, se trata del método que utilizan la inmensa mayoría de sitios web, por lo que es imprescindible dominarlo. Afortunadamente, todos los programas de diseño gráfico convierten de forma automática los valores RGB decimales a sus valores RGB hexadecimales, por lo que no tienes que hacer ninguna operación matemática:

Herramienta de color de Photoshop para definir los colores según los modelos RGB, CMYK, Lab, HSB y RGB hexadecimal

¿Cómo utilizar los códigos de color?

Con los códigos de color puedes fijar el color del fondo del Web site, el color de fuentes, las células en tablas y mucho más.

Usar los códigos de color para el color del fondo del Web site:

Para convertir los colores puede utlizar esta página CLIC AQUI

miércoles, 29 de abril de 2015

LOREM IPSUM

El lorem ipsum, un texto de relleno muy utilizado en diseño gráfico

Lorem ipsum es, básicamente, un texto de relleno (dummy text) que, habitualmente, se utiliza en diseño gráfico, web o editorial para suplantar un texto que no ha sido entregado por el cliente, para hacer demostraciones tipográficas o borradores para crear diseños visuales antes de insertar el texto final (greeking text).

Se utiliza este texto en los diseños para que, al estar escrito en un lenguaje clásico y no entenderse, los clientes se centren en el diseño y no en el texto, ya que es habitual que, si se entiende, toman más atención al contenido del texto.

Una de las cualidades del texto en cuestión es que tiene una distribución de las letras similar a las del inglés.

Aunque la frase no tiene sentido, tiene una larga historia. Durante varios siglos, los tipógrafos han utilizado esta frase para mostrar las características más distintivas de sus fuentes. Se utiliza porque las letras que contiene y el espaciado entre caracteres de esas combinaciones revelan de la mejor forma posible el espesor, el diseño y otras características importantes del tipo de letra.

Un ejemplar de 1994 de la revista "Before & After" asocia "Lorem ipsum ..." a una versión latina revuelta de un pasaje de de Finibus Bonorum et Malorum, un tratado sobre la teoría de la ética escrito por Cicerón en el año 45 A.C. El pasaje "Lorem ipsum..." se ha extraído del texto que dice "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...", que se traduciría como "No hay nadie que ame el dolor mismo, que lo busque y lo quiera tener, simplemente porque es el dolor...".

Durante los años 1500, una imprenta adaptó el texto de Cicerón para elaborar una página de ejemplos de tipografía. Desde entonces, el texto en latín ha sido la norma del sector de la tipografía para simular texto. Antes de que existiera la publicación electrónica, los diseñadores gráficos tenían que simular diseños utilizando líneas ficticias para indicar texto. La llegada de hojas autoadhesivas preimpresas con "Lorem ipsum" ofreció una manera más realista de indicar dónde debería ir el texto en una página.

Suele despertar curiosidad saber qué significa. Sin embargo, este texto carece de significado. Esto se debe a que cuando el texto es legible, los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.

Una de las cualidades del texto en cuestión es que tiene una distribución de las letras similar a las del inglés.

Existen múltiples variantes del texto original, algunas sin casi parecido con él. Estas versiones incluyen letras adicionales que no son comunes en latín (como la k, w y z).

¿Dónde encontrarlo?

Si deseas conseguir una versión completa de este texto existe una página en la que no solo lo puedes conseguir sino que lo puedes dividir en diferentes parrafos o filtrar un número concreto de palabras.

El texto completo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Descargar libro Fundamentos De Programacion Con Visual Basic 6 de Blitzkrieg

martes, 21 de abril de 2015

Diseño web Responsive o web Adaptive | Diferencias

Hoy en día nuestros sitios web deben verse en todos los dispositivos, la razón principal es que cada vez más personas consumen información desde dispositivos diferentes a sus computadoras. Más aún, estas personas esperan recibir el contenido del sitio en un formato que les facilite consumirlo en el dispositivo en que se encuentran.

Esta tarea puede ser lograda de dos formas diferentes y es aquí donde entran los conceptos de adaptive y responsive.

La pregunta del millón es: ¿cuál debemos eligir? Para responder esto, primero hay que entender la diferencia entre ambos conceptos.

¿Qué es un diseño adaptive?

Un diseño adaptive es aquel que se realiza pensando exclusivamente en cómo quedará nuestro diseño en uno o varios dispositivos. En este paradigma, el servidor web evalúa el tipo de dispositivo en que el usuario se encuentra y despliega un contenido adaptado o más bien creado directamente para ese dispositivo.

Ventajas del diseño adaptive

El contenido desplegado es único para ese dispositivo, por lo que no tiene información que pertenece a otros y esto logra que la carga de la página se haga más rápida
La decisión de que contenido mostrar, no pertenece al dispositivo sino que el servidor se encarga de hacer los cambios, por lo tanto el dispositivo consume menos recursos
Puede tener una mejor experiencia de usuario dependiendo del proyecto pues obliga a crear un diseño estrictamente para el dispositivo y lo que quisiéramos que el usuario consumiera

Desventajas del diseño adaptive

Las desventajas principales del diseño adaptive son el costo y lo que llamaría la “miopía de la información”. Estos dos factores están entrelazados y de forma inversamente proporcional: a menor el costo en tiempo y esfuerzo mayor la miopía. ¿Por qué?

El asunto de la miopía se da, porque por lo general los encargados de experiencia e interfaz de usuario están tratando de evaluar que información quisiera un usuario a través de suposiciones. Más aún, el enfoque de trabajo del cual parten tiende a ser “qué remover” de la versión para computadoras. Esto al final tiende a crear un vacío de información de ese grupo de usuarios que ahora prefiere ir al sitio desktop, pues no encuentra lo que quiere. ¿No le ha pasado? Entra a un sitio y sólo busca como ir a sitio desktop porque no está lo que anda buscando.

Para poder crear un diseño adaptive correctamente debe realizar esfuerzo importante que involucre grupos de enfoque y una muestra de los diferentes usuarios. Aún con todo este esfuerzo, puede hacerse difícil dar en el clavo. Con esto se puede evidenciar el tipo de costos que generaría el realizar reuniones con estos grupos y pruebas de experiencia de usuario. Si no se emplea este esfuerzo, el resultado del producto sería deficiente y miope.

¿Qué es un diseño responsive?

Un diseño responsive es el que comparte el contenido de la página sin tomar en cuenta desde que dispositivo viene, sino la resolución de pantalla del mismo.

Cómo cualquier cosa en nuestras vidas, profesiones y acontecimientos hay ventajas y desventajas de cada uno de estos paradigmas. Por lo general, la decisión de utilizar uno u otro dependerá enteramente del tipo de consumidor del portal y el propósito de lo que viene a lograr con la página que se le presenta.

Ventajas del diseño responsive

Es mucho menos costoso que el adaptive pues no hay que crear una experiencia única para cada dispositivo
Unifica la experiencia de los usuarios hacia el sitio. Se ve familiar a lo que han consumido en otros dispositivos y en consecuencia se les hace más fácil interactuar con él
Se enfoca en como desplegar el contenido presentado a los dispositivos partiendo en de perspectiva de la computadora y no promueve el concepto de “que remover”

Desventajas del diseño responsive

Pasa toda la responsabilidad de procesamiento y decisión de como se mostrará la página al dispositivo
Se consume más del plan de datos del usuario pues se descargan elementos que tal vez no se presentan en este dispositivo
No se puede crear una experiencia personalizada para un dispositivo

Entonces… ¿cuál elegir?

La realidad es que depende, pues dependerá de los consumidores finales:

¿Quiénes son?
¿Cuáles son sus intereses?

También depende del negocio y el producto web:

¿Cuáles son los objetivos del negocio, marca o emprendimiento?
¿Qué quiere ofrecer y dar a conocer?
¿Los consumidores no deben tener acceso a consumir de ese contenido en ese dispositivo?

Ambas herramientas son válidas y la decisión de “qué es adecuado” debe venir de un entendimiento de las necesidades del cliente. Una de las frases más conocidas e importantes para alguien que se dedique a la industria de la producción ya sea web, aplicaciones o software en general es que “No hay balas de plata”. Intente utilizar la herramienta que más le convenga para la batalla que va a librar en ese momento y no aplicar lo mismo ante todas las situaciones.

Permítanos asesorarlos para que su página web le genere los resultados esperados. Desarrolle con nosotros una página web de calidad, logrando el retorno de su inversión. Conozca más sobre nuestra consultoría web o sobre el servicio de diseño y desarrollador web.

sábado, 17 de enero de 2015

CSS

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores. CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.

¿Para qué sirve?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Sintaxis

CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras clave tomadas del inglés para especificar los nombres de varias propiedades de estilo.

Una hoja de estilo se compone de una lista de reglas. Cada regla o conjunto de reglas consiste en uno o más selectores y un bloque de declaración (o «bloque de estilo») con los estilos a aplicar para los elementos del documento que cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y está formado por una o varias declaraciones de estilo con el formato propiedad:valor;.<!R0>

En el CSS, los selectores marcarán qué elementos se verán afectados por cada bloque de estilo que les siga, y pueden afectar a uno o varios elementos a la vez, en función de su tipo, nombre (name), ID, clase (class), posición dentro del Document Object Model, etcétera.<!R1>

Abajo puede verse un ejemplo de una parte de una hoja de estilos CSS:

selector [, selector2, ...] [:pseudo-class][::pseudo-element] {

propiedad: valor;

[propiedad2: valor2;

...]

}

/* comentarios */

Uso

Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>.Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que leía esa página con un navegador perdía totalmente el control sobre la visualización del texto.

Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre cómo será visualizado, solamente marca la estructura del documento. La información de estilo, separada en una hoja de estilo, específica cómo se ha de mostrar <h1>: color, fuente, alineación del texto, tamaño y otras características no visuales, como definir el volumen de un sintetizador de voz

Por otro lado, antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas <table>. Aunque esta era una técnica cómoda y versátil, ello conllevaba el uso de un elemento con una semántica particular, y en el que la distribución de los datos no se ajustaban al flujo de la información que se obtenía en la vista desde los navegadores habituales, lo que redundaba en una merma en la accesibilidad a la página por parte de otros navegadores (orientados a personas con alguna deficiencia sensorial, o a ciertos dispositivos electrónicos).

Mediante el uso de CSS, se ha permitido eliminar el uso de tablas para el diseño, usándolas solamente para la muestra de datos tabulados, si bien es cierto que obtener la versatilidad que ofrecía el diseño con tablas, es algo más complicado si no se usan.

Formas de usar CSS

Para dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:

1. Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona.

Dado que los clientes de correo electrónico no soportan las hojas de estilos externas, y que no existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, la solución más recomendable para maquetar correos electrónicos, es utilizar CSS dentro de los propios elementos (inline).

2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style>. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.

3. Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.

Estilos CSS introducidos por el usuario que ve el documento, mediante un archivo CSS especificado mediante las configuraciones del navegador, y que sobreescribe los estilos definidos por el autor en una, o varias páginas web.

Los estilos marcados "por defecto" por los user agent, para diferentes elementos de un documento HTML, como por ejemplo, los enlaces.