En el mundo virtual no solo hay el código HTML sino que hay muchos, muchos, más códigos como el PHP, jQuery, Javascript, Ruby, etc...
Uno de los más importantes es PHP como este:
PHP fue creado originalmente por Rasmus Lerdorf en 1995. Actualmente el lenguaje sigue siendo desarrollado con nuevas funciones por el grupo PHP.1 Este lenguaje forma parte del software libre publicado bajo la licencia PHP que es incompatible con laLicencia Pública General de GNU debido a las restricciones del uso del término PHP.2
Diferentes profesores y diseñadores tienen diferentes ideas acerca de los principios básicos del diseño, pero la mayoría están de acuerdo en 6 principios básicos: el balance, la proximidad, la alineación, la repetición, el contraste y el espacio en blanco.
Balance El balance en diseño es un principio natural de la forma en que entidades estables e inestables (en relación al equilibrio) se relacionan y comportan creando o anulando tensiones, mismos que pueden convertirse en centros de interés o formas fluidas y armoniosas. Una forma inestable está en movimiento o tiende al movimiento, en tanto una forma estable no crea tensiones y se encuentra en reposo.
La tensión se crea de la relación de diversas entidades inestables con otras estables.
Existen tres tipos de balances, el simétrico, el asimétrico y el radial.
El balance de simetría horizontal es aquel cuya tensión es mínima, los objetos o entidades claramente están en una relación estable apilados unos sobre otros:
El balance de simetría vertical se logra por medio de elementos comunes a las entidades, el circulo dividido en blanco y negro logra un balance en apariencia entre las dos columnas de distinto color.
El balance de simetría Vertical y horizontal se logra si los objetos de distinto tamaño y color parecen estables y relacionados:
El balance asimétrico son entidades cuyos centros de equilibrio son inestables y por tanto dan la apariencia de movimiento creando tensiones entre otros objetos, en el caso de la caja y la pelota, la antelación del movimiento crea un centro de interés sobre cualquier otra forma que no lo posea:
Estos diseños son usados con mucha precaución en especial si manejamos contenido, ya que mal usada puede terminar por confundir y distraer al lector del objetivo del diseño, aunque se puede crear perfectamente diseños a partir de formas desbalanceadas.
Balance asimétrico: si en estas dos columnas encontramos diferencias asimétricas, dichas diferencias manejan tensiones tendientes a jerarquizar los centros de interés y dividirlos en entidades que compiten de forma distinta por la atención del receptor, logrando un balance independiente propio:
Entidades asimétrica en balance: Un conjunto de entidades asimétricas pueden estar en aparente balance si las tensiones y los centros de los objetos logran cierta estabilidad en su distribución aparente, en este caso dan una apariencia simétrica horizontal y vertical, en parte porque la masa de las entidades no es significativa:
Tensión asimétrica: Las formas desbalanceadas dan una sensación de libertad y movimiento :
El balance radial EL balance radial a diferencia del simétrico, donde usamos filas y columnas para ordenar un diseño, lo que nos preocupa es el centro de atención, así pues las entidades contiguas tiene un propósito, creando una tensión a la entidad central, a las cuales dichas entidades estan balanceadas:
Lo diseños de páginas y ordenamientos en espiral son otra forma de dirigir al centro la atención del receptor, la tensión creada siempre será más dispersa entre más lejos del centro se encuentre, aunque colores y formas inestables pueden alterar esto dramáticamente, los blog a tres columnas son buenos ejemplos de diseños en espiral y radial:
La relación de entidades con el radio obliga a que el centro de interés sea el que maneje el peso del contenido y los satélites fragmentos jerarquizados, la tensión puede usarse para mejorar la usabilidad del contenido y darle un sentido lo mejor fluido posible:
Continuaremos con los principios La regla de los tercios, centros visuales y la retícula.
Las instrucciones HTML están encerradas entre los caracteres: <y>. Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador). La estructura básica de una página HTML es:
<html><head></head><body>
Cuerpo de la página.
</body></html>
Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo podemos llamar a nuestra primer página con el nombre: pagina1.html Durante este curso no necesitará utilizar otra herramienta más que este sitio. Veremos que contamos con una ventana donde tipeará la página y en otra verá los resultados que genera el navegador. No significa que no pueda hacerse una copia de los ejercicios que desarrolla y almacenarlos en su computadora. Estos son los elementos básicos que toda página HTML debe llevar. Si observamos todos los códigos html comienzan con "<html>" y terminan con "</html>". Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter / Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
<head></head>
Y el cuerpo de la página:
<body>Cuerpo de la página.</body>
Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito. Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo. Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento). Ahora puede ir a la sección de problema resuelto y ver el ejemplo ejecutándose en el navegador. Podrá ver la pantalla dividida en tres partes: primero se enuncia el problema, la segunda parte es el editor donde tipeamos la solución al problema (en este caso ya está resuelto por lo que aparece automáticamente) y la última sección de la pantalla muestra la página ejecutándose en el navegador. Por último deberá resolver un problema, es decir confeccionar una página HTML. Recomiendo tipear las marcas HTML para aprenderlas de memoria. No es conveniente copiar y pegar. Cuando recuerde todas las marcas, podrá copiar y pegar trozos de páginas HTML para agilizar el desarrollo. Este vídeo lo explicará bien:
Para empezar comenzaremos explicando estos dos conceptos con descripciones extraídas de Wikipedia con el que primeramente aprenderemos el concepto de Diseño gráfico:
Se pinta un boceto y se pasa al ordenador
El diseño gráfico es una profesión cuya actividad es la acción de concebir, programar, proyectar y realizar comunicaciones visuales, producidas en general por medios industriales y destinadas a transmitir mensajes específicos a grupos sociales determinados, con un propósito claro y específico. Esta es la actividad que posibilita comunicar gráficamente ideas, hechos y valores procesados y sintetizados en términos de forma y comunicación, factores sociales, culturales, económicos, estéticos y tecnológicos. También se conoce con el nombre de diseño en comunicación visual, debido a que algunos asocian la palabra gráfico únicamente a la industria gráfica, y entienden que los mensajes visuales se canalizan a través de muchos medios de comunicación, y no sólo los impresos.
Dado el crecimiento veloz y masivo en el intercambio de información, la demanda de diseñadores gráficos es mayor que nunca, particularmente a causa del desarrollo de nuevas tecnologías y de la necesidad de prestar atención a los factores humanos que escapan a la competencia de los ingenieros que las desarrollan.1
Lo siguiente que vamos a ver es la programación web de la que hablamos, vamos a recoger otro escrito de Wikipedia para ver esto:
Desarrollo web es un título algo arbitrario para el conjunto de tecnologías de software del lado del base de datos con el uso de un navegador en Internet a fin de realizar determinadas tareas o mostrar información. Wikipedia, por ejemplo, ha sido realizada por desarrolladores web.
Aquí se muestra como se conectan
servidor y del cliente que involucran una combinación de procesos de
Tradicionalmente un software departamental o incluso un ambicioso proyecto corporativo de gran envergadura es desarrollado en formastandalone, es decir, usando lenguajes ya sea compilados(C, C++, Delphi), semicompilados(.NET, Mono, Java), o interpretados (Python) para crear tanto la funcionalidad como toda la interfaz de los usuarios, pero cabe perfectamente un desarrollo orientado a web para dichos propósitos, siendo más homogéneo y multiplataforma, y dependiendo de las tecnologías utilizadas, más rápido y robusto tanto para diseñar, implementar y probar, como para su uso una vez terminado.
Funcionalmente, el desarrollador web, que es quien realiza esta labor, normalmente sólo se preocupa por el funcionamiento del software, es tarea del diseñador web preocuparse del aspecto final(layout) de la página y del webmaster el integrar ambas partes. En ocasiones el webmaster también se encarga de actualizar los contenidos de la página.
Los lenguajes de programación más usados en desarrollo web son principalmente: ASP.NET, PHP y JSP, aunque aún hay quienes usan ASP, Macromedia ColdFusion y Perl. Algunos desarrolladores web hablan muy bien de Ruby, y el framework Ruby on Rails, pero no está muy difundido todavía. También hay un proyecto para usar Pascal en web a través del lenguaje Pascal Server Pages - PSP pero aún no se han concretado desarrollos, hasta donde se conoce.
Idealmente un desarrollador web debería conocer, además de al menos un lenguaje de programación y el manejo de al menos una base de datos, HTML, CSS y JavaScript, tres tecnologías que bien trabajadas logran DHTML. También, si el diseñador desea usar Adobe Flex (Flash) debe ser capaz de integrarlo a su solución, o puede dejar los efectos en el mismo DHTML.
Es importante ver esto bien para después empezar con las cosas prácticas o no tan prácticas, aunque estos dos conceptos no estén muy relacionados, tu no podrás tener una web decente sin diseño gráfico pero tampoco sin programación, se necesitan la una a la otra. Para ello, en las grandes empresas hay diversos trabajadores que trabajan para uno y para otra.
