Programating

Creá un sitio web en unos clicks [Super explicado] Hola a todos! Amigos de T! .. ¿Como están? Ya hace unos días que no hacía posts... y me decidí hacer este, ya que a tí tal vez te gustaría tener una web pero no tienes conocimientos de programación. Entonces tengo tu solución. Tal vez ya conocías este método para crear webs super fácil. Pero como ya sabes hay gente que no lo sabía así que por favor ten cuidado con lo que vas a comentar. Gracias dijo:Aclaro... Las capturas son propias! Bueno... empezemos! Uno de los métodos que conozco para crear webs fácilmente es Webnode dijo:Webnode es un sistema online que te permite hacer páginas web gratis en español. No necesitas ningún conocimiento de programación, ni tampoco tendrás que pagar a un diseñador profesional, ni siquiera hará falta que te preocupes por el alojamiento. 1) Entrar a Webnode! ... Haz click aquí Te aparecerá algo como esto 2) Crear una cuenta, osea registrarse » Lo primero es elegir la dirección para tu web... por ejemplo si quieres que tu web se llame Full-Anime, ahí tienes que ponér Full-Anime .. y el link será Full-Anime.webnode.es ... (la terminación webnode.es no se puede cambiar, a menos que pagues mensualmente para tener un .com o un .es) » Luego pones tu dirección de Correo electrónico.. el mío lo ven en la imagen » Y luego por último se crean una contraseña (Apúntala por las dudas) » Luego de llenar esas 3 barras clickeas en "Regístrate y crea tu web" ╚ En caso de qué cuando clickees en "Registrate y crea tu web" y no te permita acceder recuerda fijarte una cosa! En la primera barra dice "Elige dirección para tu web" Al costado de eso dirá si esa dirección está disponible o nó. Si está disponible dirá esto: De lo contrario.. si nó está disponible dirá esto: 3) Seleccionar el tipo de web Una vez hayamos dado click en lo anterior nos enviará a esta pantalla: » Web Personal: Si es solo para subir tus cosas o algo por el estilo elige esta opción. » Web Empresarial: Si estás buscando hacer una web para tu empresa elige esta opción. » Tienda Online: Si estás buscando hacer una web para vender productos online elige esta opción ╣ Yo en este caso usaré una Web Personal.. ya que sólo la estoy haciendo para enseñarles. ├ Una vez que le demos clic a una opción nos saldrá algo como esto: » Eliges el nombre de Tu web » Luego un "Eslogan" como el de T! que es "Inteligencia Colectiva" » Y por último el Idioma. Que por defecto dice Español ├ Bien.. luego de rellenar esos campos, le dan clic en Continuar Y vamos con el siguiente paso. 4) Seleccionar una plantilla. Bueno.. la plantilla es a su gusto. Algunas tienen colores diferentes. Algunas tiene diferentes opciones al estar construyendo la web. Osea cada plantilla tiene sus Ventajas y sus desventajas. Luego están las plantillas "Premium" pero no es necesario.. por que hay que pagar. Pero igual las comunes nos sirven. Si eliges una y no te gusta, luego mas adelante explicaré como cambiarla. Esas no son las únicas plantillas que hay.. también hay varias páginas de plantillas para elegir... miren la imágen: dijo:Plantilla que recomiendo: Yo no e utilizado todas las plantillas que hay. Pero si hay una en especial que me llama la atención es esta: » Luego verán sus ventajas pero ustedes eligan la que mas les guste. ⌂ Una vez elegida la plantilla nos aparecerá esto: dijo:Posiblemente les aparezca con todos los tics pero yo solo les pongo eso.. ustedes eligen los que necesiten. Luego clic en Terminar ...... En este momento ya tenemos la web: Empezemos a editarla Bueno capo. Ya tienes tu web. Pero si la dejas así es aburrida =/ ... empezemos a editarla para que se vea mejor dijo:Si salís de tu web y quieres entrar para editarla no será así nomás.. solo entrando al link.. si saliste de tu web y ahora quieres entrar de vuelta lo que tienes que hacer es esto: Si tu web es ejemplo.webnode.es lo que tenés que hacer es agregar cms. al principio... y quedaría así: cms.ejemplo.webnode.es ... y ahí nos pedirá el Correo electrónico con el cual nos registramos.. y la contraseña.... y listo.. podremos volver a entrar para editarla... si quieres entrar a la web sin entrar al editor ponés el link así nomás... sin el cms. osea... ejemplo.webnode.es y listo... Vamos a empezar: Bueno... primero que nada editemos eso que dice "Bienvenidos a nuestra web" dijo:Esta página "Bienvenidos a nuestra web" debe contener una breve presentación de tu web. Debe incluir una descripción de tu proyecto y sus objetivos. Se trata de una guía para los visitantes, a fin de informales sobre tus productos y servicios más importantes. Debe describir los objetivos esenciales, que aparecerán con detalle en las siguientes páginas. Entonces... inventas un mensaje para ponerlo ahí y listo... Para editar el contenido le das clic en "Editar contenido" Una vez que hicimos clic ahí abrimos el editor para poder editar el contenido que aparecía... puedes cambiar el título y el contenido ... Para agregar imágenes: Lo que tienes que hacer es buscar una imagen.... »Clic derecho »Copiar imagen ACLARO: no es copiar URL de imagen... es copiar imagen! Una vez que hayas dado clic en Copiar imagen vas a la página que estás editando y le das »Clic derecho »Pegar Nos quedaría así: Para agregar videos: Lo que tienes que hacer es buscar un video... no tiene porqué ser de Youtube, todos los videos sirven.... ya que no hay que poner ningún codigo ni nada... ya verán que simple que es. Bueno... elegimos un video... yo voy a elegir uno de Youtube y otro de algún lugar para mostrarles a ustedes lo fácil que es! Empiezo con el de Youtube: Yo elegí uno de Call of Duty Black Ops 2 Bueno... esta parte de explicar es muy complicada... lo que tienen que hacer es copiar el video como si fuera un texto.. osea... arrastrando el mouse por arriba de el ... así como si fuera un texto y lo quieren copiar.. bueno igual que eso... pero también tendrán que copiar la parte de abajo .. así miren: dijo:Empiezan arrastrando desde donde está la flecha de arriba hasta la de abajo.. y ahí les copiará el video! Lo copian con Ctrl+C y luego van al editor y lo pegan con Ctrl+V ... y nos quedaría algo así: Como ya ven quedó algo feo.. entonces.. borramos las cosas que están abajo del "Flash" osea... borramos los botones que insertamos para poder poner el video... y nos quedaría así: Como pueden observar sigue quedando feo... entonces arrastramos de vuelta como si fuera un texto solo el recuadro de "Flash" que ese sería el video... que nos quede así: Bien.. eso lo copiamos con Ctrl+C .... y lo borramos... y si queda algo gris de ese color también lo borramos... cosa que quede en blanco... y ahora Ctrl+V para copiar el video... y listo.. queda perfecto! Como verán.. dice "Flash" eso no importa... una vez que lo publiquemos saldrá bien.. bueno.. así debería ser... Ahora clickeamos en "Guardar" para que por fin se publique... ¿Por qué sale como cortado? La respuesta es fácil... si se acuerdan, yo les dije que cada plantilla tiene sus ventajas, y sus desventajas.. bueno... una de las desventajas de las plantillas que yo utilizo con frecuencia.. es esa.. como te das cuenta no hay que poner videos en ese lugar.. ya que saldrán cortado... pero si utilizas otra plantilla puede ser que te deje visualizarlo bien, como verás la imagen también salió cortada... bueno en ese caso tienes que usar imágenes mas chicas. Una vez editado eso tendrán que clickear en "Publicar" para que los cambios que hicimos los visitantes los puedan ver Bien... la página ya fue publicada... ahora los visitantes ya pueden ver eso. Fin del post. Aquí termina la primera parte! No se preocupen... no dejaré su web por la mitad En el próximo post (Parte 2) Aprendermos a como cambiar la imagen que hay arriba del todo.. que en mi caso es una mujer con girasoles.. también aprenderemos a como editar las letras esas que dicen en mi caso "Programating-Subidas" - Un mundo de descargas paralelas... las podemos editar con colores y todo.. quedará bueno.. y también vamos a editar las pestañas de la página.. como ven.. las pestañas son el coso de arriba del todo (Fuera de la página) donde está el favicon... que en el caso de taringa es un Cuadradito azul con una T blanca... bueno.. al costado de eso dice: Taringa! -Inteligencia colectiva... bueno.. en nuestra web vamos a poder editar eso. Saludos! Y hasta la próxima parte! Totalmente todo lo escrito, fue escrito por mí, al igual que las capturas. Las fuí sacando a medida que iva explicando en este post.

Curso PHP [1era parte]: Qué es PHP Resumen Introducción al lenguaje de programación PHP, uno de los más usados en la red. Introducción a PHP En mi experiencia como desarrollador de aplicaciones web, PHP ha significado junto al servidor de web Apache, las dos herramientas claves para la creación de aplicaciones. PHP es un lenguaje sencillo, de sintaxis cómoda y similar a la de otros lenguajes como C o C++, es rápido a pesar de ser interpretado, multiplataforma y dispone de una gran cantidad de librerías que facilitan muchísimo el desarrollo de las aplicaciones. El código generado es mantenible, se lee muy bien y podemos programar utilizando objetos. PHP es un lenguaje ideal tanto para el que comienza a desarrollar aplicaciones web como para el desarrollador experimentado, y está alcanzando unos niveles de uso (más de 1 millón de webs lo utilizan ya) que convierten su conocimiento en algo indispensable para los profesionales del desarrollo en Internet. Y, además, PHP es un lenguaje basado en herramientas con licencia de software libre, es decir, no hay que pagar ni licencias, ni estamos limitados en su distribución y, podemos ampliarlo con nuevas funcionalidades si así lo quisiéramos. Respecto a su licencia, en la versión PHP 3.0 era GPL, pasando a ser modificada en su versión 4.0, por la incorporación de Zend, un nuevo interprete de PHP mucho más rápido que el anterior de PHP. Este interprete Zend tiene asociado un optimizador opcional, el cual ya está más dentro del mundo comercial que del software libre, tema que ha levantado algunas suspicacias dentro de la comunidad de desarrolladores de software libre. En esta serie de presentación de PHP mostraremos este lenguaje, como se instala y configura, como se desarrolla con él, las librerías fundamentales y como no, su excelente forma de trabajar con casi todas las bases de datos, y en especial, con MySQL, con la que forma un equipo estrella dentro del mundo de desarrollo software. No olvidaremos por otro lado a PostgreSQL, la base de datos que es realmente software libre, y que avanza con piso firme para convertirse en la base de datos de referencia dentro de cualquier proyecto libre, sobre todo tras la publicación de la versión 7.0. En los artículos de la serie vamos a describir PHP en su última versión, PHP4, que por fin en Mayo del 2000 ha sido publicada. Posiblemente para cuando el lector comience a desarrollar con PHP, esta versión 4 será la estándar. En ella hay muchos cambios y mejoras que detallaremos a lo largo de los artículos de la serie. La serie está orientada al uso conjunto de Apache y PHP, aunque PHP se puede compilar como un ejecutable que puede ser utilizado como cgi-bin. De esta forma, cualquier servidor de web que soporte cgi podría ejecutar las páginas PHP. La ventaja que tiene Apache frente a estos es que podemos compilar el interprete PHP como un módulo de Apache, por lo que la velocidad de ejecución de estas páginas PHP es muy superior, así como el consumo de recursos al cargarse el interprete de PHP una sola vez en memoria. ¿Qué es PHP? Con estas siglas nos referimos a un lenguaje de programación que está muy orientado al desarrollo de aplicaciones web. Cuando pedimos a nuestro servidor de web una página PHP, que no es más que un programa PHP que genera HTML, antes de enviar dicha página al cliente se la pasa al interprete de PHP. Este la interpreta y es el resultado de esta interpretación del programa PHP, contenido en la página PHP, lo que termina llegando al cliente. Supongamos que el contenido de una página web que reside en el servidor, y cuyo nombre es "intro.php", tiene el siguiente contenido: <? [/color][color=#007700]echo "<h1>Mensaje desde PHP</h1>";?> Cuando un navegador le pida al servidor de web la página "intro.php", el servidor de web va a darse cuenta, por la extensión ".php", de que esta página ha de enviarse primero al interprete de PHP. Este recibe el contenido de la página y como resultado de esta ejecución (interpretación) genera una página HTML, que es la que envía al cliente a través de Apache. Como veremos en una página PHP se puede mezclar HTML y PHP, algo muy flexible pero que hay que manejar con cuidado ya que puede llevar a confusiones y, sobretodo, a que el equipo que diseñe las páginas web y el que programe la aplicación no puedan ser independientes. Bueno... aquí termina este curso. Habrá una 2da parte. Que será la Instalación de PHP.. lo estaré haciendo en los próximos días. Y la 3era parte es aún mejor. Se pondrá mas divertido, ya que es sobre la programación de página PHP. Gracias por pasar!

Curso HTML5 [Parte 1]: Definición de HTML Para comenzar En esta lección no se necesita ningún archivo complementario. Esta lección es una revisión general de conceptos de HTML y en las siguientes ya se realizarán ejercicios prácticos paso a paso. Definición de HTML5 HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5. Por ello vamos a distinguir entre la especificación HTML5 en sí y la familia HTML5. Podemos definir la especificación HTML5 como nuevos elementos de markup o sintaxis, utilizados por los diseñadores para crear páginas web junto con las etiquetas utilizadas a día de hoy. Muchos de estos nuevos elementos ya son conocidos para los diseñadores que trabajan con las etiquetas HTML tradicionales, como <p>, <ul> o <div>. Estas nuevas etiquetas suponen para desarrolladores y diseñadores, unas herramientas más avanzadas y se traducen en mejores experiencias para el usuario final. La familia HTML5 incluye las nuevas etiquetas y tecnologías como CSS3, Geolocalización, Almacenamiento Web (Web Storage), Web Workers y Web Sockets entre otras. Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear páginas web más sofisticadas y útiles. Los nuevos navegadores incorporan funcionalidades para responder a las expectativas de los consumidores y también como fruto de la evolución natural de la propia tecnología. A medida que las aplicaciones web van ganando en capacidad de respuesta y velocidad y son capaces de resolver tareas complejas como la edición de imágenes, representación de mapas, hojas de cálculo o vídeos, los usuarios ya exigen este mismo nivel de rendimiento en todas las aplicaciones de la web. Existen limitaciones con las capacidades de los lenguajes de programación actuales y no todas las funcionalidades se pueden implementar e incorporar de manera sencilla. HTML5 aporta nuevas funcionalidades y herramientas con el fin de conseguir que los sitios web sean más interesantes, atractivos y útiles. La historia de HTML5 HTML4, que se dio por cerrado en 1998, es el lenguaje de markup que conforma la base de la gran mayoría de las páginas web que podemos ver a día de hoy. Los diseñadores y desarrolladores web han estado utilizando la especificación HTML 4.01 durante bastantes años de manera satisfactoria, combinándola con CSS para la definición de estilos y con JavaScript para añadir interactividad a los contenidos. Tras la finalización de HTML 4.0.1, el W3C continuó sus trabajos en consonancia con la evolución de la web, y comenzó con un lenguaje llamado XHTML 1.0. Existe una pequeña diferencia entre HTML 4.0.1 y XHTML 1.0 (XHTML es un lenguaje más estricto: por ejemplo, todas las etiquetas deben indicarse en minúsculas). Uno de los objetivos de XHTML 1.0 era crear un lenguaje de markup que pudiera extenderse y resolver las necesidades de las tecnologías futuras, por ejemplo para los dispositivos móviles. Muchos sitios web se han creado utilizando XHTML 1.0 como marco de desarrollo y muchos diseñadores y desarrolladores valoran positivamente sus reglas sintácticas más estrictas. En paralelo a la adopción y difusión de XHTML 1.0, se empezó con el desarrollo de otro lenguaje, XHTML 2.0, que añadía una serie de novedades de gran interés a las páginas web y que se apoyaba de forma notoria en XML. No obstante, este nuevo lenguaje adolecía de diversos problemas de tipo técnico y no resolvía adecuadamente las necesidades reales de los desarrolladores. En 2004, un grupo de representantes de los principales fabricantes de navegadores y un grupo de trabajo de desarrolladores web formaron un grupo independiente llamado WHATWG (iniciales de Web Hypertext Application Technology Working Group). Su misión consistía en crear una especificación de lenguaje HTML mejor, orientada a crear un nuevo tipo de aplicaciones web pero manteniendo la compatibilidad con las versiones en activo de los navegadores existentes. Durante unos dos años y medio el W3C y el grupo WHATWG trabajaron en paralelo y de manera independiente hasta que en 2006, Tim Berners-Lee, creador de la World Wide Web y fundador del W3C anunció que el W3C y WHATWG trabajarían juntos en la elaboración del estándar. Como resultado de todo ello, se abandonó el desarrollo de XHTML 2.0 y la especificación HTML 4.0 se reformó con el nombre HTML5. No obstante, conviene recordar que HTML5 empezó siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qué fue diseñado realmente HTML5. Gracias a que el W3C tomó el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garantía de que HTML5 será realmente un estándar gratuito y con las suficientes garantías de no incurrir en problemas de propiedad intelectual. HTML5 extiende la definición de lo que puede hacer una página web A día de hoy HTML no tiene capacidad para reproducir contenidos multimedia, como audio o vídeo, sin un complemento ( un "plug-in" ) como los de Adobe® Flash® o Microsoft® Silverlight®. HTML tampoco tiene capacidad para almacenar datos en el ordenador del usuario, esto se hace actualmente mediante un lenguaje de scripting o con alguna otra tecnología. No existe un formato de dibujo nativo en HTML. Los gráficos y animaciones se ofrecen en estos momentos en forma de archivos de imágenes o con la ayuda de otros complementos (Adobe Flash, Java, Microsoft Silverlight u otros). En general, cada vez más gente depende de la web y utiliza aplicaciones web y las expectativas que se generan alrededor de lo que puede (o podría) hacer una página web van creciendo día tras día. Esta demanda de los usuarios en favor de un mayor rendimiento y unos sitios web con prestaciones más avanzadas y completas se ve limitada por el lenguaje HTML que se utiliza actualmente. Un sitio como Bing™ Maps es una aplicación web de altas prestaciones que podría beneficiarse de las nuevas funcionalidades que incorpora HTML5 El lenguaje HTML5 El lenguaje ( o "markup" ) HTML5 incorpora algunas etiquetas nuevas pensadas para hacer que la estructura de la página web sea más lógica y funcional. Antes de HTML5, la estructura de una página dependía fuertemente de las etiquetas <div>, generalmente asociadas a una clase CSS o un ID. Por ejemplo, en HTML 4.0 es una práctica comúnmente aceptada definir la cabecera de una página web de esta forma: <div id="header" > Esta es la cabecera </div> En este caso, el código destacado en color rojo es el ID de CSS que sirve para definir la anchura y altura de la cabecera así como su color de fondo. En el código CSS podríamos tener algo así: #header { width:960px; height:100px; background-color:gray; } El ID utilizado header es arbitrario. Algunos diseñadores prefieren nombres como masthead, topsection, o box. En la especificación HTML5 existe ya una etiqueta llamada <header> que viene a sustituir al elemento <div> de forma que la sintaxis es mucho más lógica y coherente: <header> Esta es la cabecera </header> En este ejemplo ya podemos añadir directamente las propiedades de estilo (ancho, alto, color de fondo, etc.) en una regla para el nuevo elemento header de CSS: header { width:960px; height:100px; background-color:gray; } La diferencia entre estos dos ejemplos anteriores puede que sea difícil de entender si no estás familiarizado con CSS. En el primer caso se utiliza un selector (#header) que refiere a un atributo ID de CSS. En el segundo caso utilizamos un selector (header) que es una novedad de HTML5 y nos permite aplicar un estilo al elemento directamente. HTML5 dispone de unos cuantos elementos nuevos aparte de éste, como <footer>, <nav>, <section>, <aside>, y <article>. Estos nombres se basan en los que se vienen utilizando habitualmente para distinguir secciones dentro de las páginas web que vemos a diario (div id="footer", div id="nav", etc.). El objetivo de los nuevos elementos HTML5 no es otro que evitar una excesiva dependencia de las etiquetas <div> y sustituirlas por una estructura de página más consistente y legible. Como puedes ver, HTML5 no sustituye ningún elemento de sintaxis de HTML; simplemente añade nuevos elementos de vocabulario a la lista existente. Dicho de otra forma, podemos seguir utilizando la etiqueta <div>, pero esta etiqueta ya no necesariamente tiene que ser la viga maestra que soporte el diseño visual de toda una página web. La estructura de un sitio web con elementos HTML5. A. Header. B. Nav. C. Section. D. Article. E. Aside. F. Footer. Los elementos <video>, <audio> y <canvas> La especificación HTML5 incluye etiquetas que nos permiten integrar contenidos multimedia sin necesidad de complementos de navegador. Las etiquetas <video> y <audio> sirven para integrar video y audio en las páginas web de la misma forma que actualmente se hace con los archivos de imagen utilizando la etiqueta <img>. La etiqueta <canvas> dota al lenguaje HTML de un formato nativo para el dibujo y la animación. Esta etiqueta puede servir, además, como plataforma alternativa para los gráficos y animaciones que a día de hoy podemos ver en películas Flash. No obstante, existen inconvenientes de cierta consideración que es preciso resolver. Elementos <video> y <audio> para incorporar contenidos multimedia La estructura necesaria para incorporar contenidos de audio o vídeo a una página web es bastante sencilla, como podemos ver en el siguiente ejemplo donde añadimos un archivo de vídeo: <video src="catz.mp4" width="400" height="300"></video> Insertar un archivo de audio mp3 en la página se hace de forma similar. En el caso del audio y el vídeo podemos añadirle también controles de reproducción y la posibilidad de precarga, utilizando los atributos controls, preload, y autobuffer: <audio src="high_seas_rip.mp3" controls preload="auto" autobuffer></audio> Esta característica de HTML5 es muy útil si se compara con los métodos disponibles hasta ahora. Por ejemplo, para incorporar vídeo con Adobe Flash o Microsoft Silverlight es preciso añadir código de programación. Aparte, existe una amplia categoría de dispositivos móviles como los iPhone® de Apple® o Windows® Phone 7 que no soportan Flash o Silverlight, y en estos casos el elemento video de HTML5 es la principal alternativa. Aunque es de agradecer la simplificación que suponen las etiquetas <video> y <audio>, en seguida surge la pregunta de cómo vamos a hacer para manejar estos contenidos desde los navegadores anteriores que no reconocen estas etiquetas nuevas. El elemento <canvas> para dibujo y animación El elemento canvas funciona a modo de superficie de dibujo dentro de una página web (de ahí le viene el nombre). Dentro de esta superficie de dibujo podemos crear formas con colores, gradientes y patrones de relleno. Podemos manipular los pixels de forma interactiva en pantalla, mostrar textos y exportar los contenidos hacia archivos de imagen estática, como .PNG. Podemos también utilizar JavaScript o las nuevas funciones de animación de CSS3 para que los objetos que creamos puedan moverse, desaparecer, cambiar de tamaño, etc. Incorporar un elemento canvas a una página es muy sencillo: <canvas id="myCanvas"></canvas> JavaScript se encarga de todo el trabajo y nos ofrece un contexto para el objeto creado. Por ejemplo, para crear uno de los objetos más sencillos dentro del canvas, un rectángulo negro, el código necesario puede ser como este: <script> var canvas = document.getElementById ("myCanvas";), context = canvas.getContext("2d";); // x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 20, 200, 100); </script> Con estas pocas líneas creamos un rectángulo de color negro con unas dimensiones concretas. El código puede parecer excesivo para un resultado tan simple, pero la etiqueta canvas se limita a presentar el código dentro de un documento HTML y este modelo nos aporta una serie de ventajas. Entre los usos previsibles están elementos de la interfaz de usuario, como controles de reproducción, elementos de ilustración que se pueden animar o visualización dinámica de datos como diagramas y gráficos. Formularios web Los nuevos elementos de formulario de HTML, cuando se implementen, harán que el trabajo con formularios sea más sencillo que ahora. Por ejemplo, muchos diseñadores web necesitan crear formularios en donde los datos tienen que comprobarse antes de enviarlos al servidor. Es casi obligado que el usuario, por ejemplo, tenga que escribir una dirección de correo electrónico en un campo de un formulario. A día de hoy, para validar este dato se necesita programación en Javascript o cualquier otro lenguaje de scripting, pero HTML5 incorpora el atributo required a la lista de tipos de datos de entrada utilizables en formularios, como se muestra en este ejemplo: <input type="email" required> Se han definido unos cuantos tipos de datos nuevos para los formularios, como es el caso de email para las direcciones de correo, search para designar los campos de formulario que deben recibir términos de búsqueda, url para los campos de direcciones web y algunos más. Estos nuevos elementos de formulario web seguramente tardarán algo en integrarse en la especificación oficial, pero están diseñados de manera que puedan revertirse a campos genéricos de formulario, o dicho de otra forma, podemos empezar a utilizar estos nuevos tipos de campos y si un navegador no los soporta, los sustituirá internamente con elementos genéricos (soportados). Muchos elementos nuevos en HTML5 Aparte de los nuevos elementos <video>, <audio>, <canvas>, y tipos de datos de formulario, hay otros nuevos elementos dentro de HTML5 que podemos utilizar, como <figure> y <figurecaption>, que se emplean para etiquetar imágenes dentro de la página web, el elemento <hgroup> para agrupar una serie de elementos de cabecera dentro de una sección lógica, etc. HTML5 además resuelve el caso de ciertas etiquetas que aparecen en HTML 4.01 pero que han quedado obsoletas o necesitaban ciertas precisiones, como ocurre con <i>, <b>, <small>, <strong> y <abbr>, que ahora tienen significados y usos nuevos con HTML5. Introducción a las APIs de HTML5 y las tecnologías de apoyo Existen otra serie de tecnologías de desarrollo web vinculadas con la especificación HTML5 o con su sintaxis. Estas técnicas nos van a permitir llevar a cabo actividades desde el navegador web y dispositivos móviles compatibles que no eran posibles con las versiones anteriores de HTML. ¿Qué es una API? Las APIs (Application Programming Interfaces o, en español, Interfaces de Programación de Aplicaciones o simplemente "interfaces de programación" son una forma de crear aplicaciones utilizando componentes preconfigurados cuyo uso no se restringe a la web, ni siquiera a los lenguajes de scripting. Sitios web como Twitter o YouTube entre otros, ofrecen APIs al público de manera que los diseñadores y desarrolladores pueden con ellas integrar algunas de sus funcionalidades dentro de sus propios sitios web (y también sirven para otros fines, como por ejemplo para crear aplicaciones para teléfonos móviles o aplicaciones personalizadas para equipos de escritorio). Uno de los objetivos principales de una API es el de normalizar el modo de trabajo de ciertos mecanismos y simplificar tareas de programación, que de lo contrario, serían bastante complejas. Las APIs son un aspecto muy importante dentro del entorno de HTML5 y hay una serie de ellas que conviene conocer, como Web Storage, Microdata o Geolocation, entre otras. Para utilizarlas, lo primero que tenemos que saber es que la documentación oficial de estas APIs es independiente de la documentación oficial de HTML5. Ten en cuenta que salvo que te muevas bien dentro de la parte más técnica del desarrollo web, esta documentación no es demasiado intuitiva a primera vista. Pero existen unos cuantos ejemplos de código aquí que te pueden servir de orientación: Web Storage http://dev.w3.org/html5/webstorage/#introduction Microdata http://dev.w3.org/html5/md/#introduction Geolocation http://dev.w3.org/geo/api/spec-source.html#introduction La API de Geolocalización en acción Geolocation es una API que nos permite conocer el punto geográfico desde el cual se conecta el navegador a Internet. Esta información se emplea para enviar al usuario datos de interés para él, ajustados a su ubicación. Como ejemplo de su utilidad están las páginas web de búsqueda asociadas a un mapa en el cual nos indican dónde están situados ciertos comercios o restaurantes a una distancia concreta a pie desde el punto donde estamos en ese momento. En vez de tener que introducir a mano la dirección, un navegador habilitado para geolocalización nos puede devolver estos resultados de manera automática y transparente. Geolocation en estos momentos está disponible en algunos navegadores modernos. Podemos ver un ejemplo de cómo funciona en el sitio de mapas de Microsoft, Bing™ Maps (necesitarás un navegador compatible con geolocalización, en este caso estamos utilizando Internet Explorer 9) 1 Abre el navegador compatible con la función de geolocalización y escribe esta dirección: http://www.bing.com/maps. En la página se muestra por defecto el mapa de EE.UU y Canadá. 2 En la esquina superior izquierda del mapa, pon el cursor sobre el icono de localización y aparecerá la opción "Click to center the map on your current location". Pulsando el icono de localización empieza el proceso de geolocalización. 3 Pulsando en el localizador aparece un mensaje "Allow bing.com to track your physical location." Todos los navegadores que aceptan la geolocalización preguntan al usuario y les dan la opción de aceptar o rechazar la función de control de ubicación. En Internet Explorer 9 se pide al usuario que permita al navegador conocer su emplazamiento. 4 Para ver cómo actúa la función de geolocalización, pulsa en el botón "permitir una vez" y después pulsa otra vez en el localizador. El mapa se centrará automáticamente en el punto geográfico donde te encuentras. En los últimos años los teléfonos móviles han ido incorporando la posibilidad de conectar datos geográficos o de GPS dentro del navegador del dispositivo o con aplicaciones propias. Cuando la función de geolocalización esté soportada por un gran número de navegadores web, podremos disfrutar de estas ventajas tanto en equipos de escritorio como en dispositivos móviles que soporten la API Geolocation de HTML5. Web Workers Web Workers es otra API que se suele considerar de la familia HTML5. Web Workers es un marco de programación que resuelve problemas de rendimiento de los navegadores. Al acceder a aplicaciones web avanzadas, como las de mapas o aquellas que generan gráficos o diagramas al entrar en la página web, se inician ciertas operaciones de computación que consumen una gran cantidad de recursos de procesador y que pueden reducir notablemente el rendimiento de la aplicación. Gran parte de la ralentización es debida a que se produce un conflicto a nivel de máquina entre las tareas interactivas de usuario (pulsación del ratón, arrastre, etc.) y la necesidad de la propia aplicación de acceder a recursos como datos, tarjeta gráfica u otros. Los Web Workers son scripts que se ejecutan en threads independientes. Esto quiere decir que ciertos procesos como puede ser obtener datos desde una base de datos, se ejecutan de forma independiente de las actividades que desarrolle el usuario, lo que da como resultado un entorno mucho más fluido para éste. Web Workers están aún en una fase inicial de su desarrollo pero ya puedes ver demos en http://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html utilizando la platform Preview de Internet Explorer 10. Almacenamiento Web El Almacenamiento Web (Web Storage) es un ejemplo de uso de modelos preexistentes de tecnologías web bajo nuevas modalidades, más potentes. El Web Storage mejora el concepto de cookies del navegador. Actualmente las cookies permiten que los sitios web puedan guardar información en cantidades muy reducidas en los equipos de los usuarios, datos que normalmente sirven para volver a utilizarlos en momentos posteriores, y de esta manera, por ejemplo, ciertos sitios web recuerdan la información del usuario desde el último acceso. Las cookies son una tecnología bastante limitada y no resulta fácil su utilización por parte de los diseñadores web. Ahora, Web Storage actualiza este modelo para que las aplicaciones web puedan almacenar una cantidad de datos muy superior y que su acceso y utilización sea mucho más fácil y eficiente. HTML5 nos ofrece dos maneras de guardar datos: localStorage y sessionStorage. Los datos guardados con localStorage quedan a disposición del navegador en todo momento, aunque cerremos el programa o se reinicie el sistema. Los datos guardados bajo la modalidad sessionStorage se pierden al cerrar el navegador. Un ejemplo del uso de Web Storage puede ser la forma en que se almacenan datos en algunos teléfonos móviles. Los navegadores para smartphones, por ejemplo, pueden guardar datos en una sesión de navegador y permitir al usuario leerlos y/o modificarlos aunque no tengan conexión a la red. CSS3 no forma parte de HTML5, pero está íntimamente relacionado Como ya se dijo anteriormente, muchos de los aspectos novedosos designados bajo el nombre "HTML5" son en realidad una combinación de las tecnologías HTML5 descritas antes junto con JavaScript o CSS. CSS (iniciales de Cascading Style Sheets) es un lenguaje en evolución que se identifica mediante números de versión, y la última de ellas es la CSS 3.0, que ha ido evolucionando en paralelo con la especificación de HTML5. Algunos componentes de CSS3 suelen considerarse erróneamente como componentes de HTML5, como es el caso de las transiciones o la animación. La confusión es comprensible, pero para los profesionales del diseño y desarrollo web es importante conocer la diferencia. A continuación describimos brevemente algunas de las características más relevantes de CSS3. Transformaciones CSS 2D y 3D La propiedad transform de CSS nos permite rotar, cambiar la escala o sesgar un elemento de una página web. Un ejemplo puede ser el girar levemente una foto dentro de una página para conseguir un efecto estéticamente muy atractivo. También podemos dar animación a las transformaciones: por ejemplo, mediante animación aplicada a la propiedad "scale" podemos conseguir un efecto de ampliación o reducción del tamaño de una imagen o de cualquier otro elemento. Podemos también añadir la propiedad "perspective" al efecto de transformación para simular la visión de un objeto en un espacio tridimensional, estático o en movimiento. Fondos, bordes, colores RGBa, gradientes, sombras y esquinas redondeadas Ahora, con CSS3 es posible aplicar mejoras muy interesantes a la presencia visual de una página. Un ejemplo sencillo es la propiedad "border-radius", con la que podemos poner esquinas redondeadas a los objetos rectangulares, y también podemos crear muchos efectos nuevos, como gradientes de color o sombreados. Algunos efectos tradicionales, como background-image y la propiedad border han sido mejorados en CSS3. Por ejemplo, podemos utilizar la propiedad border-image para utilizar imágenes como bordes de objetos, o añadir varias imágenes de fondo a un mismo contenedor, evitando así la limitación actual a una sola imagen que permite la propiedad background-image. La descripción del espacio de color RGBa es otra novedad de CSS3, ya que la "a" representa el grado de transparencia (o "alpha". Con la notación RGBa de color ahora podemos aplicar efectos de transparencia a cualquier objeto de la página. Fuentes de letra Web @font-face Cada vez está más extendido el soporte para añadir tipos de letra especiales a las páginas web mediante la propiedad @font-face, que permite especificar una fuente concreta y un enlace desde el cual el navegador pueda descargarla. Esta característica puede cambiar de forma radical el aspecto de las páginas web, pero lamentablemente también se ve afectada por los muchos problemas de compatibilidad con navegadores antiguos que se pueden ver en otras funcionalidades de HTML5. Media Queries de CSS La interacción del usuario con Internet se basa casi de forma exclusiva en lo que se puede ver dentro de una pantalla, y el tamaño de las pantallas que podemos encontrar varía enormemente. Un monitor de ordenador de gran formato puede llegar a resoluciones de 2.000 pixels de anchura, mientras que un pequeño teléfono móvil apenas nos ofrecerá 320 pixels. El reto que supone presentar una experiencia equivalente en ambas pantallas puede resolverse mediante las nuevas directivas de CSS de consulta de tipo de medios ("media queries". En esencia se trata de lanzar una consulta al navegador para determinar el tipo de pantalla en el cual se va a restituir la página y, a partir de esta información, enviar un estilo específico, optimizado para esas dimensiones. Por ejemplo, la misma página web, en un monitor con 2.000 pixels de ancho podría mostrarse con cuatro o incluso cinco columnas, pero en pantallas de 320 pixels, podría enviar una plantilla de estilos que solo utilice una columna. Animaciones con CSS Ciertas tecnologías como Flash o Silverlight se han venido utilizando hasta ahora para animar objetos dentro de las páginas web. Ahora ya podemos conseguir algunos de estos efectos utilizando las reglas y propiedades de CSS3. En el futuro, el elemento Canvas de HTML5 y las transiciones de CSS3 permitirán crear elementos animados e interactivos sobre la página. Las animaciones de CSS, y el tema siguiente, las transiciones, probablemente estarán soportadas por la mayoría de los navegadores en los próximos años. En el momento de escribir esta guía, el estándar todavía no está cerrado por lo que no está soportado en todos los navegadores, en cualquier caso puedes empezar a probar algunos ejemplos con la platform preview de Internet Explorer 10. Bueno amigos.. eso fue todo en mi primer post. Como ya ven es un post muy largo. Es la introducción a los que se le llama "HTML5". Para que ustedes lo puedan comprender mejor. Mas adelante Publicaré la Segunda parte. Si quieres puedes seguirme para no perderte la próxima parte.. ni las siguiente . Gracias por pasar.

Curso Ajax [Parte 1]: Que es ajax Según wikipedia AJAX (Asynchronous JavaScript And XML) és una técnica de desarrollo web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes que conoceremos en este manual. O para que lo entiendan mejor, es una manera de crear una aplicación que responde a las acciones del usuario sin refrescar la página contra el servidor. Tabla de contenido Tecnologías Funcionamiento Problemas Ejemplos Tecnologías Para conseguir este efecto, se utilizan la mayoría de las tecnologías disponibles para páginas web, HTML, CSS, XML, JavaScript y algún lenguaje de servidor cómo puede ser PHP o ASP, veamos que función tiene cada lenguaje en la aplicación: JavaScript - Para manejar el objeto XMLHttpRequest y DOM tratar para los datos recibidos. HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la información recibida por el servidor CSS - Define el aspecto de cada elemento y dato de la aplicación XML - Es el formato de los datos transmitidos del servidor al cliente (navegador) y que posteriormente serán mostrados. Lenguaje de servidor - Genera la información útil en XML y la envía al navegador. Funcionamiento El usuario accede a la aplicación que es enviada por el servidor en formato HTML, JavaScript y CSS. Luego el código JavaScript de la aplicación pide al servidor los datos que quiere mostrar y este, ejecuta un código de lado de servidor que envía al navegador los datos en formato XML. Cada vez que el usuario realiza una acción que significa mostrar unos datos, la capa javascript, repite la acción anterior de manera invisible al usuario y muestra los datos deseados. Problemas El principal problema de la gran mayoría de aplicaciones AJAX (lo digo por experiencia como usuario de mozilla) es la baja compatibilidad entre navegadores, puesto que la capa JavaScript, es de una gran complejidad y a menudo por falta de experiencia en el lenguaje, o por falta de tiempo, se opta por programar solo para Internet Explorer. En futuras entregas, veremos cómo programar una aplicación AJAX compatible para todos los navegadores incluidos navegadores sin javascript. Ejemplos Un excelente ejemplo de aplicación AJAX, bastante compatible entre navegadores es Google Maps, en ella podrás ver cómo cambiamos la posición del mapa sin recargar la página.. Click aquí para ingresar a Google Maps Bueno amigos.. eso fue todo en mi primer post. Como ya ven no es un post muy largo. Es la introducción a los que se le llama "Ajax". Es una explicación sencilla, clara y completa. Para que ustedes lo puedan comprender mejor. Mas adelante Publicaré la Segunda parte. Si quieres puedes seguirme para no perderte lo próximo. Gracias por pasar.